JavaScript表单验证：从基础校验到API应用详解

表单验证的基础实现

前端表单验证的核心目的是在数据发送至服务器之前，确保用户输入符合规范。最传统且通用的方式是监听表单的 submit 事件，在提交瞬间通过 JavaScript 阻断非法数据。

第1步：定义校验函数

校验函数需获取表单元素值，判断其是否符合要求，并通过返回 false 来阻止默认提交行为。

function validateForm() {
    // 通过表单name或ID获取元素
    var form = document.forms["myForm"];
    var fname = form["fname"].value;
    
    if (fname == null || fname == "") {
        alert("姓名不能为空");
        return false; // 阻止表单提交
    }
    return true; // 允许提交
}

第2步：绑定表单提交事件

在 HTML 的 form 标签中，通过 onsubmit 属性调用上述函数。注意必须返回函数的执行结果，以便浏览器根据返回值决定是否继续提交。

<form name="myForm" action="/demo" method="post" onsubmit="return validateForm()>
    <input type="text" name="fname" placeholder="请输入姓名">
    <input type="submit" value="提交">
</form>

HTML5原生验证与局限性

现代浏览器支持HTML5的约束验证（Constraint Validation），可通过 required 等属性实现基础的非空检查，无需编写JS代码。

<form action="/demo" method="post">
    <input type="email" name="email" required placeholder="请输入邮箱">
    <button type="submit">提交</button>
</form>

注意： 原生的浏览器提示样式较难定制，且仅适用于最简单的非空或格式匹配场景。若需自定义错误文案或复杂逻辑，仍需借助 JavaScript API。

Constraint Validation API 进阶应用

为了获得更好的用户体验，推荐使用 DOM 提供的验证 API，它们能让我们精确控制何时显示错误信息以及如何显示。

第3步：使用 checkValidity() 快速检测

checkValidity() 方法直接判断当前输入框的值是否满足所有约束条件（如required、min、pattern等）。返回布尔值。

var input = document.getElementById("age");
if (!input.checkValidity()) {
    // 不合法，可在此处显示自定义错误容器
    console.log(input.validationMessage);
}

第4步：深入 Validity 状态分析

每个受检元素都有一个 validity 对象，包含多个布尔属性，指示具体的错误类型（如 valueMissing, typeMismatch, tooLong 等）。这使得我们可以针对不同错误类型输出不同提示。

第5步：设置自定义错误提示 setCustomValidity()

当需要结合业务逻辑校验时（例如“两个密码必须一致”），可使用 setCustomValidity() 设置自定义错误消息。此时，该字段的 checkValidity() 将始终返回 false，直到清除自定义错误。

var password1 = document.getElementById("pwd1");
var password2 = document.getElementById("pwd2");

password2.onkeyup = function () {
    if (this.value !== password1.value) {
        this.setCustomValidity("两次输入的密码不一致");
    } else {
        // 重要：清空自定义错误，否则浏览器认为它永远无效
        this.setCustomValidity("");
    }
};

自动化批量验证实践

对于大型表单，逐个编写校验逻辑效率低下。可以通过遍历所有带有 pattern 属性的文本框，自动绑定 onchange 事件进行正则匹配校验，并在提交时汇总错误项。这种方式兼顾了灵活性（利用HTML属性声明规则）和自动化（统一处理流程）。