JQuery form verification extension code (2) _ jquery

I wrote an article about jQuery form verification extension a few days ago (I). This is a prototype of jQuery form verification extension, which has some basic functions! I tried again last night and expanded some modifications to verify whether this part is required in the form! 1. Existing Problems
As mentioned in the previous article, the verification prompt is intended to display the prompt message in two ways: Text and style. These two tips can only be used separately, as a result, the new and new content are extended so that the two can be shared. Whether the verification is required in the previous article. This verification is only for the Text and TextArea form elements. In the new extension, both radio and checkbox elements are supported.

Ii. Design of verification parameters
Based on Multiple options, some necessary parameters are extended. The parameter list is as follows:
Required: whether it is required, true or false, true indicates that it is required (*)
OnFocusText: Text prompt for getting focus
OnFocusClass: The style after the focus is obtained
OnErrorText: Text prompt for verification errors
OnErrorClass: verification error style prompt
OnSuccessText: Text prompt for successful verification
OnSuccessClass: style prompt for successful verification
TargetId: ID of the information element

Compared with the previous changes, I read the previous articles and know that I separated the style and text separately, and they were mixed together before. This is also a step-by-step consideration for expansion. Then, the parameter name of the error message is changed.

Iii. source code parsing
JQuery form verification extension verification is required source code

The Code is as follows:

$. Fn. extend ({
CheckRequired: function (inputArg ){
// Verification is performed only if required. It is meaningless if not required.
If (inputArg. required ){
// Verify whether it is an input box form
If ($ (this). is ("input") | $ (this). is ("textarea ")){
// Obtain the focus prompt
$ (This). bind ("focus", function (){
// If the text exists, the prompt style is not replaced.
If ($ (this). val ()! = Undefined & $ (this). val ()! = ""){
// Display the correct information text
AddText(inputArg.tar getId, inputArg. onSuccessText );
// Switch the style
AddClass(inputArg.tar getId, inputArg. onSuccessClass );
} Else {
// Display and obtain the focus text
AddText(inputArg.tar getId, inputArg. onFocusText );
// Switch the style
AddClass(inputArg.tar getId, inputArg. onFocusClass );
}
});
// Indicates that the focus is lost.
$ (This). bind ("blur", function (){
If ($ (this). attr ("type") = "radio" | $ (this). attr ("type") = "checkbox "){
Var name = $ (this). attr ("name ");
Var items = $ ('input [@ name = "" + name + ""] [checked] ');
If (items. length> 0 ){
AddMessage (true, inputArg );
} Else {
AddMessage (false, inputArg );
}
} Else {
If ($ (this). val ()! = Undefined & $ (this). val ()! = ""){
AddMessage (true, inputArg );
} Else {
AddMessage (false, inputArg );
}
}
});
}
}
}
});
/**
* Determines based on different types of input boxes.
* @ Param {Object} flag
* @ Param {Object} inputArg
*/
Function addMessage (flag, inputArg ){
If (flag ){
// Display the correct information text
AddText(inputArg.tar getId, inputArg. onSuccessText );
// Switch the style
AddClass(inputArg.tar getId, inputArg. onSuccessClass );
} Else {
// Display the error message text
AddText(inputArg.tar getId, inputArg. onErrorText );
// Switch the style
AddClass(inputArg.tar getId, inputArg. onErrorClass );
}
}
/**
* Add the displayed text information to the target control.
* @ Param {Object} the id of the targetId target control
* @ Param {Object} text information to be displayed
*/
Function addText (targetId, text ){
If (text = undefined ){
Text = "";
}
$ ("#" Your targetid).html ("" + text );
}
/**
* Switching styles
* @ Param {Object} the id of the targetId target control
* @ Param {Object} The style name displayed by className
*/
Function addClass (targetId, className ){
If (className! = Undefined & className! = ""){
$ ("#" + TargetId). removeClass ();
$ ("#" + TargetId). addClass (className );
}
}

Anyone who has used jQuery knows that jQuery is a very easy-to-scale framework that provides functions to expand the core library. This form verification is based on this extension function.
Some code reusability issues are also taken into account here, and the code is separated, which greatly reduces the final code.
JQuery form verification extension mandatory item common method Extraction

The Code is as follows:

/**
* Determines based on different types of input boxes.
* @ Param {Object} flag
* @ Param {Object} inputArg
*/
Function addMessage (flag, inputArg ){
If (flag ){
// Display the correct information text
AddText(inputArg.tar getId, inputArg. onSuccessText );
// Switch the style
AddClass(inputArg.tar getId, inputArg. onSuccessClass );
} Else {
// Display the error message text
AddText(inputArg.tar getId, inputArg. onErrorText );
// Switch the style
AddClass(inputArg.tar getId, inputArg. onErrorClass );
}
}
/**
* Add the displayed text information to the target control.
* @ Param {Object} the id of the targetId target control
* @ Param {Object} text information to be displayed
*/
Function addText (targetId, text ){
If (text = undefined ){
Text = "";
}
$ ("#" Your targetid).html ("" + text );
}
/**
* Switching styles
* @ Param {Object} the id of the targetId target control
* @ Param {Object} The style name displayed by className
*/
Function addClass (targetId, className ){
If (className! = Undefined & className! = ""){
$ ("#" + TargetId). removeClass ();
$ ("#" + TargetId). addClass (className );
}
}
/Code]
Each Verification involves adding text messages, adding text messages to different form elements, and replacing the style. Therefore, the above three public methods are separated.
In the source code, if ($ (this ). attr ("type") = "radio" | $ (this ). attr ("type") = "checkbox") is an important sentence because it involves the extension of the verification element.

Iv. Example

Text Box test sample

Enter the text box to get the focus prompt

Error message indicating missing focus in input text box

Prompt for input text Verification

Radio test sample

Checkbox test sample

Checkbox verification failure prompt

Message indicating successful checkbox Verification
Test code
[Code]