html5原生验证需满足三个条件：表单被包裹、提交由type="submit"触发、验证属性写法合规；否则不生效。常见错误包括缺type="submit"、用form.submit()而非requestsubmit()、input不在form内等。
HTML5 原生验证属性在 index.html 中能直接生效，但必须满足三个硬性条件：表单被 <form></form> 包裹、提交由 type="submit" 触发、验证属性写法符合浏览器解析规则；否则哪怕全写对了，提示也不会弹出来。
required 不生效？先看是不是“假提交”
加了 required 却没拦住空提交，90% 是因为没走浏览器原生提交流程。常见错误包括：
- 用
<button>提交</button>但没写type="submit"（默认是type="button"，完全绕过验证） - 用 JS 调用
form.submit()—— 这个方法不触发任何原生验证，应改用form.requestSubmit() - 表单外的按钮通过
onclick="document.querySelector('form').submit()"手动调用，同样失效 -
<input required>没放在<form></form>内部，浏览器压根不识别它的验证语义
移动端还要注意：某些 WebView（如早期 Android 系统内嵌）会忽略 required，若需兼容，得配合 JS 的 checkValidity() 做兜底。
pattern 正则总匹配失败？检查类型和写法
pattern 只对 type="text"、"email"、"tel"、"url"、"password" 等文本类输入有效；对 type="number" 或 "date" 完全无效 —— 浏览器会在正则执行前就把值转成数字或日期对象，导致字符串匹配失败。
正则本身也有坑：
- 不能写
^和$，浏览器自动锚定，写了反而报Invalid regular expression -
\d在部分 Safari 版本中不匹配 Unicode 数字，建议显式写[0-9] - 中文要写成
[\u4e00-\u9fa5]（注意无反斜杠转义），\u4E00-\u9FA5格式在旧 Chrome 会解析失败 - 手机号别只写
pattern="\d{11}"，应写pattern="1[3-9]\d{9}"，避免匹配到纯数字乱码
另外：pattern 不校验空值，空字段由 required 控制，两者得共存才能既防空又防格式错。
自定义提示文案：setCustomValidity 不是设一次就完事
想替换浏览器默认的英文提示（比如“Please fill out this field”），必须用 setCustomValidity()，但它有个关键行为：一旦设了非空字符串，该字段就永远处于 invalid 状态，直到你手动清空。
典型错误写法：
input.addEventListener('invalid', e => {
e.preventDefault();
input.setCustomValidity('请输入正确邮箱');
});
这段代码会导致用户输完再删掉重填，依然卡在错误态。正确做法是：
- 在
input或blur事件里，先调用input.setCustomValidity('')清空旧错误 - 再根据当前值是否合法，决定是否重新设错误文案
- 多个关联字段（如密码+确认密码）要分别调用
setCustomValidity，不能只设一个
顺带一提：title 属性虽能显示提示，但仅在鼠标悬停时出现，且移动端基本不可见，不能当主要提示手段。
移动端软键盘与验证属性的隐性联动
原生验证属性不只是“校验”，还直接影响输入体验：
-
type="tel"+pattern="[0-9]*"→ iOS 弹出纯数字键盘 -
type="email"→ 键盘右下角显示 “@” 和 “.” 快捷键 -
inputmode="decimal"（非验证属性，但常一起用）→ 触发带小数点的数字键盘，比type="number"更可控
但要注意：pattern 中的字符集不保证一定触发对应键盘，比如 [a-z] 在某些 Android 厂商定制系统里可能还是弹出全键盘。真正稳的方式是组合 type + inputmode，而不是只靠 pattern。
最易被忽略的一点：所有原生验证都只在提交瞬间触发一次，不会实时监听。如果业务需要输入过程中即时反馈（比如密码强度条），就必须用 JS 监听 input 事件 + checkValidity() 主动查，不能指望 required 或 pattern 自己跳出来提醒。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
