Jquery Form verification control: Form-Validate example

When you log on to the registration module, we need to ask the user to fill in the information according to our rules. If the information is verified directly after the information is submitted, the form-validate control is a powerful form verification control, including simple rule verification and asynchronous verification, the control can customize verification rules. it is convenient and practical.

After downloading form-validate from the official website, introduce the jquery. validate. min. js file on the page. Note: Before this, you must first introduce the Jquery library;

<Script src = "/js/jquery. min. js" type = "text/javascript"> </script>
<Script src = "/js/jquery. validate. min. js" type = "text/javascript"> </script>

Form elements to be verified

<Div class = "form-group">
Username: <input type = "text" id = "username" name = "username"/>
</Div>
<Div class = "form-group">
Password: <input type = "password" id = "password" name = "password"/>
</Div>
<Div class = "form-group">
Confirm password: <input type = "password" id = "repassword" name = "repassword"/>
</Div>
<Div class = "form-group">
Email Address: <input type = "text" id = "email" name = "email"/>
</Div>

Define a js file and write verification code

// Custom verification rules
// Verify the username format
JQuery. validator. addMethod ("username", function (value, element ){
Var user =/^ [a-zA-Z] [w] {4, 16} $ /;
Return this. optional (element) | (user. test (value ));
}, "Starts with a letter, with 5-17 letters, numbers, and underscores '_'");

// Add subuser form verification
$ ('# Adduser'). validate ({
ErrorElement: 'span ', // default error message element
ErrorClass: 'help-block', // default error message class name
FocusInvalid: false, // The first form element that fails verification gets the focus

// Basic rule verification
Rules :{
Username :{
Required: true,
Username: true,
},
Password :{
Required: true,
Username: true
},
Repassword :{
Required: true,
Failed to: '# password'
},
Email :{
Required: true,
Email: true,
Remote :{
Url: 'checkemail. Php ',
Type: 'post ',
DataType: 'json ',
Data :{
Email: function (){
Return $ ('# email'). val ();
                        }
                    }
                }
            }
},

// Prompt message
Messages :{
Username :{
Required: 'user name cannot be blank'
},
Password :{
Required: 'Password cannot be blank'
},
Repassword :{
Required: "The password cannot be blank .",
Failed to: 'Incorrect password entered twice'
},
Email :{
Required: "The email address cannot be blank .",
Email: "enter an email address in the correct format ",
Remote: "This email address has been registered ."
            }
        }
});
});

At this point, a complete form verification has been completed. To ensure data accuracy, it is best to perform a verification at the end of the submission. If you cooperate with the verification code, it is more appropriate.