交互模式 · 表单
表单校验
Form Validation
也叫:表单验证、输入校验、校验规则
检查用户填写的内容是否符合要求,比如必填、手机号格式、密码长度,不符合时给出具体提示。
详细解释
表单校验分前端校验和后端校验。前端校验在浏览器里即时检查,体验好;后端校验防止有人绕过前端,必须有。给 AI 提需求时两者都要提。
前端校验要定好「什么时候校验」:输入过程中实时校验,容易在用户还没输完时就报错;通常更好的时机是输入框失去焦点时校验一次,之后再修改时实时更新;点击提交时再整体校验一遍,并把页面滚动到第一个出错的字段。
错误提示放在对应输入框的正下方,说清楚要求(「密码至少 8 位,需包含数字」),出错的输入框边框变红。不要只在顶部显示一句「表单有误」。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
interaction-form-validation- DOM 选择器
- 没有 DOM 线索,这个概念不在页面上直接识别。
- 优先级
- 1 · 同一层有多条命中时,优先级高的胜出
- 版本
- v1 · 更新于 2026/09/29