The JQuery validate plug-in implements the form's powerful verification capabilities _jquery

The JQuery validate plug-in bundles a set of useful authentication methods, including URL and email authentication, while providing an API for writing user-defined methods. All bundled methods use English as an error message by default and are translated into 37 other languages.

first section: jQuery Validation makes validation so easy

First, the website download jquery, and jquery validation plugin
Ii. Introduction of documents

<script src= "Js/jquery-1.8.0.min.js" type= "Text/javascript" ></script> 
<script src= "js/" Jquery.validate.js "type=" Text/javascript "></script> 

Third, next, declare the following HTML fragment

<form action= "" id= "Jvform" > 
 name: <input type= "text" name= "username" id= "username" class= "required"/> </br> 
 Password: <input type= "password" name= "password" id= "password" class= "Required 
 "/></br> <input type= "Submit" value= "submitted"/> 
</form> 

Through the above code, you will find that we have to each input is added class= "required"
His role is to prompt the user for an error when the Inpute tag is empty.
Finally, we have to find an entry point for our framework.

<script type= "Text/javascript" > 
 $ (function () { 
  $ ("#jvForm"). Validate (); 
</script> 

Operation effect is as follows

Of course, the message is in English by default, and can be modified in jquery.validate.js according to need.

Section II:jQuery validation makes validation so easy

In the previous example we are a unified reference jquery.validate.js so all the required fields will be prompted with the This field is required.
Now to change to a dynamic hint, such as the name if empty, the prompt name can not be null, if the password is blank, the hint password can not be empty.
This time we officers transferred Guevara the rules in the code.
First, we'll introduce the file first.

<script src= "Js/jquery-1.8.0.min.js" type= "Text/javascript" ></script> 
<script src= "js/" Jquery.validate.js "type=" Text/javascript "></script> 

Next, declare the following HTML fragment

<form action= "" id= "Jvform" > 
 name: <input type= "text" name= "username" id= "username"/></br> 
 Password: <input type= "password" name= "password" id= "password"/></br> "<input" type= " 
 submit" value= "submitted"/ > 
</form> 

No class= "required" compared to the previous ones.
The final checksum rule is as follows:

$ (function () { 
 $ (' #jvForm '). Validate ({ 
  rules: { 
   username: { 
    required:true 
   }, 
   Password: { 
    required:true 
   } 
  }, 
  messages: { 
   username: { 
    required: "Name cannot be empty!" 
   }, 
   Password: { 
    required: "Password cannot be empty!}}}) 
 ; 
" 

Operation effect is as follows

Section III:jQuery validation makes validation so easy

The following code makes a simple demo of the jquery validation including required fields, character lengths, and formatting validation
I. Introduction of documents

<script src= "Js/jquery-1.8.0.min.js" type= "Text/javascript" ></script> 
<script src= "js/" Jquery.validate.js "type=" Text/javascript "></script> 

II. Declaration of HTML fragments

<form action= "" id= "Jvform" > Username 
  : <input type= "text" name= "username"/></br> 
  password: <input type= "password" name= "password" id= "password"/></br> 
  Confirm Password: <input type= "password" name= "Confirm_" Password "/></br> 
  birthplace: <select name=" Address "><option value=" ">--</option>< Option value= "1" > Beijing </option> 
 <option value= "1" > Shanghai </option><option value= "1" > Shenzhen < /option></select></br> 
  Mobile: <input type= "text" name= "mobile"/></br> 
  mailbox:< Input type= "text" name= "email"/></br> 
  <input type= "Submit" value= "submitted"/> 
</form> 

Three, error hint style

<style type= "Text/css" > 
 label.error{font-size:12px;font-weight:normal;color: #ff0511; margin-left:10px ;} 

Four, validating code

<script type = "Text/javascript" > $ (Function () {$ ("#jvForm"). Validate ({rules: {username: {//user name must be filled at least 3 
   Bit required:true, minlength:3}, Password: {//password required at least 6 digits required:true, minlength:6},  Confirm_password: {//Password confirmation required:true, Equalto: "#password"}, Address: {//place of birth must fill required: True}, Mobile: {//Mobile required verification format required:true, mobile:true}, email: {//email required validation format requ Ired:true, Email:true},}, messages: {username: {required: "User name cannot be empty!", minlength: "User name 
   At least three bits! "}, Password: {required:" Password cannot be empty! ", minlength:" Password at least six digits! " 
   }, Confirm_password: {required: "Password confirmation cannot be empty!", Equalto: "Two input passwords inconsistent!" 
   Address: {required: "Please choose the place of Birth!",}, Mobile: {required: "Mobile phone cannot be empty!", Mobile: "Phone format is not correct",}, 
Email: {Required: "Mailbox cannot be empty!", email: "Incorrect mailbox Format",},}); }) </scripT> 
 

because there is no mobile authentication in the jquery.validate.js, you need to add a
first to find messages in the box below:

 messages: {required: "This field are required.", Remote: "Please fix this field.", E Mail: "Please enter an valid email address.", url: ' Please enter a valid URL. ', Date: "Please enter a valid date.", D Ateiso: "Please enter a valid date (ISO).", Number: "To enter a valid.", Mobile: "Fill in the correct cell phone numbers.", Digits: " Please enter only digits. ', CreditCard: ' Please enter a valid credit card number. ' Equalto: ' Please enter the same VA Lue again. ", MaxLength: $.validator.format (" Please enter no more than {0} characters. "), MinLength: $.validator.format ("Please enter in least {0} characters."), Rangelength: $.validator.format ("Please enter a value between {0} and {1} cha Racters long. "), Range: $.validator.format (" Please enter a value between {0} and {1}. "), Max: $.validator.format (" plea Se Enter a value less than or equal to {0}. ", Min: $.validator.format (" Please enter a value greater than or equal to {0 }.") 
} 

then add the methods in the Mobile's regular checksum

Mobile:function (value, Element) {return 
 this.optional (element) | | |/^1[3|4|5|8][0-9]\d{8}$/.test (value); 
} 

Run effect

The above is for you to show the jquery Validate plug-ins for the form provides a powerful verification function, I hope you like.