Jquery.validate Form Verification Plug-in usage method resolution _jquery

Why use jquery to validate this form validation plug-in: It's not easy to write a generic and full-featured jquery form verification plug-in. jquery Validate this jquery plugin can easily handle more than 95% of form validation, as follows

How to use

1. Use default validation rules in controls, examples:
e-mail (required)
<input id= "email" class= "required email" value= "email@"/>

2, you can customize the validation rules in the control, examples:
Custom (required, [3,5])

<input id= "complex" value= "HI" class= "{required:true,minlength:3, Maxlength:5, messages:{required
: ' Why not enter a bit of text ', minlength: ' Too little input ', maxlength: ' Input so much do '} '/>

3, through JavaScript custom validation rules , the following JS custom two rules, password and Confirm_password

$ (). Ready (function () {
 $ ("#form2"). Validate ({
 rules: {
  password: {
  required:true,
  minlength:5
  },
  Confirm_password: {
  required:true,
  minlength:5,
  equalto: "#password"
  }
 },
 messages: {
  password: {
  required: "No password is filled in",
  Minlength:jQuery.format ("Password cannot be less than {0} characters")
  },
  Confirm_password: {
  Required: "No confirmation password",
  minlength: "Confirm password cannot be less than {0} characters",
  Equalto: "Two times input password inconsistent"
  }
 }
 });
});

In addition to being set to True/false, required can also use expressions or functions, such as

$ ("#form2"). Validate ({The
 rules: {
 funcvalidate: {
 required:function () {return $ ("#password"). Val ()!= " ";}}}
 ,
 messages: {
 funcvalidate: {
 Required:" Must fill in the case of Password}}}
);

Html

Password <input id= "password" name= "password" type= "password"/>
Confirm Password <input id= "Confirm_password" name= "Confirm_password" type= "password"/>
Conditional validation <input id= "Funcvalidate" name= "funcvalidate" value= ""/>

4. use meta custom validation information

First use JS to set meta

$ ("#form3"). Validate ({meta: "validate"});

Html

Email<input class= "{validate:{required:true, Email:true, 
messages:{required: ' Enter email address ', email: ' You are not entering a valid mail address '}} '/>

5. use Meta to write validation rules in custom tags , such as validate

JS Settings meta

$ (). Ready (function () {
 $.metadata.settype ("attr", "validate");
 $ ("#form1"). Validate ();

Html

Email

Copy Code code as follows:

<input id= "Email" name= "Email" validate= "{required:true, Email:true, messages:{required: ' Enter email address ', email: ' You are not entering a valid mail address '} '/>

6. Custom Validation rules

For complex validation, you can add custom validation rules through JQuery.validator.addMethod

The additional-methods.js contained in the official website contains some commonly used verification methods, such as Lettersonly,ziprange,nowhitespace

Example

Character Validation 
JQuery.validator.addMethod ("UserName", function (value, Element) {return
 this.optional (element) | |/^ [\u0391-\uffe5\w]+$/.test (value);
}, "User name can only include Chinese characters, English letters, numbers, and underscores"); 

You can then use this rule
$ ("#form1"). Validate ({
 //validation rules
 : {
 userName: {
  required:true,
  Username:true,
  rangelength: [5,10]
 }
 },/
 * SET error message * *
 messages: {
 userName: {
  Required: "Please fill in username",
  rangelength: "username must be between 5-10 characters"}  
 }
; 

7,Radio, checkbox, select the way to verify similar

Verification of Radio

 Gender
<span>
 male <input type= "Radio" id= "Gender_male" value= "M" name= "gender" class= "{required:true}"/ ><br/>
 female <input type= "Radio" id= "Gender_female" value= "F" name= "gender"/>
</span>

Verification of CheckBox

Select at least two items

<span>
 options 1<input type= "checkbox" id= "Check_1" value= "1" name= "CheckGroup" 
 class= "{required:true , Minlength:2, messages:{required: ' must choose ', MinLength: ' Select at least 2 '}} '/><br/>
 option 2<input ' checkbox ' Id= "Check_2" value= "2" name= "CheckGroup"/><br/>
 option 3<input type= "checkbox" id= "Check_3" value= "3" Name= "CheckGroup"/><br/>
</span>

Validation of Select

Drop down box

<span>
 <select id= "Selectbox" name= "Selectbox" class= "{required:true}" >
 <option value= "" ></option>
 <option value= "1" >1</option>
 <option value= "2" >2</option>
 <option value= "3" >3</option>
 </select>
</span>

8.Ajax Verification

Remote can be used for AJAX validation

Remote: {
URL: "url",//url address
type: "POST",  //Send way
dataType: "JSON",//Data format: {//Data   to be passed C16/>username:function () {return
 $ ("#username"). Val ();

To authenticate users to a variety of information:

<script type= "Text/javascript" ></script>//Mobile number verification JQuery.validator.addMethod ("mobile", function (value,
 Element) {var length = Value.length; var mobile =/^ ((13[0-9]{1}) | ( 15[0-9]{1}) +\d{8}) $/return this.optional (element) | |
(length = = && Mobile.test (value)); 

}, "mobile phone number format error"); Phone number verification JQuery.validator.addMethod ("Phone", function (value, Element) {var Tel =/^ (0[0-9]{2,3}\-)? ( [2-9] [0-9] {6,7})
 + (\-[0-9]{1,4})? $/; return this.optional (Element) | |
(Tel.test (value));

}, "Phone number format error");
 ZIP Code verification JQuery.validator.addMethod ("ZipCode", function (value, Element) {var Tel =/^[0-9]{6}$/; return this.optional (Element) | |
(Tel.test (value));

}, "ZIP code format error");
 QQ Number Verification JQuery.validator.addMethod ("QQ", function (value, Element) {var Tel =/^[1-9]\d{4,9}$/; return this.optional (Element) | |
(Tel.test (value));

}, "QQ number format error"); IP Address authentication jQuery.validator.addMethod ("IP", function (value, Element) {var ip =/^ (?:(? : 25[0-5]|2[0-4][0-9]| [01]? [0-9] [0-9]?) \.) {3} (?: 25[0-5]|2[0-4][0-9]| [01]? [0-9] [0-9]?)
 $/; return this.optional (Element) | | (Ip.test (value) && (Regexp.$1 < 256 && regexp.$2 < 256 && regexp.$3 < 256 && Rege
Xp.$4 < 256));

}, "IP address format error");
 Letters and numbers are validated JQuery.validator.addMethod ("Chrnum", function (value, Element) {var chrnum =/^ ([a-za-z0-9]+) $/; return this.optional (Element) | |
(Chrnum.test (value));

"Only numbers and letters (characters A-Z, A-Z, 0-9)" can be entered;
 Chinese verification JQuery.validator.addMethod ("Chinese", function (value, Element) {var Chinese =/^[\u4e00-\u9fa5]+$/; return this.optional (Element) | |
(Chinese.test (value));

"Can only be entered in Chinese");

The dropdown box verifies $.validator.addmethod ("Selectnone", function (value, Element) {return value = = "Please select";}, "must select one");
 byte length validation jQuery.validator.addMethod ("Byterangelength", function (value, element, param) {var length = Value.length;
 for (var i = 0; i < value.length i++) {if (Value.charcodeat (i) > 127) {length++; } return This.optional (Element) | | (length >= param[0] && length <= param[1]);
 $.validator.format ("Make sure the value entered is between {0}-{1} bytes (2 bytes in one)");

Reference Learning: A powerful jquery.validate form verification plug-in

This article has been organized into the "jquery form verification Encyclopedia," Welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.