原生表单校验能力不依赖javascript，但复用库本质是代理htmlinputelement方法；直接扩展prototype危险且无效，setcustomvalidity是唯一安全钩子；自定义元素须桥接原型链、实现formassociated并正确代理状态。
原生表单校验能力本身不依赖 JavaScript 构建，但所有可复用的校验库封装，本质都是对 HTMLInputElement 原型链上方法和属性的延伸或代理——不是重写验证逻辑，而是接管调用路径。
为什么直接扩展 HTMLInputElement.prototype 是危险操作
浏览器不允许向内置构造函数原型添加方法（现代环境会抛 TypeError: Cannot assign to read only property），即使在旧版能写入，也会污染全局作用域、引发第三方库冲突、破坏模块隔离。更关键的是：checkValidity() 等方法的执行依赖内部 slot 和 shadow state，外部强行挂载无法触发浏览器原生反馈（如 :invalid 伪类、错误气泡、键盘提交拦截）。
- 试图写
HTMLInputElement.prototype.validateEmail = function() { ... }会失败或静默忽略 - 即便绕过限制注入了方法，它也无法调用内部
this.validity的真实 getter，返回值恒为undefined -
form.reportValidity()不会识别你加的方法，仍只遍历原生可约束元素
setCustomValidity() 是唯一安全的“钩子”入口
这个方法是 W3C 明确开放给开发者干预校验流程的接口：它不修改原型，只影响当前元素的 validity.valid 和 validationMessage 状态，且能被 form.checkValidity() 正确读取。所有轻量封装都应围绕它组织。
- 每次输入后手动调用
input.setCustomValidity('')清空自定义错误，让原生规则（required、pattern）重新生效 - 同步校验失败时，立即调用
input.setCustomValidity('手机号格式错误')，触发 UI 反馈 - 异步校验（如用户名查重）必须等
input.checkValidity() === true后再调用，避免覆盖原生错误 - 不要在
setCustomValidity()里做异步请求——它必须同步返回字符串或空字符串
自定义元素封装必须桥接原型链而非继承
MyInput 类不能靠 extends HTMLInputElement（语法非法），只能 extends HTMLElement 并在内部持有原生 input。它的“验证能力”来自显式代理，而非原型继承：
- 必须实现
checkValidity()方法，内部调用this.input.checkValidity() - 必须暴露
validitygetter，返回this.input.validity，否则form无法读取状态 - 必须在
attributeChangedCallback中把required、pattern等属性设到this.input上，否则浏览器根本不检查 - 必须设置
formAssociated: true并实现formAssociated接口，否则form.elements里找不到它
校验库的“能力边界”由原型链可见性决定
一个封装是否真正融入原生流程，就看它能否通过标准路径被访问到：比如 form.elements[0].checkValidity() 能否调用、form.querySelectorAll(':invalid') 是否包含它、input.addEventListener('invalid', ...) 是否触发。任何绕过这些路径的方案（如自己维护 validationState Map、用 data-* 存状态）都会导致表单级 API 失效。
最容易被忽略的是：form.reportValidity() 会跳过所有未正确实现 formAssociated 或未桥接 validity 的自定义元素——它不报错，只是安静地忽略，调试时极难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
