可直接调用input.checkValidity()触发原生校验，需先通过DOM方法获取有效input元素；返回布尔值，配合reportValidity()可显示浏览器默认提示；仅对含required、type、pattern等约束属性的input生效。
在 H5 页面中，可以直接调用某个 <input> 元素的 checkValidity() 方法，来单独触发其原生表单校验逻辑（比如 required、type="email"、pattern、min/max 等），无需提交整个表单。
确保 input 元素已正确获取
必须先通过 DOM 方法（如 document.getElementById 或 querySelector）拿到目标 input 元素，再调用方法：
-
✅ 正确示例：
const input = document.getElementById('username');const isValid = input.checkValidity(); -
❌ 常见错误：对 null 或非 input 元素调用，会报错
TypeError: Cannot read property 'checkValidity' of null。务必检查元素是否存在。
校验后可配合 reportValidity() 显示浏览器默认提示
checkValidity() 只返回布尔值（true 或 false），不显示提示；如需弹出浏览器默认的校验气泡（如“请填写此字段”），可紧接着调用 reportValidity()：
-
if (!input.checkValidity()) {
input.reportValidity(); // 触发 UI 提示} - 注意：
reportValidity()本身也会执行校验并返回布尔值，所以单独调用它也能实现“校验 + 提示”，但若你只需判断而不提示，就只用checkValidity()。
适用于带原生约束属性的 input
该方法依赖 HTML5 表单约束验证 API，只有设置了以下属性之一的 input 才会真正校验：
required-
type="email"、"url"、"number"、"date"等 -
pattern（正则匹配） -
min/max/minlength/maxlength
如果 input 没有这些约束，checkValidity() 默认返回 true（除非被 JS 主动设为 invalid 状态）。
与自定义校验逻辑结合使用
你可以将 checkValidity() 作为基础校验，再叠加业务规则（如用户名是否已存在）：
- 先调用
input.checkValidity()确保格式合法 - 再发起异步请求校验唯一性等逻辑
- 若原生校验失败，可提前中断后续操作，提升响应速度
