Jquery client verification for the OA project, and the OA Jquery Client

Jquery client verification for the OA project, and the OA Jquery Client

1. Take verification notes today

2. the first step is to verify the client side. Why do we need to verify the client side? To reduce the pressure on the server side, we can use the Jquery validate plug-in. The previous treeview plug-in is used for Tree display, the same principle is true. It is convenient and concise to use the Jquery plug-in.

3. Let's take a look at the effects similar to this.

① Jquery. validate is a verification framework of jquery. With the advantages of jquery, we can quickly verify some common input and expand our own verification methods, it also provides good support for internationalization.

② Steps for using the Jquery plug-in:

Step 1: Import files such as jQuery. js and jquery. validate. js. Do not reverse the order.

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

Step 2: Specify the (OR) form to be verified before submission

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

Step 3: Specify the validation rules for each field

Name * <input type = "text" name = "loginName" class = "required"> where class = "required" indicates that this field must be filled in.

 

The effect is as follows:

③ The following describes in detail how to verify the rules

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

For example:

 

Username: <input type = "password" name = "password" class = "required"> Email: <input type = "text" name = "email" class = "required email"> password: <input type = "password" name = "password" id = "password1" class = "{required: true, minlength: 3}"> enter the password again: <input type = "password" name = "password2" class = "{failed to: '[# password1]'} required">

The preceding two methods are used:

1. Specify multiple class names (verification rules). Multiple class names are separated by spaces, for example, class = "required email ".
2. Use a JSON object to specify multiple attributes, such as: class = "{required: true, minlength: 3 }". You can specify the parameters used for a validation rule. For example, the minlength rule must specify the minimum length. Here, it is 3.
3. Mixed use, such as: class = "{failed to: '[# password1]'} required ".

 
Note:

1. If you use 2nd methods (JSON objects), you must introduce jquery. metadata. js to parse JSON objects.

2. if the name of the form field cannot be repeated, only the previous configuration takes effect.

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

Note:

1. remote Authentication. For example, if the user name for registration verification has been registered, the return value can only be true (Verification Successful) or false (Verification Failed ). When you access a specified url, the value of the current field is automatically passed as a parameter (the name value of the field is the key and value is the parameter value ).

2. for example, if you use remote to verify whether the user name exists, add another user with the same name in the current window (in the same window) after adding a user, and the validate cannot prompt that the user already exists, this is because of the cache. jquery still considers the user name available. The solution is to add the following code on the page:
$ (). Ready (function (){
$. AjaxSetup ({
Cache: false // disable the corresponding ajax cache
});
});

3. The quotation marks in some attribute values cannot be omitted; otherwise, an error occurs. For example, accept and allow to, because what he needs is a string.

⑤ Error Message 1. Change the default error message

JQuery. extend (jQuery. validator. messages ,{

Required: "Please enter this field ",

Remote: "Verification Failed ",

Email: "enter the correct email ",

Url: "enter the correct url ",

Date: "enter the correct date ",

DateISO: "enter the correct date (ISO ).",

Number: "enter the correct number ",

Digits: "enter the correct integer ",

Creditcard: "enter the correct credit card number ",

Similar to: "Please enter the same value again ",

Accept: "Enter the specified suffix string ",

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

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

Rangelength: jQuery. validator. format ("the allowed length is between {0} and {1 "),

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

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

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

});

2. Only a message is displayed when the current form is changed.

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

<Input type = "file" name = "parResource"

Class = "{
Required: true, accept: 'zip ',
Messages: {required: 'select A file', accept: 'select the correct file '}
} "> (Note: line breaks are not allowed during use)

 

Method 2: Specify the error message of a validation rule when calling the validate () method

$ (Function (){

$ ("# MyForm"). validate ({

Messages :{

Username: {required: "Enter the user name "},

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

}

});

});

3. Set the display style of the error message

You can specify the label. error style as follows:

<Style type = "text/css">

Label. error {

Margin-left: 10px;

Color: red;

}

</Style>

 

Note: label. error refers to the label element whose class is error, for example:
<Label for = "username" class = "error">

 Finally, we will package and upload all the files, including plug-ins and documents, and share them with you!

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

I am working on a project company's OA system. I want to use Jquery for the entire project, but Jquery requires a call path, that is, the corresponding aspx page.

I recommend that you use ASHX ~~

Because I recently developed a project, I used this method for data processing, or all the elements required for directly generating the page. Then, return the Json data to the required interface.

How to apply the downloaded jquery plug-in to the Project

There are many Jquery plug-ins. Which one do you use? Directly reference it to the project, and then use each plug-in on the official jquery website.