為什么我的信用卡驗證無效？

Question

我正在向表單添加信用卡驗證。

如果用戶單擊注冊按鈕，但沒有有效的信用卡號，則將標記錯誤，標簽將變為紅色。

它還確保CVV字段和郵政編碼字段不為空。

現在，如果我在字段為空的情況下單擊按鈕，則會收到所需的錯誤。

如果然后我填寫郵政編碼和CSV，然后再次單擊注冊，則錯誤將被消除。

但是，什么也不會刪除CC號標志。

為什么會這樣，我該如何解決？

代碼如下，謝謝：

// Form validation. Display error messages and don't let the user submit the form if any of these validation errors exist:
document.querySelector("button").addEventListener("click", function(e) {

    //check there's a valid credit card number
    var ccNum = document.getElementById("cc-num");
    var ccNumLbl = document.getElementById("cc-numLbl");


// takes the form field value and returns true on valid number
//algorithm found here: https://gist.github.com/DiegoSalazar/4075533
function valid_credit_card(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;
}


    if(!valid_credit_card(ccNum.input)) {
        ccNumLbl.style.color = "red";
        e.preventDefault();
    } else {
        ccNumLbl.style.color = "black";
    }

    //check there's a zip code
    var zip = document.getElementById("zip");
    var zipLbl = document.getElementById("zipLbl");
    if(zip.value.length === 0) {
        zipLbl.style.color = "red";
        e.preventDefault();

    } else {
        zipLbl.style.color = "black";
    }

    //check there's a cvv
    var cvv = document.getElementById("cvv");
    var cvvLbl = document.getElementById("cvvLbl");
    if(cvv.value.length === 0) {
        cvvLbl.style.color = "red";
        e.preventDefault();

    } else {
        cvvLbl.style.color = "black";
    }

});

和html：

<div id="credit-card" class="credit-card">

  <div class="col-6 col">
    <label id="cc-numLbl" for="cc-num">Card Number:</label>
    <input id="cc-num" name="user_cc-num" type="text">
  </div>

  <div class="col-3 col">
    <label for="zip" id="zipLbl">Zip Code:</label>
    <input id="zip" name="user_zip" type="text"> 
  </div>

  <div class="col-3 col">
    <label id="cvvLbl" for="cvv">CVV:</label>
    <input id="cvv" name="user_cvv" type="text"> 
  </div>

  <label>Expiration Date:</label>
  <select id="exp-month" name="user_exp-month">
    <option value="1">1 - January</option>
    <option value="2">2 - February</option>
    <option value="3">3 - March</option>
    <option value="4">4 - April</option>
    <option value="5">5 - May</option>
    <option value="6">6 - June</option>
    <option value="7">7 - July</option>
    <option value="8">8 - August</option>
    <option value="9">9 - September</option>
    <option value="10">10 - October</option>
    <option value="11">11 - November</option> 
    <option value="12">12 - December</option>                       
  </select>  
  <select id="exp-year" name="user_exp-year">
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>                      
  </select>                                
</div>

<button type="submit">Register</button> 

Answer 1

似乎您正在嘗試獲取文本輸入對象而不是其值。 您需要將ccNum變量分配更改為

var ccNum = document.getElementById('cc-num').value;

同樣， querySelector函數在您的代碼中失敗了，為此我將<input type="button"...>聲明為（向其添加了類屬性），

<input type="button" class="button" id="myBtn" value="Validate" />

並將document.querySelector(...)函數更改為

document.querySelector(".button").addEventListener("click", function(e) {

工作演示 ： https : //jsfiddle.net/nmvk9ks7/1/

希望這可以幫助！