如何使用 JavaScript 对文本输入执行验证检查？

Question

对于我的家庭作业，我需要做的一件事是创建一个表格来填写信用卡详细信息并对其进行验证检查。为简单起见，我将验证数字（信用卡号和 CVV）是否为整数以及它们是否在特定范围内（以检查已输入的位数。所以 CVV 不应该小于 100 不大于 999）。

编辑：这是我的 html 代码：

<form name="payment" action="thankyou.php" onsubmit="validation();" method="POST">
<--inputs here-->
<button type="submit" class="btn">Continue to checkout</button>
</form>

validation(){
var num=document.getElementByID("ccnum"); //num and ccnum are the credit card numbers
var safenum=document.getElementByID("cvv"); //cvv and safenum are the safety numbers

if (!(Number.isInteger(num)) || (num>9999999999999999) || (num<1000000000000000)){
     window.alert("Invalid credit card number.")
} //detect whether the credit card number is an integer, larger than 9999999999999999, smaller than 1000000000000000 or not
else if (!(Number.isInteger(safenum)) || (safenum>1000) || (safenum<100)){
     window.alert("Invalid credit card safety number.")
} //detect whether the safety number is an integer, larger than 999, smaller than 100 or not
else {
    window.open("thankyou.php")
} //the inputs are valid and the user is sent to another web page

当我单击运行function() 的表单的submit 按钮时，它只是重新加载页面，而不是显示任何警报消息或重定向到thankyou.php。知道如何重写我的代码吗？

Answer 1

这是因为您使用了表单标签。当您按提交或按 ENTER 时将提交您的表格。只需在表单标签中插入此代码即可。

如果您的 HTML 是这种格式，

<form action="thankyou.php" method="POST" 
         onsubmit="event.preventDefault(); validation();" id="myForm">
        <button type="submit" class="btn">Continue to checkout</button>
    </form>

然后将这一行添加到您的表单标签中。

 <form action="thankyou.php" method="POST" onsubmit="event.preventDefault(); validation();" id="myForm">

并将您的验证功能更改为此。

function validation(){
    var num=document.getElementByID("ccnum"); //num and ccnum are the 
    credit card numbers
var safenum=document.getElementByID("cvv"); //cvv and safenum are the 
    safety numbers

    if (!(Number.isInteger(num)) || (num>9999999999999999) || (num<1000000000000000)){
         window.alert("Invalid credit card number.")
    } //detect whether the credit card number is an integer, larger than 9999999999999999, smaller than 1000000000000000 or not
    else if (!(Number.isInteger(safenum)) || (safenum>1000) || (safenum<100)){
         window.alert("Invalid credit card safety number.")
    } //detect whether the safety number is an integer, larger than 999, smaller than 100 or not
    else {
        myForm.submit();

    }
    }

Answer 2

您必须阻止表单提交或在提交/点击时执行验证。

见this。

Answer 3

我决定查看我同学的工作，并“借用”一些代码。 （别担心，这完全没问题，他可以接受）。代码如下：

信用卡号：

 <input type="text" id="ccnum" name="ccnum" required oninput="return a()">

对于 CVV：

<input type="text" id="cvv" name="cvv" required maxlength="4" minlength="3">

这是 JavaScript 代码，它使用 Luhn 算法验证信用卡号。只有通过在线输入信用卡号码生成器的号码才有效：

function a(){
var b= document.getElementById("ccnum").value;
if (check(b)){
   document.getElementById("ccnum").style.border = "1px solid black";
   document.getElementById("ccnum").setCustomValidity("");
    return true;
}
else {
    document.getElementById("ccnum").style.border = "2px dashed red";
    document.getElementById("ccnum").setCustomValidity("Please enter a valid credit card number.");
    return false;
}
}
function check(ccnum) {

    var sum     = 0,
        alt     = false,
        i       = ccnum.length-1,
        num;
    if (ccnum.length < 13 || ccnum.length > 19){
        return false;
    }
    while (i >= 0){
        num = parseInt(ccnum.charAt(i), 10);
        if (isNaN(num)){
            return false;
        }
        if (alt) {
            num *= 2;
            if (num > 9){
                num = (num % 10) + 1;
            }
        } 
        alt = !alt;
        sum += num;
        i--;
    }
    return (sum % 10 == 0);