JQuery form verification extension (3) _ jquery

Source: Internet
Author: User
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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.