The effect is as follows:
The solution to this problem is to specify the error information to a specific location. The parameters of the validate () method can be customized. The sample code is as follows:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
JQuery. validator. addMethod ("regex", // addMethod 1st parameters: Method Name
Function (value, element, params) {// addMethod 2nd parameters: verification method,
// Verification method parameter (value of the verified element, verified element, parameter)
Var exp = new RegExp (params); // instantiate a regular object. The parameter is the regular expression passed in by the user.
Return exp. test (value); // test whether a match exists.
},
"Format error ");
$ (Function (){
$ ("# SignupForm"). validate (
{
Rules :{
TxtPassword1: "required", // password 1 is required
TxtPassword2: {// The description of password 2 is more than one object type.
Required: true, // required. It can be an anonymous method.
Failed to: "# txtPassword1", // it must be the same as password 1
Rangelength: [5, 10], // Length 5-10
Regex: "^ \ w + $" // use custom verification rules
},
TxtEmail: "email", // the email address must be valid.
Sex: "required"
},
Messages: {// corresponding to the preceding error message
TxtPassword1: "You must enter ",
TxtPassword2 :{
Required: "You must enter ",
Failed to: "inconsistent passwords ",
Rangelength: "The length must be a string between {0} and {1 ",
Regex: "passwords can only contain numbers, letters, and underscores"
}
},
// Add a part in the preceding example
ErrorPlacement: function (error, element) {// specifies the location of the error message
If (element. is (': radio') | element. is (': checkbox') {// if it is radio or checkbox
Var eid = element. attr ('name'); // gets the name attribute of an element.
Error. appendTo (element. parent (); // Add the error message to the end of the parent node of the current element
} Else {
Error. insertAfter (element );
}
},
Debug: false, // The form is not submitted if it is modified to true
SubmitHandler: function (){
Alert ("submitted ");
}
});
});
</Script> <p>
<Label for = "sex">
Gender </label>
<Input type = "radio" id = "rdoFemale" name = "sex"/> male
<Input type = "radio" id = "rdoMale" name = "sex"/> female
</P>
The running result is as follows:
In addition, if debug: true is added to the parameter, the debugging form is used only and will not be submitted to the server. submitHandler: function () {} will execute some operations before the form is submitted to the server; remote can be used for Ajax verification, as if there is a small bug; ASP is used. NET and validate may have some problems when used in combination. For more information, see the blog post of netizens.
Source code download