内置验证和UX错误
1）原则
1.前瞻性帮助，不是惩罚。我们显示如何在错误之前正确输入。
2.不要丢失数据。任何错误都不会破坏输入的；支持取消/重复。
3.放映时间。
输入前：helper text（规则和示例）。
在此期间：柔软的hints/面具/自动安装。
之后（blur/submit）：带有"如何修复"指令的明显错误。
4.节省注意力。一条消息是一个原因和行动。
5.可用性。文本+图标/颜色，通过ARIA与字段通信，聚焦于第一个错误字段。
2）验证层
客户同步：格式,长度,强制性,掩码。快速便宜。
客户端异步：登录的唯一性，BIN/IBAN验证，API提示。与混乱。
服务器：业务规则，限制，风险评分，授权/权利。最后的真理。
规则：即使经过完美的客户端验证,服务器也会确认并生成最终文本。
3）计时和借记
Blur上的验证→ 100毫秒≤即时支脚。
异步检查-输入停止后250-400毫秒。
成功证明是简洁的（"Ok"）或绿色图标；没有"致敬"。
在"submit"上，我们显示了一个错误列表，并将重点转移到第一个。
js const debounce = (fn, ms=300)=>{let t;return (...a)=>{clearTimeout(t);t=setTimeout(()=>fn(...a),ms)}}4）文桉撰写错误
Template：原因→如何修复→替代方桉（如果有）。
好的："密码短于8个字符。添加更多字符或使用短语"。
好吧："IBAN看起来不正确。检查长度和字符：A-Z, 0-9"。
不好： "错误的输入。"
不要责怪用户；避免行话和代码。
在敏感区域（付款/CUS），我们避免透露安全性的细节。
5）消息显示模式
5.1在字段（inline）
`aria-invalid="true"`, текст в `aria-describedby`.
简而言之，具体来说；没有长段落。
颜色+图标，但含义在文本中。
5.2表格下方（摘要）
列出所有锚到字段的错误。
「跳至错误」/按一下项目按钮可传送焦点。
5.3在发送过程中
我们阻止重击（state "busy"）。
在3-5 s的时间表中-"等待确认"……安全重播。
6）口罩，自动故事和校正器
掩码不应干扰插入/编辑。允许自由输入，在引擎盖下规范化。
自动操作：显示格式示例,placeholder作为提示而不是"必需"部分。
正常化：空格分流、寄存器统一、自动格式（例如：'+1 （___） ___-____'）-但在原始数据中保留"干净"版本。
7）可用性（A11y）
链接："label" ↔ "input"，"aria-describedby"中的错误。
关键是'role='alert'，信息是'role='status'。
让我们把注意力放回错误的领域，"：focus-visible"看到。
AA ≥文本/图标的对比；含义并不仅仅取决于颜色。
html
<label for="email">Email</label>
<input id="email" name="email" aria-describedby="email-help email-err">
<small id="email-help">Например: user@domain.tld</small>
<p id="email-err" class="field-error" role="alert" hidden>Проверьте формат email</p>8）国际格式和本地化
名称/地址：允许不同的字母、长度、撇号、连字符。
日期/货币/数字：使用本地输入格式和严格的内部存储结构（ISO/美分数）。
电话：以国际"+CC"格式输入，全国汽车故事。
消息语言：简短，文化中立；书签+20-30%的行长度。
9）安全和隐私
请勿显示帐户存在/不存在-通用文本： "如果注册了电子邮件,我们将发送电子邮件。"
掩盖敏感数据（PAN、护照）。
在关键步骤（费率/付款）上,使用等效性和"安全重播"。
Logi-消息中没有PII的ID相关性。
10）保持进展
自动草稿（本地/服务器）。
如果发送错误，表格将保持完整；建议稍后重播。
使用多字节过程（KYC）-保存已完成的步骤。
11）异步验证
Debowns 250-400毫秒；我们在场附近显示"检查"……而不阻挡整个屏幕。
清晰的成功指示/不执行任何布局的"抽搐"。
网络定时→"无法验证。继续冒险吗？"（如果允许）或"重复"。
js const checkUsername = debounce(async (v)=>{
state.usernameChecking = true;
const ok = await api.unique('username', v).catch(()=>null);
state.usernameChecking = false;
state.usernameValid = ok === true;
}, 300);12）支付表格和KYC（具体）
地图：PAN格式，期限，CVC-输入时的验证；错误-没有披露银行拒绝的原因。
A2A/钱包：通过国家/限制进行允许性检查，关于佣金/时间表的明确文本。
KYC：对照片/文件的逐步要求，预览，文件大小/类型，验证时间，隐私。
负责任的游戏：消息是中立的，具有"设置限制"/"帮助"操作。
13）反模式
显示"每个字符"的错误而不会出现故障。
错误时重置表单。
未指定字段/规则的"错误输入"消息。
关键信息仅为颜色/图标。
锁定整个页面以检查一个字段。
网络故障时缺少离线模式和重播。
14）设计系统令牌（示例）
json
{
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100,
"asyncTimeoutMs": 5000,
"summaryMaxItems": 6
},
"a11y": {
"useAriaDescribedby": true,
"errorRole": "alert",
"statusRole": "status"
},
"visual": {
"fieldGap": 8,
"iconSize": 16,
"borderRadius": 10
}
}15）实现的嗅探
带有inline验证器的字段（格式+服务器验证）：js const rules = {
email: v => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) "Проверьте формат email"
};
async function validateEmail(v){
const fmt = rules.email(v);
if (fmt!== true) return fmt;
try {
const r = await fetch(`/api/email/check?v=${encodeURIComponent(v)}`);
const { allowed } = await r.json();
return allowed? true: "Этот email недоступен. Выберите другой.";
} catch {
return "Не удалось проверить. Повторите позже.";
}
}ts function focusFirstError() {
const err = document.querySelector('[aria-invalid="true"]');
if (err) err.focus({ preventScroll:false });
}js const saveDraft = debounce(form => localStorage.setItem('draft', JSON.stringify(Object.fromEntries(new FormData(form)))), 500);
form.addEventListener('input', ()=>saveDraft(form));16）度量与控制
时间到修复（从错误到修复的时间）。
字段和原因（格式/限制/服务器）的错误率。
重新发送（返回成功率）。
抛出的形状比例和步幅深度。
线索填充：CTR"阅读更多",线索隐藏的频率。
17） QA支票清单
A11y
- 焦点转移到第一个错误的领域；"aria-describedby"/"aria-invalid"展出。
- AA ≥对比；消息不仅取决于颜色。
行为行为
- 内置的debouns验证；错误不会出现在blur之前（关键掩码除外）。
- 在submit上形成摘要,字段不会清除。
- 异步检查不会阻止页面；有一个时间表和重复。
文本
- 原因+如何修复；没有代码/过失。
- 本地化不会破坏布局；实例是相关的。
安全性
- 报告中没有泄漏PII；不透露帐户的存在。
- 关键操作的幂等性。
18）设计系统中的文档
组件："FieldError"，"FormSummary"，"HelperText"，"BusyButton"。
典型字段的规则卡（电子邮件、电话、密码、地址、IBAN、日期）。
Gaids通过借记，异步检查和离线行为。
常见错误的文本模板和"前/之后"示例。
简短的摘要
内置验证是关于谓词帮助，清晰的说明和对数据的谨慎对待。在本地和服务器上进行检查,在适当的时间显示错误,并采取特定的行动,尊重可用性和隐私,保持进度,并使用借记。因此，形式变得友好，错误变得快速和可纠正。