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