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

时间:2019-07-30 10:31:46

标签: javascript

对于我的家庭作业,我需要做的一件事情就是创建一个表格来填写信用卡详细信息并进行验证检查。为了简单起见,我将验证数字(信用卡号和CVV)是否为整数以及它们是否在certian范围内(以检查已输入的位数),因此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

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

3 个答案:

答案 0 :(得分:3)

这是因为您使用的是表单标签。当您按提交或按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();

    }
    }

答案 1 :(得分:2)

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

请参见this

答案 2 :(得分:0)

我决定检查一下我同学的工作,然后“借用”一些代码。 (不用担心,这很好,他也可以接受)。这是代码:

对于信用卡号:

 <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);