checkvalidity()可快速触发浏览器原生表单校验，返回布尔值并标记:invalid伪类；需在submit事件或按钮点击中调用，配合reportvalidity()显示气泡、setcustomvalidity()自定义提示，注意重置状态。
用 checkValidity() 快速触发原生校验
浏览器自带的表单校验能力足够应付大多数基础场景，不用立刻上第三方库。关键在于正确调用 checkValidity() —— 它会立即执行所有 required、type="email"、minlength 等约束检查，并返回 true 或 false。
注意：它不会自动弹出提示框，但会把无效字段标为 :invalid 伪类，同时让 form.reportValidity() 可用。
- 必须在
submit事件中调用，或显式绑定到按钮点击；直接在页面加载时调用会返回true（因为此时用户还没输入） - 对单个
<input>元素也能调用，比如input.checkValidity()，适合做实时反馈 - 如果想显示浏览器默认错误气泡，改用
form.reportValidity()，它内部会先调用checkValidity()再触发 UI 提示
避免 onsubmit="return false" 搞崩校验流程
很多老写法喜欢在表单上写 onsubmit="return false" 来阻止提交，结果导致原生校验根本没机会运行——因为校验依赖表单的默认提交行为被触发。
正确做法是用 JavaScript 监听 submit 事件，然后按需决定是否 event.preventDefault()：
form.addEventListener('submit', function(e) {
if (!this.checkValidity()) {
e.preventDefault(); // 校验失败才阻止
return;
}
// 校验通过，可继续提交或发 Ajax
});
- 不要在 HTML 中写内联
onsubmit，容易覆盖 JS 绑定的逻辑 -
checkValidity()返回false时，form.elements中的无效字段会自动获得validity.valid === false，可用来定位具体哪个字段错 - 若用了
e.preventDefault()却忘了手动处理错误提示，用户会感觉“点了没反应”，建议配合reportValidity()显示默认气泡
自定义错误信息用 setCustomValidity()
原生校验的提示语很生硬，比如 “Please fill in this field”。“自定义错误”不是靠改 title 或加 data-msg，而是必须调用 setCustomValidity()。
这个方法有个易错点：传空字符串 "" 才表示“校验通过”，传任何非空字符串都会让字段变成无效状态。
- 每次输入后都要重置：比如在
input的input事件里先调用input.setCustomValidity("")，再根据逻辑判断是否设新错误 - 不能只在提交时设一次——因为用户可能中途修改，而
setCustomValidity()的状态会一直保留直到再次调用 - 配合
validationMessage属性可读取当前显示的错误文本，方便调试
移动端 pattern 和 inputmode 配合更实用
纯靠 type="number" 在 iOS 上可能唤不出数字键盘，且无法限制小数位。这时 pattern + inputmode 是更可控的组合。
例如手机号校验：<input type="text" inputmode="tel" pattern="[0-9]{11}">，既确保软键盘类型合理，又让 checkValidity() 能识别格式错误。
-
inputmode是提示，不参与校验；pattern才真正影响checkValidity()结果 -
pattern是正则，但不带/^...$/边界符，浏览器会自动全匹配（即等价于^pattern$） - 慎用过于复杂的
pattern，某些安卓 WebView 对正则支持不一致，简单字符长度或数字范围优先用minlength/max等原生属性
原生校验链路很短：属性声明 → 用户交互 → checkValidity() 触发 → 状态更新 → reportValidity() 显示。漏掉其中一环，比如忘了重置 setCustomValidity("")，就会导致字段永久 invalid。真正难的不是写代码，是理清这个状态流转时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
