{
  "_description": "本文件由 data/ 生成：请改动来源文件，不要改这里。各字段的证据边界见接入指南。",
  "schemaVersion": "1.0.0",
  "kind": "entry",
  "locale": "zh-CN",
  "id": "inline-validation",
  "name": {
    "zh": "行内校验反馈",
    "en": "Inline Validation Feedback"
  },
  "page": "https://designvocabulary.com/zh/entries/inline-validation/",
  "self": "https://designvocabulary.com/zh/entries/inline-validation.json",
  "alternates": {
    "zh-CN": "https://designvocabulary.com/zh/entries/inline-validation.json",
    "en": "https://designvocabulary.com/en/entries/inline-validation.json"
  },
  "site": {
    "catalogSchemaVersion": "0.1.0",
    "entries": 158,
    "index": "https://designvocabulary.com/zh/entries/index.json",
    "query": "https://designvocabulary.com/api/query?lang=zh",
    "guide": "https://designvocabulary.com/zh/agents/",
    "llms": "https://designvocabulary.com/llms.txt"
  },
  "provenance": {
    "sourceBacked": [
      "entry.definition"
    ],
    "editorial": [
      "entry.boundary",
      "entry.signature",
      "entry.when",
      "entry.when_not",
      "entry.tradeoff",
      "entry.comparison",
      "entry.rules",
      "entry.relations",
      "entry.implementationNote",
      "entry.behavior"
    ],
    "scope": "定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。",
    "editorialStatus": "drafted",
    "specimenData": "fictional",
    "specimenNote": "示例为原创虚构界面；定义附来源，用法与配方为编辑建议。",
    "sources": [
      {
        "id": "nng-form-error-guidelines",
        "url": "https://www.nngroup.com/articles/errors-forms-design-guidelines/",
        "title": "NN/g · How to Report Errors in Forms: 10 Design Guidelines",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260915184726/https://www.nngroup.com/articles/errors-forms-design-guidelines/",
          "capturedAt": "2026-09-15T18:47:26Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/errors-forms-design-guidelines/"
        }
      },
      {
        "id": "baymard-inline-form-validation",
        "url": "https://baymard.com/blog/inline-form-validation",
        "title": "Baymard Institute · Inline Form Validation",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260915184740/https://baymard.com/blog/inline-form-validation",
          "capturedAt": "2026-09-15T18:47:40Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://baymard.com/blog/inline-form-validation"
        }
      },
      {
        "id": "wcag22-error-identification",
        "url": "https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html",
        "title": "W3C · Understanding SC 3.3.1 Error Identification (WCAG 2.2)",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260903153433/https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html",
          "capturedAt": "2026-09-03T15:34:33Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html"
        }
      },
      {
        "id": "wcag22-error-suggestion",
        "url": "https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion.html",
        "title": "W3C · Understanding SC 3.3.3 Error Suggestion (WCAG 2.2)",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260917173134/https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion.html",
          "capturedAt": "2026-09-17T17:31:34Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion.html"
        }
      }
    ],
    "lists": [
      {
        "id": "M-C",
        "edition": "classic",
        "seat": 4,
        "origin": "issue-1-ledger",
        "page": "https://designvocabulary.com/zh/lists/M-C/",
        "json": "https://designvocabulary.com/zh/lists/M-C.json"
      }
    ],
    "ordered": false,
    "listDisclaimer": "席位号是编辑位置，不是评分、排名或人气统计；清单未收满时保持原样，不补足。"
  },
  "entry": {
    "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": "available",
          "checkedAt": "2026-09-22T14:39:11.860Z",
          "jobId": "spn2-bb2aad81c1e0acfb4debf0edc2d9a7566b661c6d",
          "url": "https://web.archive.org/web/20260915184726/https://www.nngroup.com/articles/errors-forms-design-guidelines/",
          "timestamp": "20260915184726"
        }
      },
      {
        "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": "available",
          "checkedAt": "2026-09-22T14:39:15.859Z",
          "jobId": "spn2-d819c57bd1f1820412d7ffee5ff39c659bbcdaa0",
          "url": "https://web.archive.org/web/20260915184740/https://baymard.com/blog/inline-form-validation",
          "timestamp": "20260915184740"
        }
      },
      {
        "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": "available",
          "checkedAt": "2026-09-23T12:06:23.219Z",
          "jobId": "spn2-f803a00afa2accacab1a2c65e328ea436c8591cd",
          "url": "https://web.archive.org/web/20260903153433/https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html",
          "timestamp": "20260903153433"
        }
      },
      {
        "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": "available",
          "checkedAt": "2026-09-22T14:39:22.091Z",
          "jobId": "spn2-f2c3a50e77ce96998fc70581d9194e7772ba71b3",
          "url": "https://web.archive.org/web/20260917173134/https://www.w3.org/WAI/WCAG22/Understanding/error-suggestion.html",
          "timestamp": "20260917173134"
        }
      }
    ],
    "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"
    ]
  }
}