JQuery Validate Form Validation usage method

If you need to modify these hints, you can add any information prompts that you want to display in the JS code.
We use the most common forms of registration verification as an example to illustrate:
First, you have a form, and you define the ID of the form.

<form action= "" method= "POST" id= "Login" >
<label> User name: </label><input name= "username" type= "text"/>
<label> Email Address: </label><input name= "Email" type= "text"/>
<label> Password: </label><input id= "password" name= "password" type= "password"/>
<label> Confirm Password: </label><input name= "Confirm_password" type= "password"/>
<input name= "Userinfosub" type= "Submit" value= "submitted"/>
</form>

Then introduce the following four JS files:
<script src= ". /js/jquery.js "type=" text/Web Effects "></script>
<script src= ". /js/jquery.validate.js "type=" Text/javascript "></script>
<script src= "./js/jquery.metadata.js" type= "Text/javascript" ></script>
<script src= "./js/messages_cn.js" type= "Text/javascript" ></script>

Then customize a JS file, the contents of this JS file are as follows:
$ ("#login"). Validate ({
Rules: {
Username: {
Required:true,
Minlength:2
},
Email: {
Required:true,
Email:true
},
Password: {
Required:true,
Minlength:6
},
Confirm_password: {
Required:true,
Minlength:6,
Equalto: "#password"
}
},
Messages: {
Username: {
Required: "<span style= ' color:red ' > Please enter user name </span>",
Minlength:jquery.format ("<span style= ' color:red ' > username is incorrect, should be in 2 characters or four characters </span>")
},
Email: {
Required: "<span style= ' color:red ' > Please enter email address </span>",
Email: "<span style= ' color:red ' > Please enter the correct email address </span>"
},
Password: {
Required: "<span style= ' color:red ' > Please enter password </span>",
Minlength:jquery.format ("<span style= ' color:red ' > The password you entered is incorrect, should be in 6-bit or 6-bit characters </span>")
},
Confirm_password: {
Required: "<span style= ' color:red ' > Please enter confirmation password </span>",
Minlength:jquery.format ("<span style= ' color:red ' > The password you entered is incorrect, should be in 6-bit or 6-bit characters </span>"),
Equalto: "<span class= ' Fred ' > two times input password inconsistency </span>"
}
}
});

It was found from a forum.

The simplest example, for example, is that we have a form:

<form action= "" method= "Get" id= "frm" >
<table>
<tr>
<td> User name </td>
<td><input type= "text" name= "username" id= "username"/><em>*</em></td>
<tr>
<tr>
<td> Email </td>
<td><input type= "text" name= "email" id= "email"/><em>*</em></td>
</tr>
<tr>
&LT;TD colspan= "2" ><input type= "Submit" value= "go!"/></td>
</tr>
</table>
</form>

In this form, there are two fields of user name and e-mail. They are all non-null, and the email needs to be a well-formed address. The simplest way to use validation is to introduce the jquery and jquery validation js files. Then add class to two input:

<input type= "text" name= "username" id= "username" class= "required"/>
And
<input type= "text" name= "email" id= "email" class= "required email"/>

Then, in the read event of document, add the following method:
<script>
$ (document). Ready (function () {
$ ("#frm"). Validate ();
}
</script>

    So, when a form is submitted, it is validated against the class specified by input. If it fails, the form's submission is blocked. Also, the prompt is displayed after the input.
    However, this doesn't feel good, because the validation rules invade our HTML code. Another way is to use "rules". We remove those validations from input with class. Then modify the document's Ready Event response code:
   

$ (document). Ready (function () {
        $ ("#frm"). Validate ({
            rules:{
                 Username: "Required",
                 email:{
                     Required:true,
                     Email:true
                    }
           }
          });
   });

In this way, the same effect can be achieved.
The next problem, then, is that the error message displayed is the default. We need to use a custom hint:

$ (document). Ready (function () {
$ ("#frm"). Validate ({
rules:{
Username: "Required",
email:{
Required:true,
Email:true
}
},
messages:{
Username: "Please enter your username",
email:{
Required: "Please enter your email address",
Email: "Enter a properly formatted email address"
}
}
});
});

What if we want to load the error message into the EM tag behind the input? All we need to do is add the Errorplacement item to the Validate options parameter:

$ (document). Ready (function () {
$ ("#frm"). Validate ({
rules:{
Username: "Required",
email:{
Required:true,
Email:true
}
},
messages:{
Username:function () {},
email:{
Required: "Please enter your email address",
Email: "Enter a properly formatted email address"
}
},
Errorplacement:function (Error, Element) {
Error.appendto (Element.next ("em"));
}
});
});

Now, let's add a minimum and maximum limit to username:
$ (document). Ready (function () {
$ ("#frm"). Validate ({
rules:{
username:{
Required:true,
Minlength:3,
Maxlength:15
},
email:{
Required:true,
Email:true
}
},
messages:{
username:{
Required: "Please enter your username",
Minlength:jquery.format ("User name cannot be less than {0} characters"),
Maxlength:jquery.format ("username length cannot exceed {0} characters")
},
email:{
Required: "Please enter your email address",
Email: "Enter a properly formatted email address"
}
},
Errorplacement:function (Error, Element) {
Error.appendto (Element.next ("em"));
}
});
});