HTML5 中自定义校验怎么配合 constraint validation API 使用-H5教程-PHP中文网

HTML5自定义校验基于constraint validation API补充浏览器未覆盖的逻辑，核心是setCustomValidity控制状态，配合input/blur事件实时反馈，checkValidity主动触发验证，并需注意传参类型、required优先级、contenteditable不支持及移动端pattern兼容性等细节。

html5 中自定义校验怎么配合 constraint validation api 使用

HTML5 的自定义校验不是另起炉灶，而是基于 constraint validation API 做“补充式干预”——浏览器管基础规则（比如 required、pattern、type），你用 API 管它管不了的逻辑（比如两次密码是否一致、用户名是否已被注册）。

用 setCustomValidity 控制验证状态

这是最核心的操作。每个表单控件都有 setCustomValidity(message) 方法：

传入非空字符串（如 "密码不匹配"），该字段就变成 invalid 状态，提交时被拦截；
传入空字符串（""），清空自定义错误，恢复默认验证逻辑；
注意：只要 message 不为空，哪怕其他约束都满足，checkValidity() 也会返回 false。

配合 input 或 blur 事件做实时反馈

不能只靠提交时才检查。常见做法是监听确认密码框的输入或失焦：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

监听 input 事件，每次用户打字都比对两个密码值；
不相等就调用 confirmInput.setCustomValidity("请重新输入")；
相等就调用 confirmInput.setCustomValidity("")；
这样用户能立刻看到状态变化，:invalid 和 :valid 伪类也会自动生效，方便 CSS 样式响应。

用 checkValidity 主动触发并协调流程

当需要统一控制（比如点击按钮但不提交表单），可以手动调用验证：

form.checkValidity() 检查整个表单是否通过所有约束；
input.checkValidity() 单独检查某个字段；
返回 false 时，可结合 input.validationMessage 获取当前错误提示；
适合用在自定义提交按钮、多步骤表单跳转前、或与后端联调时做本地预检。

避免踩坑的关键细节

几个容易忽略但影响功能的点：

不要给 setCustomValidity 传 null 或 undefined，只认字符串，否则可能意外置为 invalid；
如果字段本身有 required，但用户没填，此时 validationMessage 显示的是浏览器默认提示，不是你设的 custom message；
contenteditable 元素不支持 constraint validation API，这类区域必须自己写 JS 校验；
移动端某些浏览器对 pattern 的正则支持有限，复杂逻辑建议仍交由 API + JS 处理。