多步形式的 Javascript 验证答案

【问题标题】：Javascript validation in mulitstep form多步形式的 Javascript 验证
【发布时间】：2021-10-14 04:12:59
【问题描述】：

我有一个多步骤表单，需要对密码、电子邮件、信用卡到期日期进行额外验证。由于有一个函数 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;
}

标签： javascript forms validation multi-step

【解决方案1】：

假设您可以编辑 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 上的那些也充满了无效的警告和测试用例。对于生产代码，最好使用库和电子邮件验证。

【讨论】：