JQuery Validate form validation Getting started learning _jquery

This article describes the basics of the introduction to jquery Validate form validation, the jquery Validate plug-in provides a powerful validation for forms, makes client form validation simpler, and provides a wide range of customization options to meet the needs of your application, as the following is all about this article , to share with you.

1, Import JS Library

<script src= ". /js/jquery.js "type=" Text/javascript "></script>
<script src=". /js/jquery.validate.js "type=" Text/javascript "></script>

2. Default checksum rule

3, the default prompts

Messages: {required: ' This field is required. ', Remote: ' Please fix this field. ', email: "Please enter a valid email Address. ', url: ' Please enter a valid URL. ', Date: ' Please enter a valid date. ', Dateiso: "Please enter a valid date (I "", Datede: "Bitte geben Sie ein gültiges Datum.", Number: "Please enter a ein number.", valid: "Numberde bitte N Sie eine Nummer ein. ", Digits:" Please enter only digits ", CreditCard:" Please enter a valid credit card number. "And EQ Ualto: "Please enter the same value again.", Accept: "To enter a value with a valid extension.", MaxLength: $.valida Tor.format ("Please enter no further than {0} characters."), MinLength: $.validator.format ("Please enter at least {0} charact ERs. "), Rangelength: $.validator.format (" Please enter a value between {0} and {1} characters long. "), Range: $.validator  . Format ("Please enter a value between {0} and {1}."), Max: $.validator.format ("Please enter a value less than or equal to {0}. "), min: $.validatOr.format ("Please enter a value greater than or equal to {0}.")},
 

If you need to modify, you can add in the JS code:

Jquery.extend (jQuery.validator.messages, {
 required: "Required fields",
 remote: "Please fix this field",
 email: "Please enter the correct format email",
 URL: "Please enter a valid URL", date
 : "Please enter a valid date",
 dateiso: "Please enter a valid date (ISO).",
 Number: "Please enter the legal numbers",
 digits: " Only integers can be entered,
 creditcard: "Please enter a valid credit card number", Equalto: "Please enter the
 same value again",
 Accept: "Please enter a string with a valid suffix name",
 maxlength: JQuery.validator.format ("Please enter a string with a maximum length of {0}"),
 Minlength:jQuery.validator.format ("Please enter a string with a length of at least {0}"),
 Rangelength:jQuery.validator.format ("Please enter a string between {0} and {1}"),
 Range:jQuery.validator.format (" Please enter a value between {0} and {1} ",
 Max:jQuery.validator.format (" Enter a value of max {0} "),
 Min:jQuery.validator.format (" Please enter a value of min {0}
});

The recommended practice is to put this file in Messages_cn.js and introduce it in the page:
<script src= ". /js/messages_cn.js "type=" Text/javascript "></script>
4, the use of the way
1), officers transferred Guevara rules written to the control

<script src= ". /js/jquery.js "type=" Text/javascript "></script> <script src=". /js/jquery.validate.js "type=" Text/javascript "></script> <script src=". /js/jquery.metadata.js "type=" Text/javascript "></script> $ (). Ready (function () {$ (" #signupForm "). Validate
();


}); <form id= "Signupform" method= "Get" action= "" > <p> <label for= "FirstName" >Firstname</label> &L T;input id= "FirstName" name= "FirstName" class= "required"/> </p> <p> <label for= "email" >e-mail&lt ;/label> <input id= "email" name= "email" class= "required email"/> </p> <p> <label for= "Passwor D ">Password</label> <input id=" Password "name=" Password "type=" Password "class=" {required:true, Minlength:5} "/> </p> <p> <label for=" Confirm_password "> Confirm password </label> <input id=" confirm _password "Name=" Confirm_password "type=" password "class=" {required:true,minlength:5,equalto: ' #password '} '/> </p> <p> <input class= "Submit" type= "submit" value= "Submit"/> </p> </form>

The package must be introduced in the way class= ' {} ' is used: jquery.metadata.js.
You can modify the hint by using the following methods:

Class= ' {required:true,minlength:5,messages:{required: ' Please enter the content '}} '

When using the Equalto keyword, the following must be enclosed in quotation marks, as shown in the following code:

Class= "{required:true,minlength:5,equalto: ' #password '}"

2), officers transferred Guevara rules written in the JS code

$ (). Ready (function () {
 $ ("#signupForm"). Validate ({
  rules: {
 FirstName: "Required",
 email: {
 Required:true,
 email:true
 },
 password: {
 required:true,
 minlength:5
 },
 confirm_ Password: {
 required:true,
 minlength:5,
 equalto: "#password"
 }
 },
  messages: {
 FirstName: "Please enter your name",
 email: {
 required: "Please enter your email address",
 email: "Please enter the correct email address"
 },
 password: {
 Required: "Please enter password",
 minlength:jQuery.format ("Password cannot be less than {0} characters")
 },
 Confirm_password: {
 Required: " Please enter confirmation password ",
 minlength:" Confirm password cannot be less than 5 characters ",
 Equalto:" Two input password inconsistent inconsistent "}}
);

Messages, if a control does not have a message, the default information is invoked

<form id= "Signupform" method= "Get" action= "" >
 <p>
  <label for= "FirstName" >firstname</ label>
  <input id= "FirstName" name= "FirstName"/>
 </p>
 <p>
 <label for= " Email ">E-Mail</label>
 <input id=" email name= "email"/>
 </p>
 <p>
 < Label for= "Password" >Password</label>
 <input id= "password" name= "password" type= "password"/>
 </p>
 <p>
 <label for= "Confirm_password" > Confirm password </label>
 <input id= " Confirm_password "Name=" Confirm_password "type=" password "/>
 </p>
 <p>
  <input Class= "Submit" type= "submit" value= "Submit"/>
 </p>
</form>

Required:true must have a value.
Required: The value of the "#aa: Checked" expression is true, you need validation.
Required:function () {} returns True, indicating that validation is required.
The two types that are commonly used in the form are elements that need to be filled in or not filled in at the same time.

This is the full content of this article, all introduced the jquery validate form verification primer, and then there is an in-depth study of jquery validate form validation, I hope you continue to pay attention to.