內置驗證和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通過借記，異步檢查和離線行為。
常見錯誤的文本模板和「前/之後」示例。
簡短的摘要
內置驗證是關於謂詞幫助，清晰的說明和對數據的謹慎對待。在本地和服務器上進行檢查,在適當的時間顯示錯誤,並采取特定的行動,尊重可用性和隱私,保持進度,並使用借記。因此，形式變得友好，錯誤變得快速和可糾正。