利用函数封装提升HTML表单校验效率-html教程-PHP中文网

hybrid app 中 checkvalidity() 总返回 true 是因旧版 webview 缺失 constraint validation api 实现；validatefield() 应主动校验、不依赖 html 属性，blur 时触发，错误信息存 dataset，提交拦截仅靠 submit 事件手动遍历。

利用函数封装提升html表单校验效率

为什么直接写 `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 元素，会导致提示框闪一下就消失，或根本不可见。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

必须基于 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 仍会返回该属性。