h5中可用form.reportvalidity()触发浏览器原生校验并自动提示、聚焦、滚动，兼容现代环境；checkvalidity()仅返回布尔值，需手动处理ui反馈。
在 H5 页面中，可以通过 JavaScript 直接调用表单元素的 checkValidity() 方法，触发浏览器原生的表单校验逻辑（如 required、type="email"、minlength、pattern 等），无需手动写正则或判断逻辑。
确保表单有 id 或能被 JS 选中
这是前提。推荐给 <form></form> 设置一个明确的 id，方便通过 document.getElementById 获取：
调用 form.checkValidity() 并响应结果
该方法会立即执行所有字段的原生校验，返回 true（全部通过）或 false（至少一个失败），同时自动触发 invalid 事件，并让不合法字段获得 :invalid 伪类样式（如红框、焦点等）。
注意：它不会自动阻止表单提交，需配合 submit 事件或手动控制流程。
- 在按钮点击时手动校验：
function validateForm() {<br> const form = document.getElementById("myForm");<br> if (form.checkValidity()) {<br> console.log("校验通过，可提交");<br> // 这里可调用 submit() 或发请求<br> } else {<br> console.log("校验失败，浏览器已高亮错误项");<br> }<br>} - 结合
submit事件做拦截：form.addEventListener("submit", function(e) {<br> if (!this.checkValidity()) {<br> e.preventDefault(); // 阻止默认提交<br> }<br>});
增强体验：让首个错误字段获得焦点
原生 checkValidity() 不会自动聚焦错误项，但你可以手动补上：
- 遍历表单内所有可校验的控件（
input、select、textarea） - 对每个控件调用
checkValidity()，第一个返回false的就调用.focus() - 也可直接用
form.reportValidity()（见下一条）替代
更推荐：用 form.reportValidity() 替代
如果希望浏览器不仅校验，还自动显示默认错误提示（如气泡 tooltip）、滚动到首个错误项、并聚焦——请改用：
-
form.reportValidity()：功能同checkValidity()，但会主动触发 UI 反馈（含提示文案） - 它也返回布尔值，语义更清晰，适合“用户主动触发校验”的场景（如点击【下一步】按钮）
- 兼容性良好（iOS Safari 10.3+、Android Chrome 54+，现代 H5 环境基本全覆盖）
✅ 推荐写法：if (!form.reportValidity()) return; // 校验失败，提示已出，中断后续逻辑
