jquery client Validation for OA projects

1. Take notes on verification today

2. The first thing to do is the client side of the verification, why the need for client authentication, is to alleviate the pressure on the server side, you can use jquery validate plug-in to do, there is a TreeView plugin to do tree-like display, the same reason, using jquery plugin to do very convenient, concise.

3. Look first, similar to the effect of such a hint

①jquery.validate is a validation framework for jquery, and with the advantage of jquery, we can quickly verify some of the common inputs, expand our own validation methods, and support internationalization as well.

② How to use the jquery plugin step:

The first step: import Jquery.js and jquery.validate.js files, note the order do not reverse

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

Step Two: specify which (or which) forms to validate before committing

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

Step Three: Specify validation rules for each field

Name *<input type= "text" name= "LoginName" class= "required" > Where class= "required" means this field must be filled in.

 

effects such as:

③ The following details how to verify the rules

1. Write validation rules to the class attribute of the field element

For example:

User name: <input type= "password" name= "password" class= "required" > E-mail: <input type= "text" name= "email" class= " Required email "> Password: <input type=" password "name=" password "id=" Password1 "class=" {required:true, Minlength:3} " > Re-enter Password: <input type= "password" name= "Password2" class= "{equalto: ' [#password1] '} required" >

the above is used in two ways:

1, specify multiple class names (validation rules), multiple class names separated by spaces, such as: class= "required email".
2, using a JSON object, specify multiple properties, such as: class= "{required:true, Minlength:3}". You can specify the parameters used for a validation rule, such as a minlength rule that requires a minimum length, which is 3.
3, mixed use, such as: class= "{equalto: ' [#password1] '} required".

Description

1, if you use the 2nd method (JSON object), you must introduce: Jquery.metadata.js, the function is to parse the JSON object.

2, if the name of the form field cannot be duplicated, only the most previous configuration will work.

④ What validation rules can be used (built-in validation rules)

Description

1.remote is a remote authentication. For example, if the registration verifies that the user name has been registered, the return value can only be true (validation succeeds) or False (validation failed). When the specified URL is accessed, the value of the current field is automatically passed as a parameter (with the field's name value of Key,value as the parameter value).

2. For example, using remote to verify the existence of a user name, when adding a user, in the current window (the same window), add a user with the same name again, validate cannot prompt that the user already exists, because the reason for the cache, jquery still think that the user name is available. The workaround is to add the following code to the page:
$ (). Ready (function () {
$.ajaxsetup ({
Cache:false//Turn off AJAX-appropriate caches
});
});

3. Quotation marks in some attribute values cannot be omitted, otherwise an error occurs. such as accept, Equalto, and so on, because then he needs a string.

⑤ about error message1. Change the default error message

Jquery.extend (JQuery.validator.messages, {

Required: " please fill in this field ",

Remote: " authentication failed ",

Email: " Please enter the correct email ",

URL: " Please enter the correct URL ",

Date: " Please enter the correct date ",

Dateiso: " Please enter the correct date (ISO).",

Number: " Please enter the correct numbers ",

Digits: " Please enter the correct integer ",

CreditCard: " Please enter the correct credit card number ",

Equalto: " Please enter the same value again ",

Accept: " Please enter a string for the specified suffix name ",

Maxlength:jQuery.validator.format (" maximum allowed length is {0} characters "),

Minlength:jQuery.validator.format (" minimum allowable length is {0} characters "),

Rangelength:jQuery.validator.format (" allowed lengths are between {0} and {1} "),

Range:jQuery.validator.format (" Please enter a value between {0} and {1} "),

Max:jQuery.validator.format (" Please enter a value of {0} max "),

Min:jQuery.validator.format (" Please enter a value of minimum {0} ")

});

2. Only change the prompt message for the current form

Method One: specify an error message for a validation rule in class

<input type= "File" Name= "Parresource"

Class= "{
Required:true, accept: ' Zip ',
messages: {required: ' Please select File ', accept: ' Please select the correct file '}
} "> (Hint: cannot wrap when used)

Method Two: specify an error message for a validation rule when calling the Validate () method

$ (function () {

$ ("#myForm"). Validate ({

messages:{

username: { required: " please fill in User name " },

Email: { required: ' please fill in email', email: " please fill in the correct email"}

}

    });

});

3. Set the display style for error messages

You can specify the style of the Label.error, as follows:

<style type= "Text/css" >

label.error{

margin-left:10px;

color:red;

}

</style>

Description:label.error refers to a label element that is class error , such as:
<label for= "username" class= "error" >

Finally, all the files including plug-ins and document packaging upload to share to everyone!

Http://download.csdn.net/my/uploads

jquery client Validation for OA projects