Form Validation
表单校验
Aliases:表单校验输入报错实时校验表单验证输入错误提示红框报错
What is it
Checks input validity during typing or at submit and surfaces errors right next to the offending field. The goal is to tell users, with minimal interruption and maximum locality, what went wrong and how to fix it — instead of bouncing them back with a page of errors after submit.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Signup, login and checkout flows where correctness gates progress
- Fields with clear format rules (email, phone, password)
- Long forms where problems must surface before submit
✕ When not to use
- Aggressively flagging mid-typing, before input is plausibly complete
- Preference-style fields with no right or wrong answer
- Vague messages like "invalid input" that users cannot act on
Variants
On blur
失焦校验
Validate on leaving the field, least intrusive
Live
实时校验
Validate as you type, fastest but watch the timing
On submit
提交校验
Check all at submit and jump to the first error
Implementation
:focusaria-invalidtransition-colors[role=alert]Mark invalid fields with aria-invalid and a red outline; attach error text via role="alert" or aria-live="polite". Suggested timing: validate live after first blur, re-check everything on submit and focus the first invalid field. Messages must state the cause and the fix, never just "invalid". A green check confirms valid input in real time.
Compare
Full comparison →| Form Validation表单校验 | Alert警告提示 | Toast轻提示 | |
|---|---|---|---|
| Interruption | Low — inline errors, typing flow preserved | Medium — visible in the flow, not blocking | Low — brief and non-blocking |
| Persistence | High — error persists beside the field until fixed | High — persists until resolved or dismissed | Low — auto-dismisses in seconds |
| Error pinpointing | Pinpoints the exact field and reason | Medium — explains cause and scope | Poor — no field-level context |
Related concepts
A single-line bordered field for collecting text — the basic unit of every form. Placeholder hints the expected format, focus highlights the border to guide the eye, and failed validation switches to an error color with a hint. Prefix and suffix icons or a clear button can live inside, and the value is controlled state.
ComponentsUsed withA small message bar that appears in a viewport corner and dismisses itself, reporting an operation result (saved, copied, upload done). Non-blocking, usually with one action (undo, view), lingering for about 3–5 seconds before fading out.
ComponentsAlternativeAn inline, status-coloured banner inside the page flow for messages that must be seen: errors, warnings, important notices. It takes layout space instead of overlaying, and stays until the issue is resolved or the user dismisses it.
ComponentsAlternativeThe text on the page is itself the editor: a click swaps it for an input in place, Enter or blur commits, Escape cancels — what you fix is what you see. It solves the overhead of a full edit page for tiny changes, driving the cost of a correction down to a single click, ideal for quick single-field revisions.
PatternsSimilarWhen a list or page has no data, don't leave a void — fill it with an illustration, one sentence of explanation and a clear next action. It solves the "blank screen" problem where users can't tell what happened or what to do next, turning dead space into a starting point: onboarding for first use, a way out for fruitless searches.
PatternsSimilar