Shulou(Shulou.com)05/31 Report--

Today, Xiaobian to share with you how to use JavaScript to achieve form verification function of the relevant knowledge, detailed content, clear logic, I believe that most people are too aware of this knowledge, so share this article for your reference, I hope you will learn something after reading this article, let's take a look at it.

Text box check

The following are the steps for verifying the text box.

1. Get the value value of the text box to be checked

two。 Set the decision condition on the value value, using if statement or switch statement to achieve.

3. If the condition is met, the verification passes, and the return value is true.

4. If the condition is not met, the return value is false, replacing the text to output the check prompt.

5. The form gets the return value of multiple validations, performs a logical operation, and passes the parameters to the onsubmit event of the form form.

6. When I call the check function in input, I use the onblur event to trigger the check function.

Drop-down box check

The check of the drop-down box is slightly different from that of the text box. The return value of option in the drop-down box is value, and the user's choice is obtained by the name value in select, so the value in the select is obtained through id in the check function of the drop-down box. Different judgments are made according to whether the value value is empty or for other illegal values, and the remaining steps are the same as the text box.

The form verification style is as follows:

Problems encountered

There is a problem validating the form, but the form can still be submitted?

Reason: the onsubmit event has a default parameter as a submission action. The default value of this parameter is true. As mentioned earlier, return true if the condition is met, otherwise return false. A Boolean return value must be set in each check. If all the verifications are passed, the form can be submitted normally. As long as one item does not meet the condition and cannot submit the form, it needs to be re-entered. Therefore, it is necessary to do a logical operation on the return value of each check function. If all is true, the final value returned to onsubmit is true, otherwise it is false, and the parameter of onsubmit is false, which cannot be submitted, so it is implemented to prevent submission when the form verification fails.

Enter the wrong content at the beginning, but the prompt is still the previous prompt after the modification is changed to the correct content?

Reason: when the return value is true, the text content of the output prompt message is set to empty, that is, document.getElementById ("what") [xss_clean] = ""

Both onchange and onblur events can be used to trigger the check, and both will implement the check after losing focus, but when onblur triggers the check, it is possible that the input does not meet the requirements due to the user's intermittent input.

The js code snippet for form validation cannot be loaded after the pages have been loaded.

Code block

The following is the program source code:

Function validateUsername () {var input = document.myform.userName.value; if (input = "" | | input = = null) {document.myform.userName.focus (); document.getElementById ("uname") [xss_clean] = "user name cannot be empty!"; return false;} else if (input.length > 5 | | input.length12 | | password.length password: real name: grouping:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.