原生html校验属性仅支持单字段静态规则，无法处理跨字段、异步或上下文依赖的复杂校验；需通过接管reportvalidity()、桥接validity状态及规范表单结构来实现业务级验证。
为什么直接在 form 上用 required/pattern 会卡死复杂校验
原生 HTML 校验属性（required、pattern、minlength 等）只作用于单字段、静态规则，一旦涉及「用户名是否已注册」「密码与确认密码是否一致」「风控等级+地域+时间窗口联合判定」这类跨字段、需服务端交互或上下文计算的逻辑，浏览器原生验证就完全失效。强行塞进 pattern 写超长正则，不仅可读性崩坏，还绕不开异步校验这个硬伤。
常见错误现象包括：
- 用户填完所有字段，点击提交，页面静默无反应——因为
reportValidity()返回true，但业务层校验其实失败了 - 用
setCustomValidity('')清空错误后，再次调用checkValidity()仍返回false，原因是 validity.state 没重置 - 多个自定义校验共存时，
oninvalid事件被反复触发，错误提示叠加刷屏
如何让 reportValidity() 真正反映业务状态
关键不是禁用原生校验，而是接管它：把业务逻辑结果桥接到原生 validity API。核心动作是三步——同步状态、代理方法、延迟反馈。
- 所有业务校验必须封装为返回
Promise<boolean></boolean>的函数，拒绝时附带错误消息（如{ valid: false, message: '该手机号已被绑定' }） - 在表单
submit事件中调用event.preventDefault()，然后手动触发每个字段的reportValidity()，再并行执行业务校验 - 业务校验完成后，对对应字段调用
input.setCustomValidity(message)+input.reportValidity()，强制刷新 UI 状态 - 注意：不能在
input的blur或input事件里直接调用异步校验，否则会阻塞输入、触发多次请求
自定义元素（<my-input></my-input>）怎么透传 validity 状态
HTML 自定义元素默认不参与表单约束验证流程，checkValidity() 和 reportValidity() 方法根本不存在。想让它“看起来像原生 input”，必须显式桥接。
- 构造函数中创建 Shadow DOM，并在内部放置真实
<input>，保存引用（如this.input = this.shadowRoot.querySelector('input')） - 监听所有影响校验的 attribute 变更（
required、pattern、minlength），用observedAttributes+attributeChangedCallback同步到内部input - 手动实现
checkValidity()：返回this.input.checkValidity()；实现reportValidity()：调用this.input.reportValidity() - 最关键的是 validity 状态桥接：通过
Object.defineProperty把this.validity映射为this.input.validity的 getter，否则form.checkValidity()无法识别该元素
form.checkValidity() 返回 true 却提交失败？检查这三点
这是最隐蔽也最常被忽略的问题：浏览器认为表单“合法”，但业务逻辑仍拦截了提交。根源往往不在 JS 代码，而在 HTML 结构或属性配置。
-
<form></form>必须有method和action属性，哪怕只是method="POST" action="#"，否则部分浏览器（尤其是 Safari）会跳过 validity 检查 - 所有参与校验的控件必须在同一个
<form></form>内，且不能被<fieldset disabled></fieldset>包裹——disabled 字段会被checkValidity()直接忽略 - 使用
<button type="submit"></button>触发提交，而非<button onclick="submitForm()"></button>——后者绕过了浏览器内置的 validity 流程，reportValidity()不会自动触发
真正复杂的业务校验，从来不是靠堆砌属性完成的，而是靠在原生验证的壳子里，稳稳嵌入可控、可观测、可灰度的业务判断点。别让 setCustomValidity 成为黑盒，每次调用前都该清楚它背后是缓存结果、还是刚发完一次请求。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
