行内校验反馈

尚无可操作样本；插图为编辑示意。产品中仍需验证每种字段的触发时机是否合适、读屏是否在失焦后播报错误文字、错误在修正后是否实时消失，以及服务端校验结果如何回填到对应字段。

{
  "states": [
    "neutral",
    "validating",
    "valid",
    "invalid"
  ],
  "a11y": [
    "错误文字通过 aria-describedby 与字段关联，字段标记 aria-invalid",
    "出错时不强制移动焦点；提交后汇总错误可把焦点移到第一个出错字段"
  ],
  "motion": "错误条直接出现或淡入即可，不使用抖动等强调动效；启用减少动态效果时直接出现"
}

{
  "id": "inline-validation",
  "type": "micro",
  "name": {
    "zh": "行内校验反馈",
    "en": "Inline Validation Feedback"
  },
  "aliases": [
    "Inline Validation",
    "Field-level Validation",
    "即时表单校验"
  ],
  "granularity": "state",
  "intents": [
    "prevent-error",
    "inform"
  ],
  "tags": [
    "表单",
    "校验",
    "错误反馈",
    "字段级",
    "validation"
  ],
  "definition": "在用户填写表单的过程中或刚完成某个字段之后，紧贴该输入框显示该字段的校验结果：指出错误、用文字描述问题，并在可能时给出修正建议；对复杂字段也可显示成功确认。",
  "boundary": "行内校验只反馈单个字段的输入是否合规，不是就地修改内容的行内编辑，也不是整个错误预防原则（它只是该原则在表单字段层面的一种实现）。时机是关键：多数字段应在用户离开字段或输入长度达到预期后再校验，而不是从第一次击键就报错；密码强度等实时约束例外。提交后的汇总错误列表与状态消息是它的邻居，不能替代紧贴字段的提示。",
  "signature": [
    "反馈紧贴对应字段出现，位置在字段下方或旁边",
    "错误用文字描述，颜色与图标只是补充",
    "用户修正后提示立即消失，复杂字段可显示成功确认"
  ],
  "when": [
    "表单字段有可自动检测的格式或范围约束，用户容易输错",
    "字段较多或分布较长，提交后再集中报错会让用户来回寻找",
    "复杂字段（如卡号、邮箱）需要让用户确认自己没有输错"
  ],
  "when_not": [
    "校验依赖服务端才能确定结果，且不能在用户输入时给出可靠判断",
    "字段只有一两个且约束极简单，提交时一次性提示已足够",
    "出于安全考虑不应暴露具体错误原因（如登录失败时不宜指明是账号还是密码错）"
  ],
  "tradeoff": "紧贴字段的即时反馈让用户在上下文中修正错误，但过早触发的校验会在用户尚未输完时就打断和责怪用户；需要为每种字段单独决定触发时机，并保证反馈对读屏用户可感知。",
  "comparison": {
    "focus": "让用户在填写时就知道某个字段是否合规、如何修正",
    "mechanism": "字段离开或完成时触发校验，在字段旁显示文字反馈",
    "cost": "需要逐字段设计触发时机与文案，过早或过于频繁的校验会适得其反"
  },
  "sources": [
    {
      "id": "nng-form-error-guidelines",
      "title": "NN/g · How to Report Errors in Forms: 10 Design Guidelines",
      "url": "https://www.nngroup.com/articles/errors-forms-design-guidelines/",
      "claim": "建议尽可能采用行内校验，把可操作的错误消息放在问题字段的下方或旁边；多数情况下应等用户填完并离开字段后再显示错误；用图标辅助颜色以照顾色觉障碍用户；错误消息应明确、礼貌、精确并给出建设性建议。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/errors-forms-design-guidelines/",
        "status": "pending",
        "checkedAt": "2026-09-15T18:45:47.752Z",
        "error": "status-request-failed",
        "jobId": "spn2-bb2aad81c1e0acfb4debf0edc2d9a7566b661c6d"
      }
    },
    {
      "id": "baymard-inline-form-validation",
      "title": "Baymard Institute · Inline Form Validation",
      "url": "https://baymard.com/blog/inline-form-validation",
      "claim": "过早的行内校验会在用户尚未有机会输对之前就告知其输入错误，损害整体体验；校验宜在用户离开字段（onblur）或输入达到预期长度时触发；错误消息应在用户输入合法值的瞬间实时消失；测试参与者欢迎对勾等正向确认。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://baymard.com/blog/inline-form-validation",
        "status": "pending",
        "checkedAt": "2026-09-15T18:46:04.072Z",
        "error": "status-request-failed",
        "jobId": "spn2-d819c57bd1f1820412d7ffee5ff39c659bbcdaa0"
      }
    },
    {
      "id": "wcag22-error-identification",
      "title": "W3C · Understanding SC 3.3.1 Error Identification (WCAG 2.2)",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html",
      "claim": "A 级准则要求：若输入错误被自动检测到，须指出出错的项目并以文字向用户描述错误；颜色、高亮等视觉提示只能作为补充，不能替代文字描述。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html",
        "status": "pending",
        "checkedAt": "2026-09-15T18:46:09.779Z",
        "error": "status-request-failed",
        "jobId": "spn2-f803a00afa2accacab1a2c65e328ea436c8591cd"
      }
    },
    {
      "id": "wcag22-error-suggestion",
      "title": "W3C · Understanding SC 3.3.3 Error Suggestion (WCAG 2.2)",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion.html",
      "claim": "AA 级准则要求：若输入错误被自动检测到且修正建议已知，须向用户提供该建议，除非这会危及内容的安全性或目的。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion.html",
        "status": "pending",
        "checkedAt": "2026-09-15T18:46:49.092Z",
        "error": "status-request-failed",
        "jobId": "spn2-f2c3a50e77ce96998fc70581d9194e7772ba71b3"
      }
    }
  ],
  "relations": [
    {
      "target": "error-prevention",
      "kind": "realized_by",
      "condition": "错误可在字段层面自动检测",
      "reason": "行内校验是错误预防原则在表单字段上的一种具体落地：在提交前就指出并帮助修正问题。",
      "basis": "editorial"
    },
    {
      "target": "inline-edit",
      "kind": "related",
      "condition": "同一字段既可就地编辑又需校验",
      "reason": "行内编辑改变的是内容进入编辑态的方式，行内校验反馈的是内容是否合规，二者常同时出现但概念独立。",
      "basis": "editorial"
    },
    {
      "target": "status-message",
      "kind": "related",
      "condition": "需要决定错误放在字段旁还是全局播报",
      "reason": "状态消息报告整个操作的结果，不绑定具体字段；字段级错误应紧贴字段，提交失败的汇总才适合用状态消息补充。",
      "basis": "editorial"
    },
    {
      "target": "focus-indicator",
      "kind": "composes_with",
      "condition": "键盘用户在字段间移动",
      "reason": "校验在字段失焦时触发，可见焦点让用户知道自己刚离开哪个字段，从而把错误提示与字段对应起来。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "自动检测到字段输入错误",
      "instruction": "指出出错字段并用文字描述问题，不能仅靠颜色或边框变化表示（WCAG 2.2 SC 3.3.1，A 级）。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "修正方式已知且不涉及安全",
      "instruction": "在错误消息中给出具体修正建议，如期望格式或示例（WCAG 2.2 SC 3.3.3，AA 级）。",
      "strength": "recommend",
      "basis": "editorial"
    },
    {
      "when": "决定校验触发时机",
      "instruction": "在用户离开字段或输入达到预期长度后再校验，不要从第一次击键就报错；密码强度等实时约束可例外，且错误在修正后应立即消失。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "requirements": [],
  "behavior": {
    "states": [
      "neutral",
      "validating",
      "valid",
      "invalid"
    ],
    "a11y": [
      "错误文字通过 aria-describedby 与字段关联，字段标记 aria-invalid",
      "出错时不强制移动焦点；提交后汇总错误可把焦点移到第一个出错字段"
    ],
    "motion": "错误条直接出现或淡入即可，不使用抖动等强调动效；启用减少动态效果时直接出现"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "demoCapabilities": [],
  "implementationNote": "尚无可操作样本；插图为编辑示意。产品中仍需验证每种字段的触发时机是否合适、读屏是否在失焦后播报错误文字、错误在修正后是否实时消失，以及服务端校验结果如何回填到对应字段。",
  "image": {
    "src": "/images/inline-validation.webp",
    "alt": "虚构的 FIELDNOTES 表单竖排三个输入框：第一个带小对勾表示通过，第二个红色描边、下方有一条短错误提示条，第三个保持中性未校验。"
  },
  "searchTerms": [
    "form",
    "validation",
    "error feedback",
    "field-level",
    "validation"
  ]
}