多步表单JavaScript验证：如何为validateForm新增密码、邮箱校验规则

前置准备 #

先给表单内对应输入框添加标识属性（通过name区分校验类型），示例如下：

<!-- 密码输入框 -->
<input type="password" name="password">
<!-- 邮箱输入框 -->
<input type="email" name="email">
<!-- 信用卡有效期输入框，要求格式为MM/YY -->
<input type="text" name="cardExpiry" placeholder="MM/YY">

核心修改：重写validateForm函数 #

在原有非空校验的基础上，新增对应字段的规则校验，修改后完整代码如下：

function validateForm() {
    var x, y, i, valid = true;
    x = document.getElementsByClassName("tab");
    y = x[currentTab].getElementsByTagName("input");
    // 清空之前的invalid标记，避免重复添加类名导致样式异常
    for (i = 0; i < y.length; i++) {
        y[i].classList.remove("invalid");
    }
    for (i = 0; i < y.length; i++) {
        // 原有非空校验
        if (y[i].value.trim() == "") {
            y[i].classList.add("invalid");
            valid = false;
            continue;
        }
        // 新增密码校验：长度不小于8位
        if (y[i].name === "password" && y[i].value.length < 8) {
            y[i].classList.add("invalid");
            valid = false;
        }
        // 新增邮箱校验：包含@且基础格式合法
        if (y[i].name === "email" && !/^\S+@\S+\.\S+$/.test(y[i].value.trim())) {
            y[i].classList.add("invalid");
            valid = false;
        }
        // 新增信用卡有效期校验：格式为MM/YY，月份范围01-12
        if (y[i].name === "cardExpiry" && !/^(0[1-9]|1[0-2])\/\d{2}$/.test(y[i].value.trim())) {
            y[i].classList.add("invalid");
            valid = false;
        }
    }
    if (valid) {
        document.getElementsByClassName("step")[currentTab].classList.add("finish");
    }
    return valid;
}

补充说明 #

• 上述代码用classList.add/classList.remove替换了原有的字符串拼接类名的方式，避免重复添加invalid类名的问题
• 邮箱和有效期用了正则做基础格式校验，如果有更严格的校验需求可以自行调整正则规则
• 如果你的输入框是用id或者type区分，只要把判断条件里的y[i].name改成对应的y[i].id或者y[i].type即可

内容的提问来源于stack exchange，提问作者Aimee Pemberton