无需登录 数据私有 本地保存

表单验证规则测试 - Constraint API

11
0
0
0

表单验证规则测试 - Constraint API

实时测试 HTML5 Constraint Validation API，查看 ValidityState 各属性变化，深入理解浏览器原生验证机制。

⚪
用户名 required + minLength=3 + maxLength=20
⚪
电子邮箱 type=email + required
⚪
个人网站 type=url
⚪
年龄 type=number + min=1 + max=150
⚪
密码 minLength=8 + maxLength=30
⚪
手机号码 pattern=[0-9]{11}
⚪
确认密码 setCustomValidity（需与密码一致）
Constraint API 实时检测
当前检测字段
—
等待输入
validationMessage
—
willValidate： —
ValidityState 属性
✅ valid
valueMissing
typeMismatch
patternMismatch
tooLong
tooShort
rangeUnderflow
rangeOverflow
stepMismatch
badInput
customError

常见问题与知识点

Constraint Validation API（约束验证API）是HTML5提供的一套原生表单验证接口。它允许开发者通过JavaScript访问表单元素的验证状态，核心是每个可验证的表单元素都拥有一个 ValidityState 对象，包含多个布尔属性来描述具体的验证失败原因。主要方法包括 checkValidity()（静默检查）和 reportValidity()（检查并显示浏览器原生错误提示）。这套API被所有现代浏览器支持，无需额外库即可实现强大的表单验证。

ValidityState 对象包含以下11个布尔属性：
  • valid：当所有其他属性都为 false 时为 true，表示字段完全有效。
  • valueMissing：设置了 required 但值为空。
  • typeMismatch：输入值与 type 类型不匹配（如 email 格式错误）。
  • patternMismatch：输入值不满足 pattern 正则表达式。
  • tooLong：输入长度超过 maxLength。
  • tooShort：输入长度不足 minLength。
  • rangeUnderflow：数值小于 min。
  • rangeOverflow：数值大于 max。
  • stepMismatch：数值不满足 step 步长约束。
  • badInput：浏览器无法解析输入值（如 number 字段输入了纯文本）。
  • customError：通过 setCustomValidity() 设置了自定义错误消息。

checkValidity()：静默检查字段是否有效，返回 true 或 false，不会触发浏览器的原生错误提示UI（气泡）。适合在后台进行验证状态检测。

reportValidity()：同样检查字段有效性并返回布尔值，但如果字段无效，会触发浏览器显示原生错误提示（通常是输入框旁边的气泡）。这是用户可见的验证方式，适合在表单提交时使用。在设置了 novalidate 属性的表单上，reportValidity() 仍然能正常显示提示。

调用 element.setCustomValidity(message) 可以设置自定义验证错误。如果 message 为非空字符串，则字段被标记为无效，customError 变为 true，且 validationMessage 返回该消息。重要：当条件满足后，必须调用 setCustomValidity('')（空字符串）来清除自定义错误，否则字段将一直处于无效状态。常见场景包括：确认密码匹配、用户名唯一性检查、跨字段验证等。

在 <form> 标签上添加 novalidate 属性即可禁用浏览器默认的表单提交验证。这样表单提交时不会弹出原生错误提示，开发者可以完全通过 JavaScript 和 Constraint API 来自行处理验证逻辑和错误展示。例如：<form novalidate>。这在使用自定义UI框架或需要统一错误展示风格时非常有用。

Constraint Validation API 被所有现代浏览器广泛支持，包括 Chrome、Firefox、Safari、Edge 以及移动端浏览器。IE10+ 也基本支持。它是 HTML5 规范的核心部分，无需任何 polyfill 即可在生产环境中安全使用。对于极少数老旧浏览器，可以结合传统的JavaScript验证作为后备方案。
🔧 相关工具