Detailed description of JQurey Validation Form Verification

Detailed description of JQurey Validation Form Verification
Powerful jQuery Form Verification plug-in, suitable for daily E-mail, phone number, URL verification and Ajax verification, in addition to its own rich verification rules, you can also add custom verification rules. Compatible with IE 6 +, Chrome, Firefox, Safari, and Opera 10 +

 

 

It is an excellent plug-in that can verify client forms and provides many customizable attributes and methods for good scalability. This article explains this example to understand the application of Validation.

Verification involved in this instance includes:

Username: length, character verification, and repeated ajax verification (whether the user exists ).

Password: length verification. Repeat the password verification.

Email: Verify the email address.

Landline phone: Chinese mainland landline phone number verification.

Mobile phone number: Mainland China Mobile Phone number verification.

URL: Verify the website URL.

Date: Standard Date Format verification.

Number: integer, positive integer verification, number range verification.

ID card: Chinese mainland ID card number verification.

Zip code: Mainland China zip code verification.

File: file type (suffix) verification. For example, only images can be uploaded.

IP Address: Verify the IP address.

Verification Code: ajax verification code.

Usage:

1. Prepare the jquery and jquery. validate plug-ins.

?

1 2	<Script type = "text/javascript" src = "js/jquery. js"> </script> <Script type = "text/javascript" src = "js/jquery. validate. js"> </script>

2. Prepare CSS styles

I will not elaborate on the page style. You can write a style yourself or refer to the DEMO page source code. The key style to be emphasized here is to display the style of verification information

?

1 2 3 4

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: Url (images/checked.gif) no-repeat 2px 0}

3. XHTML

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<Form id = "myform" action = "#" method = "post"> <Table width = "100%" border = "0" cellspacing = "0" cellpadding = "0" class = "mytable"> <Tr class = "table_title"> <Td colspan = "2"> jquery. validation Form Verification </td> </Tr> <Tr> <Td width = "22%" align = "right"> User name: </td> <Td> <input type = "text" name = "user" id = "user" class = "input required"/> <P> the username must be 3-16 characters long and can contain numbers, letters, underscores, and Chinese characters. </p> </td> </Tr> <Tr> <Td align = "right"> password: </td> <Td> <input type = "password" name = "pass" id = "pass" class = "input required"/> <P> minimum length: 6; maximum length: 16 </p> </Td> </Tr> <Tr> <Td align = "right"> Confirm Password: </td> <Td> <input type = "password" name = "repass" class = "input required"/> </td> </Tr> </Table> </Form>

Limited length, this article only captures a small part of the HTML code in the instance. For details about the XHTML code, see the DEMO source code on the page. It is worth mentioning that I have given the label a "required" style, which will be described below.

4. Application Validation plug-in

Method for calling the Validation plug-in:

?

1 2 3 4 5 6 7 8 9 10

$ (Function (){ Var validate = $ ("# myform"). validate ({ Rules: {// define verification rules ...... }, Messages: {// define the prompt message ...... } }) });

Rules: defines verification rules, in the form of key: value. key is the element to be verified, and value can be a string or object. For example, the length of the verified user name and the value cannot be blank:

?

1 2 3 4 5 6 7 8

Rules :{ User :{ Required: true, Maxlength: 16, Minlength: 3 }, ...... }

In fact, in XHTML code, we can directly specify the class attribute of input as required, so that it is not allowed to be empty, so that the JS part does not need to be repeated. For the same verification email, directly set the class attribute of input to email.

Messages: defines the prompt information. In the form of key: value, the key is the element to be verified, and the value is a string or function. The prompt information is displayed when the verification fails.

?

1 2 3 4 5 6 7

Messages :{ User :{ Required: "The user name cannot be blank! ", Remote: "This user name already exists. Please change to another user name! " }, ...... }

In this example, the verification JS is compiled according to the above rules. The Validation plug-in encapsulates many basic verification methods, as shown below:

Required: true must have a value and cannot be blank

Remote: the url can be used to determine whether the user name or so already exists. The server outputs true, indicating that the verification has passed

Minlength: 6 the minimum length is 6

Maxlength: 16 max length: 16

Rangelength: length range

Range: [10, 20] The value range is between 10 and 20.

Email: true verification email

Url: true

DateISO: true verification Date Format 'yyyy-mm-dd'

Digits: true can only be a number

Accept: 'gif | jpg 'only accepts gif or jpg images with the suffix. Used to verify the file extension

Similar to: '# pass' and which form field has the same value. It is often used to verify repeated passwords.

In addition, I also extended several verifications according to the actual situation of the project, the verification code is in the validate-ex.js and needs to load this JS first before use. It provides the following verification:

UserName: true the user name can only contain Chinese characters, English letters, numbers, and underscores

IsMobile: true mobile phone number verification

IsPhone: true Chinese 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 needs in most projects. If you have other special verification requirements, you can extend them by using the following methods:

?

1 2 3 4

JQuery. validator. addMethod ("isZipCode", function (value, element ){ Var zip =/^ [0-9] {6} $ /; Return this. optional (element) | (zip. test (value )); }, "Please enter your zip code correctly! ");

Troubleshooting

1. If a user name is verified in a project, Chinese input verification is not supported. My solution is to encode the username with encodeURIComponent, And the backend PHP then decodes the accepted value with urldecode.

?

1 2 3 4 5 6 7 8 9

User :{ Remote :{ Url: "chk_user.php", // server verification program Type: "post", // submission method Data: {user: function (){ Return encodeURIComponent ($ ("# user"). val (); // encode the data }} } },

Code of the chk_user.php server verification program:

?

1 2 3 4 5 6 7 8 9 10 11

<? 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; ?>

My server program is PHP. You can also use ASP, ASP. NET, JAVA, and so on. In addition, in this example, the user name data is directly written on the server, and the real application extracts the user name data from the database to compare the data of the receiving client.

2. When verifying the checkbox and radio controls, the verification information does not appear behind the last control text, but directly follows the first control and does not meet our requirements.

The solution is to append the following code in validate:

?

1 2 3 4 5 6 7 8 9 10

ErrorPlacement: function (error, element ){ If (element. is (": radio ")) Error. appendTo (element. parent ()); 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. The original reset method of Form is reset.

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

Click "reset", and the form element will be reset. However, after the Validation plug-in is run, the verification prompt information is not reset, that is, the prompt information does not disappear. Thanks to Validation for providing the method to reset the form: resetForm ()

?

1 2 3

$ ("Input: reset"). click (function (){ Validate. resetForm (); });

The above is all the content of this article. I hope you will like it.