SuperAPI AI 工具集

form-validation

前端与建站

查看项目

更新于 10-16 06:00

技能介绍

用途

该技能用于审查与“无障碍表单验证”相关的模板、渲染后的 HTML 或共享组件。其核心目标是验证最终面向浏览器的标记,而不仅仅是源代码层面的写法,确保表单验证对所有用户(包括屏幕阅读器用户)都可理解、可修正。

资料指出,不可访问的表单验证会让屏幕阅读器用户无法理解出了什么错以及如何修正,从而导致挫败感和表单放弃。

主要能力

该技能围绕以下快速参考要点展开:

  • 使用 aria-describedby 将错误消息与字段关联。
  • 使用 aria-invalid 表示验证状态。
  • 通过 required 或 aria-required 以程序化方式标记必填字段。
  • 在字段附近提供内联错误消息。
  • 不要仅依赖颜色来表示错误。
  • 在整个验证过程中保持帮助文本和错误文本与字段的关联。

技能提供四类操作:

  • Check(检查):验证表单是否具有客户端验证,且错误消息通过 aria-describedby 与表单字段关联。资料特别说明,当 onSubmit 明确在客户端处理提交时,不应仅因 React 表单省略 method 或 action 就将其标记为问题。同时确认必填字段是否以程序化方式暴露,分组控件是否使用 fieldset 和 legend。
  • Fix(修复):实现带有清晰错误消息、aria-invalid 状态以及指向错误文本的 aria-describedby 引用的验证。对于客户端处理的表单,改进验证语义,而不强制使用该组件并未采用的服务器提交模式。在适当位置添加 required 或 aria-required,并对分组选项使用 <fieldset> 与 <legend>。
  • Explain(解释):说明无障碍表单验证如何改善用户体验,并确保所有用户都能理解并修正错误。
  • Code Review(代码审查):审查模板、服务端渲染 HTML 以及输出相关标记的共享组件。指出渲染后的 HTML 违反规则的具体元素、属性和路由。检查帮助文本和错误文本是否都包含在 aria-describedby 中,以及必填状态是否在标记中暴露,而不仅仅体现在视觉样式上。

使用方式

该技能以规则形式提供,适用于代码审查与实现指导场景。资料提到,完整的实现细节、代码示例和框架特定指导见 references/rule.md。规则页面为 https://frontendchecklist.io/rules/html/form-validation。

适用场景

  • 审查表单模板、服务端渲染 HTML 或共享组件中的无障碍验证标记。
  • 在代码审查中定位渲染后 HTML 违反无障碍验证规则的具体元素、属性和路由。
  • 为客户端处理的表单改进验证语义。
  • 检查必填状态、分组控件、帮助文本与错误文本的关联是否在标记中正确暴露。

限制

资料未提供该技能的具体安装命令、支持的框架清单、收费或价格信息、平台限制以及可量化的效果数据,这些内容暂未提供。