There are already many jQuery-based form verification plug-ins on the Internet, but I will continue to do this, this is because the form verification plug-in has moved the value from my previous Personal JS framework (I have been slowly investing in jQuery ), and Its Writing Method of verification rules may make your eyes shine. The validation rules of various form verification plug-ins on the Internet are written in scripts, but the validation rules of my plug-ins are written in the attributes of form elements. Example:
The Code is as follows:
Note that all attribute names starting with "jv" in the code above are the attribute values required by the Form Verification plug-in. See the following table for meanings of each attribute:
1. Attributes available to form table control elements:
Attribute name |
Description |
Jvpattern |
A regular expression used to verify whether the control value is correct. (Do not define this attribute) |
Jvcompareid |
Id of other controls whose values must be equal to those of the current control. (Do not define this attribute) |
Jvrequired |
Indicates whether the current control value is required, that is, whether the current control value is allowed to be null. If this attribute is not defined, it cannot be blank by default. If the value is false or 0, it can be blank. (Do not define this attribute) |
Jvmethod |
Define the method that requires additional verification. (Do not define this attribute) If this attribute value is defined, you do not need to input "Parentheses" and the function prototype is: Xx function (item ){ // Code // True indicates that the verification is successful, and false indicates that the verification fails. Return true/false; // Or return an error message Return {result: true/false, message: 'error message '}; } The item parameter is a jQuery instance of the current control object. |
Jvtipid |
The id of the control that displays the verification prompt. (Do not define this attribute) Note: If this attribute is not defined and the onerror or oncorrect function is not defined, the alert prompt is displayed by default. |
Jverrortip |
The prompt message to be displayed when the verification fails. (Do not define this attribute) |
Jvcorrecttip |
The prompt message to be displayed when the verification is successful. (Do not define this attribute) |
Jvfocuson |
Whether to move the cursor over the control after verification fails. (Do not define this attribute) |
The control must be defined as one or more of jvpattern, jvmethod, and jvcompareid. Otherwise, the plug-in will not verify the corresponding control.
2. tip: displays the attributes that can be used by the control element.: The tip prompt control is the control specified by a Form Control jvtipid.
Attribute name |
Description |
Jvnormalclass |
Normally, the css-style classname is used to display the prompt information. (Do not define this attribute) |
Jvcorrectclass |
The css-style classname used to display the prompt information after the verification is successful. (Do not define this attribute) |
Jverrorclass |
The css-style classname used to display the prompt information after the verification fails. (Do not define this attribute) |
After the control rules are set, jValidate can be directly activated to perform verification check before the form is submitted for submit.
Example:
$ ('Form'). jValidate ();
Or call with parameters:
$ ('Form'). jValidate ({
Blurvalidate: true,
Isbubble: false,
Onerror: function (item, form ){
$. JMessageBox. show ('error', item. attr ('jverrortip '));
}
});
The following table lists configurable parameters:
Parameter Name |
Description |
Isbubble |
Whether to allow "bubble", that is, whether to allow each control value to be checked one by one. If the value is true, all controls with verification rules set are checked one by one; if the value is false, when a control value fails to be verified (does not meet the conditions), it will exit the subsequent control check. The default value is false. Note: If the prompt information is displayed in the pop-up window, we recommend that you set this value to false to avoid a large number of prompts and users' dislike. |
Blurvalidate |
Sets whether instant check and verification are required when all controls lose focus. The default value is false. |
Emptytip |
Whether to allow empty message. That is, whether to allow the prompt control to change the css class when no prompt is displayed. The default value is false. |
Oncorrect |
The processing method is called when the control value is verified successfully. If not defined, the default action is used. Function prototype: Function (item, form ){ // Code } The parameter item indicates the jQuery instance of the current control, and form indicates the form instance of the control. |
Onerror |
Call the processing method when the control value verification fails. If not defined, use the default action. Function prototype: Function (item, form ){ // Code } The parameter item indicates the jQuery instance of the current control, and form indicates the form instance of the control. |
Example:
Sample jMessageBox attached to the compressed package for source code download
Http://www.jb51.net/jiaoben/23094.html