如何在JavaScript中检查所有input输入是否合法并添加错误样式

原代码问题根源 #

• 采用else if分支结构，只要前一个字段校验不通过，后续字段的校验逻辑直接跳过
• 每个错误分支都添加了return false语句，触发第一个错误后函数直接终止运行，不会处理后续字段
• 变量取值逻辑错误：提前将firstName/lastName等变量赋值为输入框的value值，后续判断又调用firstName.value属于无效取值，永远为undefined
• 定义的formPets遍历循环没有实际作用，属于冗余代码
• 年龄字段的校验规则存在逻辑错误：原规则age.length > 0会导致只要填了年龄就判定为不合法

修正后代码 #

JavaScript 逻辑 #

function inputCount() {
    // 先清除所有输入框之前的错误标记
    document.querySelectorAll('input').forEach(item => item.classList.remove('false'))
    let hasError = false

    // 逐个校验字段，不要用else if，也不要提前return
    const firstNameEl = document.getElementById("firstname")
    const firstName = firstNameEl.value
    if(firstName == "" || !isNaN(firstName) || firstName.length > 50) {
        firstNameEl.classList.add("false")
        hasError = true
    }

    const lastNameEl = document.getElementById("lastname")
    const lastName = lastNameEl.value
    if (lastName == "" || !isNaN(lastName) || lastName.length > 50) {
        lastNameEl.classList.add("false")
        hasError = true
    }

    const ageEl = document.getElementById("age")
    const age = ageEl.value
    // 示例规则：年龄不能为空、必须是数字、且要大于0，可按需调整
    if (age == "" || isNaN(age) || Number(age) <= 0) {
        ageEl.classList.add("false")
        hasError = true
    }

    const emailEl = document.getElementById("email")
    const email = emailEl.value
    // 补充了基础邮箱正则校验，可按需调整规则
    if (email == "" || email.length > 50 || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        emailEl.classList.add("false")
        hasError = true
    }

    // 最后统一提示
    if(hasError) {
        alert("存在填写不合法的字段，请检查红色边框的输入项")
        return false
    } else {
        alert("OK")
        // 此处可添加表单提交逻辑
        return true
    }
}

CSS 样式（简化优化） #

/* 通用规则即可覆盖所有输入框的错误样式，无需重复写ID选择器 */
input.false {
    border-color: red !important;
}

HTML 结构（无需修改） #

<input type="text" name="firstname" id="firstname">Firstname<br>
<input type="text" name="lastname" id="lastname"> Lastname<br>
<input type="text" name="age" id="age"> Age<br>
<input type="text" name="email" id="email"> Email<br>
<button type="submit" onclick="inputCount()">Submit</button>

核心优化说明 #

1. 校验前先清空所有输入框的错误类，避免上一次校验的错误标记残留
2. 每个字段独立做if判断，不用else if分支，所有字段都会走完校验逻辑
3. 用hasError变量统一记录是否存在错误，校验完全部字段后再统一返回结果，不会提前终止函数
4. 简化CSS错误样式规则，用通用选择器替代重复的ID选择器
5. 修正了年龄、邮箱的校验规则逻辑错误，也可以根据业务需求自行调整校验规则

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