如何正确的设计表单验证
9/13/2016 · 2 min read
A long time ago, a programmer told me that "any product is inseparable from addition, deletion and review".Not necessarily, but most of the products are applicable, so today I would like to say "increase".
The so-called "increase" is to fill in the form, the actual scene can be "purchase", "submit personal information" and so on.
In order to ensure that the information is complete and correct, we need to add form verification.
Good form validation should be instant feedback and let you know what's wrong.
Here is my summary: __ keep_0 __
Q: What is instant feedback?
A: The text input box prompts the toast user about the error immediately after losing focus.
Q: What is a non-modal prompt?Why use non-modal cues?
A: Rich visual modeless feedback (RVMF) means that users can see and understand the feedback without doing special operations or switching modes.The usage scenario is that when multiple errors occur, * * toast can only prompt one error, while non-modal prompts can clearly let the user know multiple errors without disturbing the user. * *
Q: Why are there two triggers?
A: Generally speaking, * * losing focus is immediate and is only responsible for verifying one input message * *; while * * the verification triggered by the submit button is the verification of the entire page * *, if there is an error message, the first message of the error will be toast, the otherErrors are prompted with a non-modal hint.
Q: What do I need to pay attention to when designing form validation?
A: If it is a login page, the restrictions are relatively small, and the input content is also small.You can replace part of the form verification directly through the "Submit button status" (eg: no input, the submit button is not clickable, when the content is input, the submit button is clickable.)
Q: How are validation rules defined?
A: Determine the * * length and format of the information you need, based on your business needs and the beauty of the display. * *
The following diagram shows the rules I have defined: