多步形式的Javascript验证

Question

I have a multistep form needs additional validation for password, email, credit card expiry date.我有一个多步骤表单需要对密码、电子邮件、信用卡到期日期进行额外验证。 As there is a function validateForm I want to add to this so that it also checks the password has 8 char and email is valid ('@').由于有一个函数 validateForm 我想添加到它，以便它也检查密码是否有 8 个字符并且电子邮件是否有效（'@'）。

The main issue is the for loop that says input is valid/invalid before allowing user to go to next step in form.主要问题是 for 循环在允许用户进入表单的下一步之前表示输入有效/无效。 At the moment it just checks if there is anything in each box, if so it goes next page.目前它只是检查每个框中是否有任何东西，如果有，它会转到下一页。 I need it to also check that the password/email is valid as per above requests.我还需要它来检查密码/电子邮件是否按照上述要求有效。

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

Answer 1

Assuming you can edit the HTML elements and add id's to the input fields, you can simply use document.getElementById to get each specific input.假设您可以编辑 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');
  }
}

This sounds like homework, so this is some additional food for thought for production code.这听起来像是家庭作业，所以这是生产代码的一些额外思考。

While doing password validation on the client side is okay, server side must absolutely do password validation.虽然在客户端进行密码验证是可以的，但服务器端绝对必须进行密码验证。
Email validation is very tricky to do.电子邮件验证非常棘手。 You can use a regex you find, but even the ones on Stack Overflow are filled with caveats and test cases that don't work.您可以使用您找到的正则表达式，但即使是 Stack Overflow 上的正则表达式也充满了不起作用的警告和测试用例。 For production code, using a library along with email verification is your best bet.对于生产代码，使用库和电子邮件验证是最好的选择。

多步形式的Javascript验证

问题描述

1 个解决方案

解决方案1
1 2021-10-14 16:42:39

多步形式的Javascript验证

问题描述

1 个解决方案

解决方案1 1 2021-10-14 16:42:39

解决方案1
1 2021-10-14 16:42:39