为什么我的信用卡验证不起作用?
Why isn't my credit card validation working?
我正在给表单添加一个信用卡验证。
如果用户点击注册按钮,有一个无效的信用卡号码,那么将有一个错误标记,标签将变成红色。
它还确保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>
似乎您正在试图获得文本输入对象而不是其值。您需要将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/
希望这对你有帮助!
相关文章:
- 为什么此验证代码不起作用
- Jquery的表单验证不起作用
- Javascript文本框验证不起作用
- javascript验证和ajax调用同时不起作用
- 外部JavaScript验证不起作用
- Asp自定义验证器在IE-11中不起作用
- javascript文本验证不起作用.警报消息没有't显示
- 我的角度形式输入[数字]验证不起作用
- 回发前所需的字段验证程序不起作用
- Javascript电子邮件验证不起作用
- 基本node.js express身份验证不起作用
- 使用 Ajax 调用进行验证不起作用
- 在键上验证正在工作,但在按键时它不起作用
- 使用 Google OAuth 2.0 进行客户端身份验证不起作用
- 表单验证在 HTML 中工作的 Visualforce 中不起作用
- 提交时 JavaScript 验证不起作用
- 表单验证不起作用,并阻止表单提交
- Jquery 引导程序验证 asp.net 母版页不起作用
- Struts2 Ajax 验证不起作用
- jQuery .valid() 不起作用?(验证插件)