本文档旨在提供一个清晰的指南，说明如何使用 Luhn 算法在 HTML 表单中验证信用卡号码。通过结合 JavaScript 和 HTML5 的表单验证功能，我们将创建一个用户友好的表单，该表单可以实时检查信用卡号码的有效性，并在号码无效时提供反馈。本文档包含完整的代码示例，以及对代码的详细解释，帮助开发者轻松地将此功能集成到自己的项目中。
Luhn 算法，也称为模 10 算法，是一种简单的校验和公式，用于验证各种识别号码，如信用卡号码、IMEI 号码等。该算法可以检测出常见的输入错误，例如单个数字的错误输入或相邻数字的换位。
以下步骤将指导您完成使用 Luhn 算法验证信用卡号码的整个过程：
首先，我们需要创建一个包含信用卡号码输入字段的 HTML 表单。重要的是，该字段应具有唯一的 ID，以便我们可以使用 JavaScript 访问它。同时，添加必要的反馈元素，以便在验证失败时向用户显示错误消息。
<div id="cardContainer" class="w-full md:w-1/2">
<label for="email" class="block mb-2 text-sm text-gray-600 dark:text-gray-400">Credit Card Number</label>
<input type="text" id="cc" type="text"
placeholder="XXXX XXXX XXXX XXXX" required class="w-full px-3 py-2 placeholder-gray-300 border-2 border-gray-200 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300" />
<div class="empty-feedback text-red-400 text-sm mt-1">
Please provide your credit card number.
</div>
<div class="invalid-feedback text-red-400 text-sm mt-1">
Please provide a valid credit card number.
</div>
</div>a. 获取输入字段:
使用 document.querySelector() 方法获取信用卡号码输入字段的引用。
b. 绑定输入事件:
使用 $('#cc').on('input', function(){ ... }); 监听输入字段的 input 事件。每次用户在输入字段中输入内容时，都会触发此事件。
c. Luhn 算法验证:
在事件处理程序中，调用 checkLuhn() 函数来验证信用卡号码。
d. 设置自定义有效性:
根据 checkLuhn() 函数的结果，使用 field.setCustomValidity() 方法设置输入字段的自定义有效性。如果号码有效，则将自定义有效性设置为空字符串（""），否则设置为错误消息（例如 "Invalid field."）。
$('#cc').on('input', function(){
const field = document.querySelector('#cardContainer input')
if (checkLuhn($('#cc').val())) {
field.setCustomValidity("");
} else {
field.setCustomValidity("Invalid field.");
}
});
function checkLuhn(value) {
// accept only digits, dashes or spaces
if (/[^0-9-\s]+/.test(value)) return false;
// The Luhn Algorithm. It's so pretty.
var nCheck = 0, nDigit = 0, bEven = false;
value = value.replace(/\D/g, "");
for (var n = value.length - 1; n >= 0; n--) {
var cDigit = value.charAt(n),
nDigit = parseInt(cDigit, 10);
if (bEven) {
if ((nDigit *= 2) > 9) nDigit -= 9;
}
nCheck += nDigit;
bEven = !bEven;
}
return (nCheck % 10) == 0;
}使用 CSS 样式来显示或隐藏错误消息，并根据验证结果更改输入字段的边框颜色。
.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;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--
=======================================================================
This is a working contact form. To receive email,
Replace YOUR_ACCESS_KEY_HERE with your actual Access Key.
Create Access Key here ? https://web3forms.com/
=======================================================================
-->
<div class="flex items-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="container mx-auto">
<div class="max-w-xl mx-auto my-10 bg-white p-5 rounded-md shadow-sm">
<div class="text-center">
<h1 class="my-3 text-3xl font-semibold text-gray-700 dark:text-gray-200">
Contact Us
</h1>
<p class="text-gray-400 dark:text-gray-400">
Fill up the form below to send us a message.
</p>
</div>
<div class="m-7">
<form action="https://api.web3forms.com/submit" method="POST" id="form" class="needs-validation" novalidate>
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" />
<input type="hidden" name="subject" value="New Submission from Web3Forms" />
<input type="checkbox" name="botcheck" id="" style="display: none;" />
<div class="flex mb-6 space-x-4">
<div class="w-full md:w-1/2">
<label for="fname" class="block mb-2 text-sm text-gray-600 dark:text-gray-400">First Name</label>
<input type="text" name="name" id="first_name" placeholder="John" required class="w-full px-3 py-2 placeholder-gray-300 border-2 border-gray-200 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300" />
<div class="empty-feedback invalid-feedback text-red-400 text-sm mt-1">
Please provide your first name.
</div>
</div>
</div>
<div class="flex mb-6 space-x-4">
<div class="w-full md:w-1/2">
<label for="email" class="block mb-2 text-sm text-gray-600 dark:text-gray-400">Email Address</label>
<input type="email" name="email" id="email" placeholder="<a class="__cf_email__" data-cfemail="31485e4471525e5c41505f481f525e5c" href="/cdn-cgi/l/email-protection">[email protected]</a>" required class="w-full px-3 py-2 placeholder-gray-300 border-2 border-gray-200 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300" />
<div class="empty-feedback text-red-400 text-sm mt-1">
Please provide your email address.
</div>
<div class="invalid-feedback text-red-400 text-sm mt-1">
Please provide a valid email address.
</div>
</div>
</div>
<div class="flex mb-6 space-x-4">
<div id="cardContainer" class="w-full md:w-1/2">
<label for="email" class="block mb-2 text-sm text-gray-600 dark:text-gray-400">Credit Card Number</label>
<input type="text" id="cc" type="text"
placeholder="XXXX XXXX XXXX XXXX" required class="w-full px-3 py-2 placeholder-gray-300 border-2 border-gray-200 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300" />
<div class="empty-feedback text-red-400 text-sm mt-1">
Please provide your credit card number.
</div>
<div class="invalid-feedback text-red-400 text-sm mt-1">
Please provide a valid credit card number.
</div>
</div>
</div>
<div class="mb-6">
<button type="submit" class="w-full px-3 py-4 text-white bg-indigo-500 rounded-md focus:bg-indigo-600 focus:outline-none">
Send Message
</button>
</div>
<p class="text-base text-center text-gray-400" id="result"></p>
</form>
</div>
</div>
</div>
</div>(function () {
"use strict";
/*
* Form Validation
*/
// Fetch all the forms we want to apply custom validation styles to
const forms = document.querySelectorAll(".needs-validation");
const result = document.getElementById("result");
// Loop over them and prevent submission
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 {
/*
* Form Submission using 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 = "Please wait...";
fetch("https://api.web3forms.com/submit", {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json"
},
body: json
})
.then(async (response) => {
let json = await response.json();
if (response.status == 200) {
result.innerHTML = json.message;
result.classList.remove("text-gray-500");
result.classList.add("text-green-500");
} else {
console.log(response);
result.innerHTML = json.message;
result.classList.remove("text-gray-500");
result.classList.add("text-red-500");
}
})
.catch((error) => {
console.log(error);
result.innerHTML = "Something went wrong!";
})
.then(function () {
form.reset();
form.classList.remove("was-validated");
setTimeout(() => {
result.style.display = "none";
}, 5000);
});
}
form.classList.add("was-validated");
},
false
);
});
})();
$('#cc').on('input', function(){
const field = document.querySelector('#cardContainer input')
if (checkLuhn($('#cc').val())) {
field.setCustomValidity("");
} else {
field.setCustomValidity("Invalid field.");
}
});
function checkLuhn(value) {
// accept only digits, dashes or spaces
if (/[^0-9-\s]+/.test(value)) return false;
// The Luhn Algorithm. It's so pretty.
var nCheck = 0, nDigit = 0, bEven = false;
value = value.replace(/\D/g, "");
for (var n = value.length - 1; n >= 0; n--) {
var cDigit = value.charAt(n),
nDigit = parseInt(cDigit, 10);
if (bEven) {
if ((nDigit *= 2) > 9) nDigit -= 9;
}
nCheck += nDigit;
bEven = !bEven;
}
return (nCheck % 10) == 0;
}.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;
}通过结合 HTML 表单、JavaScript 和 Luhn 算法，我们可以创建一个用户友好的表单，该表单可以实时验证信用卡号码的有效性。这可以帮助减少输入错误，并提高用户体验。请记住，客户端验证只是安全措施的一部分，您仍然需要在服务器端执行验证。
以上就是使用 Luhn 算法在表单中验证信用卡号码的详细内容，更多请关注php中文网其它相关文章！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
522
收藏
