Jqurey validation Form verification using the detailed _jquery

is a good plug-in, it can verify the client form, and provides a number of customizable properties and methods, good scalability. This article is to understand the application of validation by explaining this example.

The validation that is involved in this example is:

User name: Length, character verification, repetitive Ajax validation (whether it already exists).

Password: Length verification, repeat input password verification.

Mail: Email address verification.

Fixed Telephone: Fixed telephone number verification in mainland China.

Mobile phone Number: China mainland mobile phone number verification.

Web address: Site URL verification.

Date: standard date format validation.

Number: integer, positive integer validation, digital range validation.

ID Card: Mainland ID card number verification.

Zip Code: Mainland ZIP code verification.

File: File type (suffix) validation, such as only allow uploading of pictures.

IP:IP address verification.

Verification Code: Verification Code AJAX verification.

How to use:

1. Prepare jquery and Jquery.validate Plug-ins

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

2. Prepare CSS Style

Page style I no longer elaborate, you can write a style, you can also see the demo page source code. The key style to emphasize here is the style to display the validation information

Label.error{color: #ea5200; margin-left:4px; padding:0px 20px 
; Background:url (images/unchecked.gif) no-repeat 2px 0} 
label.right{margin-left:4px; padding-left:20px; Background 

3, XHTML

 <form id= "MyForm" action= "#" method= "POST" > <table width= "100%" border= "0" ce llspacing= "0" cellpadding= "0" class= "mytable" > <tr class= "table_title" > <td colspan= "2" >jquery.valida tion form validation </td> </tr> <tr> <td width= "22%" align= "right" > username:</td> <td><in Put type= "text" name= "user" id= "user" class= "input required"/> <p> username is 3-16 characters, can be numbers, letters, underscores, and Chinese </p> </td> </tr> <tr> <td align= "right" > Password:</td> <td><input type= "Password" NA Me= "Pass" id= "pass" class= "input Required"/> <p> min Length: 6 max length:16</p> </td> </tr> <t r> <td align= "right" > Confirm password:</td> <td><input type= "password" name= "repass" class= "Input Requir" Ed "/></td> </tr> </table> </form> 

Limited to space, this article only intercepts a small part of the HTML code in the instance, the detailed XHTML code can be see the page demo source code. It is worth mentioning that I gave the label a "required" class style, and the following will refer to its role.

4, the application of validation plug-ins

How to invoke the validation plug-in:

$ (function () {    
  var validate = $ ("#myform"). Validate ({ 
     rules:{//define validation rules 
      ... 
     }, 
     messages:{// Define hint info ... 
     } 
  ) 

Rules: Defines a validation rule, in the form of Key:value, where the key is the element to be validated, and value can be a string or object. For example, verify the length of the username and not allow null:

rules:{ 
 user:{ 
   required:true, 
   maxlength:16, 
   minlength:3 
 }, 
 ... 

In fact, we in the XHTML code can directly specify the input class attribute to required, the role is not allowed to empty, so in the JS section does not have to repeat the writing. The same authentication email, set the input class attribute directly to email.

Messages: Defines the hint information, the form key of the Key:value is the element to be validated, the value is a string or function, and the message that is prompted when the validation does not pass.

messages:{ 
 user:{ 
   required: "User name cannot be empty!" ", 
   Remote:" The username already exists, please change another username! " 
 }, 
 ...... 

In this case, the validation JS is written in accordance with the rules above, validation plug-ins encapsulate a lot of basic authentication methods, as follows:

Required:true must have a value and cannot be empty

Remote:url can be used to determine whether a user name is already present, and the server -side output is true, indicating that validation passes

Minlength:6 Minimum length is 6

Maxlength:16 Maximum length is 16

Rangelength: Length Range

RANGE:[10,20] Value range is between 10-20

Email:true Authentication Message

Url:true Authentication URL URLs

Dateiso:true Validation date format ' Yyyy-mm-dd '

Digits:true can only be a number

Accept: ' gif|jpg ' only accepts pictures of GIF or JPG suffixes. Extensions that are commonly used to verify files

Equalto: ' #pass ' is equal to the value of the form field, which is often used to validate the repeated input password

In addition, I also based on the actual situation of the project to extend a few verification, validated code in Validate-ex.js, before using the need to load this JS. It can provide the following validation:

Username:true user name can only include Chinese characters, English letters, numbers, and underscores

Ismobile:true Mobile phone Number verification

Isphone:true Mainland Mobile phone number verification

Iszipcode:true ZIP Code Verification

Isidcardno:true Mainland ID Card number verification

Ip:true IP Address Verification

The verification methods provided above basically meet our requirements in most projects. If other special authentication requirements can be extended, methods such as:

JQuery.validator.addMethod ("Iszipcode", function (value, Element) {   
 var zip =/^[0-9]{6}$/;   
 return this.optional (Element) | | (Zip.test (value));   

Difficult Problem solving

1, in the project encountered in the verification of the existence of the user name, the discovery does not support Chinese input validation. My solution is to encodeuricomponent the user name code, backstage PHP to accept the value of the UrlDecode decoding

user:{ 
  remote: { 
     URL: "chk_user.php",//server-side validator 
     type: "POST",//Submission method 
     data: {user:function () { 
       Return encodeURIComponent ($ ("#user"). Val ()); Encoded Data 
     }} 
  } 

Server-Side Validator chk_user.php code:

<?php 
$request = UrlDecode (Trim ($_post[' user ')); 
Usleep (150000); 
$users = Array (' daimajiayuan.com ', ' jeymii ', ' Peter ', ' Daimajiayuan '); 
$valid = ' true '; 
foreach ($users as $user) { 
  if (strtolower ($user) = = $request) 
    $valid = ' false '; 
} 
Echo $valid; 

I use the server-side program is PHP, you can also use Asp,asp.net,java and so on. In addition, in order to demonstrate, the user name data is written directly on the service side, the real application is from the database out of the user name data, and to receive the client data comparison.

2. When verifying the checkbox and the radio control, the validation information does not appear behind the final control text, but directly behind the first control, which does not meet our requirements.

The workaround is to append the following code to validate ({}):

Errorplacement:function (Error, Element) { 
  if (element.is (": Radio")) 
    Error.appendto (Element.parent ()); C15/>else if (element.is (": CheckBox")) 
    Error.appendto (Element.parent ()); 
  else if (element.is ("Input[name=captcha]")) 
    Error.appendto (Element.parent ()); 
  else 
    error.insertafter (element); 

3, reset the form. Form form The original reset method is reset self belt

<input type= "reset" value= "reset"/>

When you click the "Reset" button, the form elements will be reset, but after you run the validation plug-in, the validation message is not reset, and that message is not gone. Thank validation for providing a way to reset a form: Resetform ()

$ ("Input:reset"). Click (function () { 
  validate.resetform (); 

The above mentioned is the entire content of this article, I hope you can enjoy.