为什么我的信用卡验证不起作用？

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

Working DEMO：https://jsfiddle.net/nmvk9ks7/1/

希望这有助于！