深入剖析HTML表单客户端校验原理-html教程-PHP中文网

浏览器校验应依赖 validity api 而非 :invalid 伪类或 class；pattern 自动锚定，勿加 ^$；setcustomvalidity() 有粘性，须每次先清空再设；input/blur/submit 需分层处理校验逻辑。

深入剖析html表单客户端校验原理

浏览器内置校验靠的是 validity API，不是 CSS 伪类

很多开发者误以为 :invalid 伪类的样式变化就代表校验失败，其实它只是反映浏览器渲染状态，和实际验证结果不完全同步。真正可靠的判断依据是 DOM 元素的 validity 对象——它是一个只读的 ValidityState 实例，包含 valueMissing、typeMismatch、patternMismatch 等布尔属性。

常见误区：

用 element.classList.contains('invalid') 判断是否出错 → 错，class 可能未更新或被手动修改
只监听 invalid 事件 → 错，该事件只在浏览器内部触发校验失败时抛出，不覆盖所有场景（比如手动调用 setCustomValidity() 后不会再次触发）
依赖 reportValidity() 的返回值做逻辑分支 → 错，它只返回布尔值且会强制弹出气泡，不适合静默校验

正确做法是：在需要判断时，直接读取 input.validity.valid；若为 false，再查具体哪一项为 true 来定位原因。

pattern 属性默认全匹配，正则里别加 ^ 和 $

pattern 的行为是隐式锚定的：浏览器自动在你写的正则前后加上 ^ 和 $，所以 pattern="[a-z]{2,}" 实际等价于 /^[a-z]{2,}$/。手动加锚点不仅多余，还可能因转义问题导致匹配异常。

容易踩的坑：

写成 pattern="^[a-z]{2,}$" → 在部分浏览器中可能解析失败或行为不一致
忽略 title 属性 → pattern 失败时，浏览器默认气泡提示为空，用户看不到错误原因
用 pattern 验证中文姓名 → 不推荐，正则难覆盖生僻字、空格、中英文混合等真实场景，更适合用 JS + 自定义逻辑

示例：<input type="text" pattern="[0-9]{6}" title="请输入6位数字"> —— 输入 "12345" 或 "1234567" 都会失败，且气泡显示 "请输入6位数字"。

setCustomValidity() 有“粘性”，不手动清空就永远失败

setCustomValidity() 是唯一能注入自定义错误信息的方法，但它一旦设为非空字符串，该字段就永久进入“无效”状态，哪怕用户已输入合法内容，input.validity.valid 仍为 false。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

必须配合的步骤：

每次输入变动（如 input 或 blur 事件）时，先调用 input.setCustomValidity('') 清空旧状态
再根据业务逻辑判断是否要重新设置错误信息
不要只在 submit 时才调用 —— 那样用户得不到实时反馈

典型错误写法：

input.addEventListener('input', () => {
  if (!isValidEmail(input.value)) {
    input.setCustomValidity('邮箱格式不对');
  }
  // ❌ 缺少 else 分支：合法输入时没清空，错误一直挂着
});

正确写法：

input.addEventListener('input', () => {
  input.setCustomValidity(''); // 先清空
  if (!isValidEmail(input.value)) {
    input.setCustomValidity('邮箱格式不对');
  }
});