I wrote two articles about jQuery form verification the other day. The jQuery plug-in still has many problems, but I am still trying to update it. This article describes the range verification of input text in jQuery form verification. Before reading this article, you can refer to the first two articles. Form Verification input range verification is rewritten on the original basis.
(1) input range verification problems
The problems mentioned in Article 2 also exist in the original verification. Of course, these problems are also solved in this rewrite. Verification of the radio, checkbox, and select elements is also added. Of course, the verification of the time is still not resolved, and will be supplemented in the future!
(2) Design of verification parameters
OnEmptyText: displays text when the input content is empty.
OnEmptyClass: display style when the input content is empty
OnSuccessText: Text displayed when verification is successful
OnSuccessClass: display style when verification is successful
OnErrorText: The text displayed when verification fails.
OnErrorClass: display style when verification fails
OnFocusText: Text displayed when the focus is obtained
OnFocusClass: display style when the focus is obtained
DataType: input data type
Min: minimum input value
Max: The maximum input value.
TargetId: displays the element id of the prompt message.
The rewriting part is to isolate the prompt text and style separately, so that you can perform form verification more flexibly!
The rewritten article supports three data formats: text, number, and date. Verification of radio, checkbox, and select is also updated.
Radio, checkbox, select verification only verifies whether selected, and the select here is not sensitive to the blur event, so it is better to use the change event here for verification.
(3). verification scope source code parsing
JQuery checks the range of input items for source code parsing
/**
* OnEmptyText: displays text when the input content is empty.
* OnEmptyClass: display style when the input content is empty
* OnSuccessText: The text displayed when the verification is successful.
* OnSuccessClass: The style displayed when the verification is successful.
* OnErrorText: The text displayed when verification fails.
* OnErrorClass: display style when verification fails
* OnFocusText: Text displayed when the focus is obtained
* OnFocusClass: The display style when the focus is obtained.
* DataType: input data type
* Min: minimum input value
* Max: maximum input value
* TargetId: displays the element id of the prompt message.
* @ Param {Object} inputArg
*/
$. Fn. extend ({
CheckRange: function (inputArg ){
// Bind a focus event
$ (This). bind ("focus", function (){
Var flag = true;
If ($ (this). is ("input") | $ (this). is ("textarea ")){
If ($ (this). attr ("type") = "radio" | $ (this). attr ("type") = "checkbox "){
Var name = $ (this). attr ("name ");
Var items = $ ('input [@ name = "" + name + ""] [checked] ');
If (items. length> 0 ){
Flag = false;
}
} Else {
If ($ (this). val ()! = Undefined & $ (this). val ()! = ""){
Flag = false;
}
}
} Else {// select must be improved. select does not have a focus event and should be changed to a change event.
}
If (flag ){
// Display and obtain the focus text
AddText(inputArg.tar getId, inputArg. onFocusText );
// Switch the style
AddClass(inputArg.tar getId, inputArg. onFocusClass );
}
});
// Bind an event with no focus
$ (This). bind ("blur", function (){
Var flag = false;
If ($ (this). is ("input") | $ (this). is ("textarea ")){
If ($ (this). attr ("type") = "radio" | $ (this). attr ("type") = "checkbox "){
Var name = $ (this). attr ("name ");
Var items = $ ('input [@ name = "" + name + ""] [checked] ');
If (items! = Undefined & items. length> = inputArg. min & items. length Flag = true;
}
} Else {
Var value = $ (this). val ();
If (value = undefined | value = ""){
// Display and obtain the focus text
AddText(inputArg.tar getId, inputArg. onEmptyText );
// Switch the style
AddClass(inputArg.tar getId, inputArg. onEmptyClass );
} Else {
Switch (inputArg. dataType ){
Case "text ":
If (value. length <inputArg. min | value. length> = inputArg. max ){
Flag = false;
} Else {
Flag = true;
}
Break;
Case "number ":
If (isNaN (value )){
Flag = false;
}
Else {
If (value <inputArg. min | value> = inputArg. max ){
Flag = false;
}
Else {
Flag = true;
}
}
Break;
Case "date ":
Break;
}
}
}
} Else {// select
}
If (flag ){
// Display and obtain the focus 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. onErrorText );
// Switch the style
AddClass(inputArg.tar getId, inputArg. onErrorClass );
}
});
// Select an event in the select box
If ($ (this). is ("select ")){
$ (This). bind ("change", function (){
Var items = $ (this). find ("option: selected ");
If (items! = Undefined & items. length> = inputArg. min & items. length // Display and obtain the focus 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. onErrorText );
// Switch the style
AddClass(inputArg.tar getId, inputArg. onErrorClass );
}
});
}
}
});
It is important to verify the select element. select can select multiple selected items. Radio, checkbox, and select verify the Selected length instead of text and date. This is an important part of this article. Code refactoring is also done in the source code, and many common parts are extracted, which greatly reduces the amount of code. At the same time, some methods in jQuery form verification extension (2) are also used.
(4) Analysis of extracted Common Code
Public methods in Article 2
/**
* 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 );
}
}
This code is mainly used to add text prompts and style issues.
Verification code for the select Element
// Select an event in the select box
If ($ (this). is ("select ")){
$ (This). bind ("change", function (){
Var items = $ (this). find ("option: selected ");
If (items! = Undefined & items. length> = inputArg. min & items. length // Display and obtain the focus 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. onErrorText );
// Switch the style
AddClass(inputArg.tar getId, inputArg. onErrorClass );
}
});
}
This code is used to verify the select selection box element and supports multiple selection verification.
(5). Verification example
Text Box input verification
When the entered content length does not match
Prompt that the entered string meets current requirements
Verify if no text is input
Digit Verification
Get focus prompt
The input number does not meet the specified range.
Verification Successful
Checkbox Verification
One of the checkbox groups obtains the focus
Select meeting data
Quantity exceeded
Select multiple options
Too many options
Verification Successful
(6). Verify the test code
The Code is as follows:
Untitled Document
