내장 검증 및 UX 오류
1) 원칙
1. 처벌이 아닌 예측 치료. 오류 전에 올바르게 입력하는 방법을 보여줍니다.
2. 데이터를 잃지 마십시오. 입력 된 오류가 발생하지 않습니다. 취소/재시도 지원.
3. 디스플레이의 순간.
입력하기 전에: 도우미 텍스트 (규칙 및 예).
동안: 소프트 힌트/마스크/자동 대체.
이후 (흐림/제출): "수정 방법" 명령어의 명확한 오류.
4. 주의 경제. 하나의 메시지는 하나의 이유와 하나의 행동입니다.
5. 접근성. ARIA를 통해 필드에 연결되는 텍스트 + 아이콘/색상은 첫 번째 잘못된 필드에 초점을 맞추십시오.
2) 검증 계층
클라이언트 동기식: 형식, 길이, 필수, 마스크. 빠르고 저렴합니다.
클라이언트 비동기식: 로그인 고유성, BIN/IBAN 확인, API 힌트. 폭파와 함께.
서버 룸: 비즈니스 규칙, 제한, 위험 점수, 승인/권한. 최후의 수단의 진실.
규칙: 이상적인 클라이언트 확인이 있어도 서버는 최종 텍스트를 확인하고 생성합니다.
3) 타이밍과 토론
흐림 → 즉각적인 피드백에 대한 검증
비동기 점검-입력 중지 후 250-400ms 직불 결제.
성공 확인 - 간결한 ("Ok") 또는 녹색 아이콘; "경례" 없이.
'제출' 에서 오류 목록과 초점을 첫 번째로 전송합니다.
js const debounce = (fn, ms=300)=>{let t;return (...a)=>{clearTimeout(t);t=setTimeout(()=>fn(...a),ms)}}4) 카피 라이팅 오류
템플릿: 이유 → 대안을 수정하는 방법 (있는 경우).
좋은: "암호는 8 자보다 짧습니다. 문자를 더 추가하거나 문구를 사용하십시오.
좋아: "IBAN은 제대로 보이지 않습니다. 길이와 문자 확인: A-Z, 0-9 ".
나쁜: "잘못된 입력".
사용자를 비난하지 마십시오. 전문 용어와 코드를 피하십시오.
민감한 영역 (지불/ASC) 에서는 안전성을 나타내는 세부 사항을 피합니다.
5) 메시지 표시 패턴
5. 1 현장에서 (인라인)
'aria-unless = "참"', текс달러 'aria-describedby'.
간단히, 구체적으로; 긴 단락없이.
텍스트에서 색상 + 아이콘이지만 의미입니다.
5. 2 양식 아래 (요약)
필드 앵커에 모든 오류를 표시합니다.
항목 교환시 "오류로 이동" 버튼/클릭은 초점을 이동합니다.
5. 3 전송 과정에서
누르는 것을 반복하십시오 (상태 '바쁜').
3-5 초의 타임 아웃- "확인을 기다리는 중"... 안전한 재생으로.
6) 마스크, 자동 팁 및 교정기
마스크는 삽입/편집을 방해해서는 안됩니다. 후드 아래에서 정규화되는 무료 입장이 허용됩니다.
자동 팁: "필요한" 부분이 아닌 샘플 형식, 자리 표시 자를 힌트로 표시하십시오.
정규화: 공간 트리밍, 레지스터 통합, 자동 형식 (예: '+ 1 (_ _ _) _ _ - _ _ _ _ _') -소스 데이터에 "깨끗한" 버전을 유지하십시오.
7) 가용성 (A11y)
링크: '라벨' '입력', 'aria-descripedby' 의 오류.
비판적인 - 'role = "arget"', 정보- 'role = "state"'.
우리는 잘못된 분야로 초점을 돌려줍니다.
텍스트/아이콘 대비 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, 여권).
중요한 단계 (입찰/지불) 에서는 dempotence와 "안전한 재생" 을 사용하십시오.
로그-메시지에 PII가없는 상관 ID가 있습니다.
10) 진행 상황 절약
초안 자원 조달 (로컬/서버).
제출 오류의 경우-양식이 계속 작성됩니다. 나중에 반복 제안.
KYC (Multi-Step Processes) 의 경우-완료된 단계를 저장하십시오.
11) 비동기 검증
Debowns 250-400 ms; 전체 화면을 차단하지 않고 필드 근처에 "확인"... 을 표시합니다.
레이아웃을 "경련" 하지 않고 성공/실패를 명확하게 표시합니다.
네트워크 타임 아웃 → "확인할 수 없습니다. 위험을 계속하고 싶습니까? (해당되는 경우) 또는 다시 시작하십시오
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) 구현 스 니펫
인라인 유효성 검사기가있는 필드 (형식 + 서버 확인):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-ununity' 세트.
- 대조 AA; 메시지는 색상 만 무관합니다.
행동
- 파기와 함께 내장 검증; 오류는 흐림 이전에 나타납니다 (중요한 마스크 제외).
- 제출물에 요약이 생성되고 필드가 지워지지 않습니다.
- 비동기 검사는 페이지를 잠그지 않습니다. 타임 아웃과 리플레이가 있습니다.
텍스트
- 이유 + 고치는 방법; 코드/죄책감 없음.
- 현지화는 레이아웃을 깨뜨리지 않습니다. 예는 관련이 있습니다.
안전
- 메시지에 PII 누출이 없습니다. 계정의 존재를 공개하지 마십시오.
- 중요한 운영에 대한 이념성.
18) 설계 시스템의 문서
구성 요소: 'FieldError', 'FormSummary', 'HelperTex', 'BusyButton'.
일반적인 필드 (이메일, 전화, 비밀번호, 주소, IBAN, 날짜) 에 대한 규칙 맵.
공개, 비동기 검사 및 오프라인 동작에 대한 가이드.
빈번한 오류 및 예제 전후 텍스트 템플릿.
간단한 요약
내장 검증은 예측 관리, 명확한 지침 및 데이터에 대한 신중한 태도에 관한 것입니다. 로컬 및 서버에서 확인하고 특정 작업으로 적시에 오류를 표시하고 가용성 및 개인 정보를 존중하며 진행 상황을 저장하고 청구서를 사용하십시오. 따라서 형태는 우호적이되고 실수는 빠르고 고칠 수 있습니다.