如何使用 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

您必須阻止表單提交或在提交/單擊時執行驗證。

看到這個。

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