H5表单校验统一规范：以原生校验为基础，CSS伪类控制状态反馈，预设三类文案模板，JS严格管理setCustomValidity调用与重置，保障无障碍与国际化支持。
团队前端在 H5 项目中统一自定义表单校验提示，关键不是“写更多 JS”，而是建立可复用、可维护、无障碍友好的视觉与文案规则。核心原则是：**浏览器原生校验为基底，JS 仅做必要接管；错误提示必须可读、可定位、可恢复；样式反馈需与状态严格同步。**
视觉规范：用 CSS 伪类驱动状态反馈，不依赖 JS 操作 class
所有输入控件（input、select、textarea）的视觉反馈必须通过原生伪类控制，避免手动增删 is-error 类：
- 聚焦态统一用
:focus+outline: 2px solid #007AFF（iOS/Safari 友好），禁用outline: none - 无效态仅响应
:invalid:not(:placeholder-shown)，边框变红（border-color: #E53935），禁用:invalid单独匹配（会误伤未输入的必填项） - 有效态用
:valid:not(:placeholder-shown)，边框变绿（border-color: #43A047），且移除 placeholder 文字 - 错误提示容器（如
<div class="field-error">）默认display: none，仅当对应控件处于:invalid:not(:placeholder-shown)时，用相邻兄弟选择器显示：input:invalid:not(:placeholder-shown) + .field-error { display: block; }
文案规范：按错误类型分层定义，禁止自由发挥
所有自定义提示文案必须从预设池中选取，由产品与 UX 共同确认，禁止开发者临时拼写。分三类：
-
空值类（触发
value === '' && validity.valueMissing）：统一为「请填写【字段名】」，字段名从label.textContent或aria-label提取，例：「请填写手机号」 -
格式类（触发
validity.typeMismatch || validity.patternMismatch）：统一为「【字段名】格式不正确」，例：「邮箱格式不正确」 -
业务类（需 JS 主动调用
setCustomValidity()的场景，如用户名查重）：必须带明确动作指引，例：「该手机号已被注册，请换一个」或「密码需包含字母和数字，至少8位」
禁用模糊表述（如“输入有误”“请重试”）、英文混杂（如“Email is invalid”）、以及带情绪化词汇（如“错了！”“别乱填！”）。
立即学习“前端免费学习笔记（深入）”；
JS 行为规范：约束 setCustomValidity 调用时机与重置逻辑
所有 JS 校验逻辑必须遵循固定节奏，杜绝“设了不重置”“重置传 null”等高频错误：
- 在
input事件中，先清空：el.setCustomValidity('')，再根据当前值判断是否设错；禁止在blur后才首次设置 - 提交前统一调用
form.checkValidity()，若失败，遍历form.elements，对每个!el.checkValidity()的控件，提取el.validationMessage渲染到对应.field-error中，不调reportValidity() - 每次
setCustomValidity()后，必须确保后续有明确路径重置：用户继续输入合法内容时自动清空；用户切换字段后若已合法，也需在blur时强制清空 - 禁用
setCustomValidity(null)、setCustomValidity(undefined)、setCustomValidity(' ')（空格会被转成字符串，持续触发 invalid）
无障碍与国际化基础支持
提示文案必须可通过 aria-live="polite" 区域同步播报，且支持 i18n 替换：
- 每个
.field-error必须有role="alert"和aria-live="polite"，确保屏幕阅读器可读 - 文案模板预留占位符，如
「{field} 格式不正确」，由 i18n 工具注入翻译，不硬编码中文 - 表单提交按钮需添加
aria-busy="true"和aria-disabled="true"状态，在校验中/提交中提供明确反馈
