[英]Javascript validation in mulitstep form
我有一个多步骤表单需要对密码、电子邮件、信用卡到期日期进行额外验证。 由于有一个函数 validateForm 我想添加到它,以便它也检查密码是否有 8 个字符并且电子邮件是否有效('@')。
主要问题是 for 循环在允许用户进入表单的下一步之前表示输入有效/无效。 目前它只是检查每个框中是否有任何东西,如果有,它会转到下一页。 我还需要它来检查密码/电子邮件是否按照上述要求有效。
var currentTab = 0;
showTab(currentTab);
function showTab(n) { /*need to add in password/email validation to below but unsure how */
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Complete Order";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
fixStepIndicator(n)
}
function nextPrev(n) {
var x = document.getElementsByClassName("tab");
if (n == 1 && !validateForm()) return false;
x[currentTab].style.display = "none";
currentTab = currentTab + n;
if (currentTab >= x.length) {
document.getElementById("orderForm").submit();
return false;
}
showTab(currentTab);
}
function validateForm() {
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
for (i = 0; i < y.length; i++) {
if (y[i].value == "") {
y[i].className += "invalid";
valid = false;
}
}
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid;
}
假设您可以编辑 HTML 元素并将 id 添加到输入字段,您可以简单地使用document.getElementById
来获取每个特定的输入。
<html>
<body>
<input type="password" id="myPassword" />
<input type="email" id="myEmail" />
</body>
</html>
function validateForm() {
const pwInput = document.getElementById('myPassword');
if( pwInput && pwInput.value.length < 5) {
console.log('password not valid');
}
const emailInput = document.getElementById('myEmail');
if(emailInput && emailInput.search(/@/) === -1) {
console.log('email not valid');
}
}
这听起来像是家庭作业,所以这是生产代码的一些额外思考。
虽然在客户端进行密码验证是可以的,但服务器端绝对必须进行密码验证。
电子邮件验证非常棘手。 您可以使用您找到的正则表达式,但即使是 Stack Overflow 上的正则表达式也充满了不起作用的警告和测试用例。 对于生产代码,使用库和电子邮件验证是最好的选择。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.