本文旨在指导开发者如何在基于HTML5和JavaScript的表单验证系统中，集成Luhn算法对信用卡号进行实时验证。文章将详细阐述如何正确获取输入字段、应用Luhn算法逻辑，并通过setCustomValidity API管理自定义验证状态及错误提示，确保表单提交前所有字段的有效性，提升用户体验。
1. 理解表单验证与Luhn算法集成挑战
现代web表单通常利用html5内置的验证机制（如required、type=”email”等）来提供基础的用户输入校验。然而，对于某些特定业务逻辑的验证，例如信用卡号的luhn算法校验，需要通过javascript进行自定义实现。核心挑战在于如何将这种自定义验证逻辑无缝地融入到现有的html5验证流程中，并确保当信用卡号不符合luhn算法时，能够像其他无效字段一样，正确地显示错误提示并阻止表单提交。
Luhn算法（也称为模10算法）是一种简单的校验和算法，常用于验证各种识别号码，如信用卡号、IMEI号等。它通过特定的计算规则，判断一串数字是否可能是有效号码，但它并不能验证号码的真实性或是否存在。
2. Luhn算法的JavaScript实现
首先，我们需要一个独立的JavaScript函数来实现Luhn算法。这个函数接收一个字符串作为输入（通常是信用卡号），并返回一个布尔值，表示该号码是否通过Luhn校验。
/** * 校验给定的字符串是否符合Luhn算法规则 * @param {string} value - 待校验的字符串（通常为信用卡号） * @returns {boolean} - 如果符合Luhn算法返回true，否则返回false */function checkLuhn(value) { // 1. 移除所有非数字、非破折号、非空格字符。如果存在其他非数字字符，则直接视为无效。 if (/[^0-9-s]+/.test(value)) return false; // 2. 移除所有非数字字符，只保留数字进行Luhn算法计算 value = value.replace(/D/g, ""); let nCheck = 0; // 校验和 let bEven = false; // 标记是否为偶数位（从右往左数，第一位为奇数位） // 3. 从右向左遍历数字 for (let n = value.length - 1; n >= 0; n--) { let cDigit = value.charAt(n); let nDigit = parseInt(cDigit, 10); // 4. 偶数位数字翻倍，如果大于9则减去9 if (bEven) { if ((nDigit *= 2) > 9) { nDigit -= 9; } } // 5. 累加到校验和 nCheck += nDigit; bEven = !bEven; // 切换奇偶位标记 } // 6. 如果校验和能被10整除，则通过Luhn算法 return (nCheck % 10) === 0;}
Luhn算法原理简述：
从号码最右边一位开始，将其视为第一位（奇数位）。从右向左，每隔一位的数字乘以2（即所有偶数位的数字）。如果乘以2的结果是两位数（即大于9），则将这个两位数的两个数字相加（例如，12变成1+2=3）。将所有（未翻倍的奇数位和经过处理的偶数位）数字相加，得到一个总和。如果这个总和能被10整除，则该号码通过Luhn校验。
3. 集成Luhn算法到表单验证流程
为了将Luhn算法集成到现有表单的HTML5验证流程中，我们需要监听信用卡输入字段的input事件，并在每次输入时执行Luhn校验。关键在于使用HTMLElement.setCustomValidity()方法来控制字段的验证状态和自定义错误消息。
3.1 JavaScript核心集成逻辑
在表单初始化脚本中，添加对信用卡输入字段的事件监听：
(function () { "use strict"; // ... 现有表单验证逻辑 ... // 监听信用卡输入字段的输入事件 // 注意：这里使用了jQuery的on('input')方法 $('#cc').on('input', function() { // 1. 获取信用卡输入字段的DOM元素 // 确保这里的选择器能够准确地获取到你的input元素。 // 在本例中，HTML结构是 // 所以可以使用 document.querySelector('#cardContainer input') 或更直接的 document.getElementById('cc') const field = document.getElementById('cc'); // 或者 document.querySelector('#cardContainer input'); // 2. 执行Luhn算法校验 if (checkLuhn($('#cc').val())) { // 如果校验通过，清除自定义验证消息，使字段变为有效状态 field.setCustomValidity(""); } else { // 如果校验失败，设置自定义验证消息，使字段变为无效状态 field.setCustomValidity("Invalid field."); // 这条消息将显示在浏览器默认的错误提示中 } }); // ... 现有Luhn算法函数 checkLuhn ...})();
关键点解释：
field变量的正确获取：原代码中field变量未定义，导致setCustomValidity无法调用。必须先通过document.getElementById(‘cc’)或document.querySelector(‘#cardContainer input’)等方式获取到实际的DOM元素。setCustomValidity(“”)：当字段通过自定义校验时，必须调用setCustomValidity(“”)并传入空字符串，以清除任何先前设置的自定义错误，并使该字段被浏览器视为有效。如果传入非空字符串，字段将被视为无效，并显示该字符串作为错误消息。input事件：选择input事件而不是change事件，可以实现实时反馈，提升用户体验。
3.2 HTML结构调整
为了确保setCustomValidity设置的错误消息能够被正确地显示，并且与现有的CSS样式协同工作，我们需要确保HTML结构中包含用于显示错误消息的元素，并且CSS样式能够响应字段的验证状态。
在信用卡输入字段的HTML部分，确保包含id属性，并且有empty-feedback和invalid-feedback的div：
Please provide your credit card number.Please provide a valid credit card number.
这里为信用卡输入字段的父容器添加了id=”cardContainer”，虽然在document.getElementById(‘cc’)的情况下不是必需的，但如果你的选择器是document.querySelector(‘#cardContainer input’)，则该ID是必要的。
3.3 CSS样式
确保以下CSS样式存在，它们负责根据表单的验证状态显示或隐藏错误消息：
.invalid-feedback,.empty-feedback { display: none; /* 默认隐藏错误消息 */}/* 当表单被标记为was-validated且输入框为空时，显示empty-feedback */.was-validated :placeholder-shown:invalid ~ .empty-feedback { display: block;}/* 当表单被标记为was-validated且输入框不为空但无效时，显示invalid-feedback */.was-validated :not(:placeholder-shown):invalid ~ .invalid-feedback { display: block;}/* 无效字段的边框样式 */.is-invalid,.was-validated :invalid { border-color: #dc3545; /* 红色边框 */}
这些CSS规则利用了:invalid伪类和通用兄弟选择器（~）来根据字段的验证状态和是否为空来显示不同的错误提示。当setCustomValidity设置了错误消息时，浏览器会将该字段标记为:invalid。
4. 完整代码示例
以下是整合了Luhn算法验证的完整HTML、CSS和JavaScript代码：
HTML (index.html)
信用卡号Luhn算法表单验证 /* 自定义验证反馈样式 */ .invalid-feedback, .empty-feedback { display: none; } .was-validated :placeholder-shown:invalid ~ .empty-feedback { display: block; } .was-validated :not(:placeholder-shown):invalid ~ .invalid-feedback { display: block; } .is-invalid, .was-validated :invalid { border-color: #dc3545; }联系我们
填写以下表格发送消息。
Please provide your first name.Please provide your email address.Please provide a valid email address.Please provide your credit card number.Please provide a valid credit card number.
JavaScript (main.js)
(function () { "use strict"; /* * 表单验证初始化 */ const forms = document.querySelectorAll(".needs-validation"); const result = document.getElementById("result"); Array.prototype.slice.call(forms).forEach(function (form) { form.addEventListener( "submit", function (event) { // 在提交前再次检查所有字段的有效性 if (!form.checkValidity()) { event.preventDefault(); event.stopPropagation(); // 将焦点设置到第一个无效字段 form.querySelectorAll(":invalid")[0].focus(); } else { /* * 使用fetch()进行表单提交 */ const formData = new FormData(form); event.preventDefault(); event.stopPropagation(); const object = {}; formData.forEach((value, key) => { object[key] = value; }); const json = JSON.stringify(object); result.innerHTML = "请稍候..."; fetch("https://api.web3forms.com/submit", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json" }, body: json }) .then(async (response) => { let jsonResponse = await response.json(); if (response.status === 200) { result.innerHTML = jsonResponse.message; result.classList.remove("text-gray-500"); result.classList.add("text-green-500"); } else { console.error(response); result.innerHTML = jsonResponse.message; result.classList.remove("text-gray-500"); result.classList.add("text-red-500"); } }) .catch((error) => { console.error(error); result.innerHTML = "发生了一些错误！"; }) .then(function () { form.reset(); form.classList.remove("was-validated"); setTimeout(() => { result.style.display = "none"; }, 5000); }); } form.classList.add("was-validated"); // 标记表单为已验证，触发CSS显示错误 }, false ); }); // 信用卡输入字段的Luhn算法验证 $('#cc').on('input', function(){ // 获取信用卡输入字段的DOM元素 const field = document.getElementById('cc'); // 或者 document.querySelector('#cardContainer input'); const inputValue = $(this).val(); // 获取当前输入值 if (checkLuhn(inputValue)) { field.setCustomValidity(""); // 校验通过，清除自定义错误 } else { field.setCustomValidity("Invalid field."); // 校验失败，设置自定义错误 } }); /** * Luhn算法校验函数 * @param {string} value - 待校验的字符串 * @returns {boolean} - 如果符合Luhn算法返回true，否则返回false */ function checkLuhn(value) { // 接受只包含数字、破折号或空格的字符串 if (/[^0-9-s]+/.test(value)) return false; // 移除所有非数字字符 value = value.replace(/D/g, ""); let nCheck = 0, bEven = false; for (let n = value.length - 1; n >= 0; n--) { let cDigit = value.charAt(n); let nDigit = parseInt(cDigit, 10); if (bEven) { if ((nDigit *= 2) > 9) nDigit -= 9; } nCheck += nDigit; bEven = !bEven; } return (nCheck % 10) === 0; }})();
5. 注意事项与最佳实践
客户端验证与服务器端验证：Luhn算法在客户端的实现主要是为了提供即时用户反馈和提升用户体验。安全性要求高的场景下，服务器端必须对所有提交的数据进行再次验证，因为客户端验证可以被绕过。错误消息的清晰性与多语言支持：setCustomValidity()中的错误消息应该清晰明了，指导用户如何修正。对于国际化应用，这些消息应支持多语言。用户体验：实时验证（oninput事件）可以显著改善用户体验，让用户在输入过程中就能得到反馈，而不是等到提交时才发现错误。与其他验证的协同：当一个字段有多个验证规则时（例如，既required又需要Luhn校验），setCustomValidity会覆盖或与浏览器默认的错误消息协同。如果setCustomValidity设置了非空字符串，它将优先显示。CSS样式匹配：确保你的自定义错误消息样式（如.invalid-feedback）能够正确响应setCustomValidity触发的:invalid状态。
总结
通过将Luhn算法封装为独立的JavaScript函数，并结合HTMLElement.setCustomValidity() API，我们可以有效地将自定义验证逻辑
以上就是整合Luhn算法实现信用卡号表单验证的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1574157.html
微信扫一扫 
支付宝扫一扫 
