63. 表单校验与约束验证

本节目标：学会用 HTML5 内置校验机制，在数据提交前拦截无效输入。

以前做表单校验，得写一堆 JavaScript。现在 HTML5 自带了校验能力。

required：必填项

<input type="text" name="username" required>

提交时如果这个字段为空，浏览器会弹出提示并阻止提交。

<input type="email" name="email" required>

email 类型 + required：既要填，又得是邮箱格式。

min 和 max：范围限制

<input type="number" name="age" min="1" max="150">
<input type="date" name="booking" min="2026-01-01" max="2026-12-31">

超出范围时提交会被阻止。

minlength 和 maxlength：长度限制

<input type="text" name="nickname" minlength="2" maxlength="20">
<textarea name="intro" minlength="10" maxlength="500"></textarea>

pattern：正则校验

pattern 接受正则表达式，提交时按此规则校验。

<input type="text" name="phone" pattern="1[3-9]\d{9}"
       title="请输入有效的11位手机号">

校验失败时，浏览器显示 title 里的提示信息。

常见 pattern 示例：

<!-- 三位字母 -->
<input pattern="[A-Za-z]{3}" title="三个字母">

<!-- 邮编（6位数字） -->
<input pattern="\d{6}" title="6位数字邮编">

<!-- 用户名（字母数字下划线，4-16位） -->
<input pattern="[a-zA-Z0-9_]{4,16}" title="4-16位字母、数字或下划线">

Tip

属性的内容会作为校验失败的提示文案。写好它能大幅提升用户体验。

step：数字步进

<input type="number" name="price" step="0.01">

step="0.01" 意味着精确到小数点后两位。用户输入 3.14 合法，3.141 不合法。

伪类选择器：样式反馈

CSS 提供了校验状态伪类：

input:valid {
  border-color: green;
}
input:invalid {
  border-color: red;
}
input:required {
  background-color: #fff8e1;
}
input:optional {
  background-color: white;
}

用户输入时实时看到颜色反馈，不用等到提交才知道填错了。

output：表单输出结果

<output> 用来显示表单计算结果，比如求和、计数等。

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" name="a" value="0"> +
  <input type="number" name="b" value="0"> =
  <output name="result">0</output>
</form>

用户改变数值时，和自动更新。oninput 是表单级事件，任何输入框变化都会触发。

output 是纯显示元素。它的值可以被 JS 设置，但用户不能直接编辑。

Constraint Validation API

用 JavaScript 可以更灵活地控制校验。

const input = document.getElementById('email');

// 检查是否通过校验
if (input.validity.valid) {
  console.log('校验通过');
} else {
  console.log(input.validationMessage); // 浏览器给出的错误原因
}

validity 对象包含各种校验状态：

input.validity.valueMissing    // 必填项为空
input.validity.typeMismatch    // 类型不匹配（如邮箱格式错）
input.validity.patternMismatch // 正则不匹配
input.validity.rangeOverflow   // 超过最大值
input.validity.rangeUnderflow  // 低于最小值

自定义错误消息

const input = document.getElementById('phone');

input.addEventListener('invalid', () => {
  if (input.validity.patternMismatch) {
    input.setCustomValidity('请输入正确的手机号格式');
  } else {
    input.setCustomValidity('');
  }
});

Note

清空自定义错误，恢复默认校验。这步不能忘。

novalidate：关闭校验

如果想用 JavaScript 完全接管校验，可以关闭浏览器默认校验：

<form novalidate>
  <!-- 表单内容 -->
</form>

然后自己写校验逻辑并调用 requestSubmit() 提交。

前端校验是用户体验优化，不是安全措施。服务器端必须再次校验。

完整示例

<form>
  <p>
    <label for="user">用户名：</label><br>
    <input type="text" id="user" name="user"
           required minlength="4" maxlength="16"
           pattern="[a-zA-Z0-9_]+">
  </p>
  <p>
    <label for="mail">邮箱：</label><br>
    <input type="email" id="mail" name="mail" required>
  </p>
  <p>
    <label for="pwd">密码：</label><br>
    <input type="password" id="pwd" name="pwd"
           required minlength="8"
           title="至少8位，包含字母和数字">
  </p>
  <p>
    <button type="submit">注册</button>
  </p>
</form>

现代浏览器普遍支持这些校验属性。写上它们，省下大量 JavaScript 代码。