Hybrid App 中 checkValidity() 总返回 true 是因旧版 WebView 缺失 Constraint Validation API 实现；validateField() 应主动校验、不依赖 HTML 属性，blur 时触发，错误信息存 dataset，提交拦截仅靠 submit 事件手动遍历。
为什么直接写 checkValidity() 在 Hybrid App 里总是返回 true
不是你漏写了事件监听，也不是规则写错了——是绝大多数 Hybrid 容器（比如微信旧版 WebView、Android 4.4 内置浏览器、部分 iOS WKWebView 低版本）压根没实现 Constraint Validation API。checkValidity() 返回 true、reportValidity() 静默无反应、invalid 事件不触发，属于容器能力缺失，不是代码缺陷。更麻烦的是：input.validity 可能为 null，或 valueMissing 恒为 false 即使字段为空；required 属性形同虚设；title 提示在移动端基本不渲染。
validateField(inputEl, rules) 封装的核心要点
目标不是“模拟原生 API”，而是在任意 WebView 中都能稳定触发校验逻辑并给出可控制的反馈。函数必须主动采集值、执行规则、返回结构化结果，且不依赖任何 HTML 属性解析。
- 输入值默认先
trim()，解决原生required对空格字符串误判为“已填”的问题 -
rules是纯 JS 对象，例如{ required: true, pattern: /^1[3-9]\d{9}$/, minLength: 6 }，不读取input.pattern或input.required - 错误信息写入
inputEl.dataset.errorMessage，供后续 UI 层统一读取，避免 DOM 操作耦合 - 返回值固定为
{ valid: boolean, message: string }，方便上层做链式调用或聚合提示 - 只在
blur时触发，避免移动端input频繁校验导致卡顿
自定义提示框为什么不能 document.createElement('div') 后立刻 appendChild
某些 WebView（尤其是 Android 4.x 和早期 iOS WKWebView）的渲染线程与 JS 执行不同步，blur 回调中立即插入 DOM 元素，会导致提示框闪一下就消失，或根本不可见。
- 必须基于
inputEl.getBoundingClientRect()计算定位，不能依赖 CSS 的position: relative父容器（很多表单布局不规范） - 提示元素建议复用而非频繁创建，例如初始化时挂载一个全局
toastContainer，每次只更新内容和位置 - 若需动画，用
opacity+transform，避免触发布局重排（某些 WebView 对display: none → block渲染异常） - 绝对定位的
z-index要足够高（如9999），否则可能被 native 容器的 overlay 层遮盖
别碰 form.requestSubmit() 和 :invalid:not(:placeholder-shown)
这两个看似现代的写法，在 Hybrid 场景下是典型“伪安全”陷阱。
立即学习“前端免费学习笔记（深入）”；
-
form.requestSubmit()在多数容器中行为等同于form.submit()，完全跳过所有验证逻辑，包括你手动写的submit监听器前的拦截 -
:invalid:not(:placeholder-shown)依赖浏览器对伪类的完整支持，但很多 WebView 把带空格的输入也判定为 “已显示 placeholder”，导致样式永不生效 - 真正可靠的提交拦截，只有一条路：给
form绑定submit事件，手动遍历所有字段调用validateField()，任一失败就event.preventDefault() - 样式反馈改用 JS 动态添加 class，例如
inputEl.classList.toggle('error', !result.valid)，再配 CSS 规则.error { border-color: #e53935; }
最易被忽略的一点：验证函数本身要能处理 disabled 或 readonly 字段，自动跳过校验，否则在动态表单（如根据选项显隐字段）中会误报错。这个判断不能靠 inputEl.hasAttribute('disabled')，得用 inputEl.disabled === true，因为属性存在但值为 false 时，DOM API 仍会返回该属性。
