HTML5原生表单校验需统一执行语义对齐、触发可控、提示一致三条标准：必填字段须搭配type或pattern；提交必须用requestSubmit()或dispatchEvent；错误提示须setCustomValidity+JSON统管，并强制校验兜底。
团队要统一用好 HTML5 原生表单校验，关键不是堆属性，而是建立可执行、可检查、可交接的使用标准。核心是三条线：语义对齐、触发可控、提示一致。
字段约束必须语义化组合，禁止单独裸用 required
required 只管“空不空”，不管“对不对”。团队规范里明确要求：所有必填字段必须搭配 type 或 pattern 使用，形成完整语义链。
- 邮箱必填 → ，不用 type="text" + pattern + required
- 手机号必填 → ，并配 title="请输入11位手机号"
- 密码必填且有强度 → ，title 写清规则
- 禁止出现 这类无类型、无格式约束的写法——它在移动端无法唤起对应键盘，也不具备基础格式拦截能力
提交行为必须走原生流程，禁用 form.submit()
原生校验只在浏览器原生提交时触发。团队规范强制约定：
- 所有提交按钮必须显式声明 type="submit"，
- JS 中发起提交必须用 form.requestSubmit()，严禁调用 form.submit()
- 表单外触发提交（如顶部导航栏“下一步”）需通过 form.dispatchEvent(new Event('submit', { cancelable: true })) 模拟，再监听 submit 事件做校验
- 隐藏字段（display: none 或 visibility: hidden）上的 required 自动失效，需用 CSS visibility: collapse 或 aria-hidden 配合 JS 动态控制可见性
错误提示必须可读、可定制、可重置
默认浏览器提示中英文混杂、位置不可控、样式无法调整。团队统一封装最小干预逻辑：
- 每个带验证的 input 必须监听 input 和 blur 事件，在 input 时调用 setCustomValidity("") 清空旧状态
- blur 时校验失败则调用 setCustomValidity("自定义中文提示")，例如“手机号格式不正确，请输入11位数字”
- 所有自定义提示文案统一收口到 JSON 配置文件，按 field name + rule key 管理，避免散落在各处 JS 里
- CSS 层面强制使用 :invalid:not(:placeholder-shown) 控制红框样式，禁止直接写 .error 类覆盖原生状态
兼容与兜底必须写进 checklist，不依赖“应该能行”
原生校验在部分 WebView 或老旧 Android 内核中会静默失效。团队发布前必查项：
- 表单是否被完整包裹在 内？input 不在 form 中，required 形同虚设
- pattern 正则是否避开 d、s 等 Unicode 不稳定写法？统一用 [0-9]、[\s]（双反斜杠转义）
- 中文匹配是否用 [u4e00-u9fa5]？禁用 u4E00-u9FA5（大写U+斜杠格式在旧 Chrome 解析异常）
- 关键业务字段（如注册手机号、登录邮箱）在 submit 事件中必须调用 form.checkValidity() 并手动处理 false 情况，作为最后一道防线
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
