JQuery form verification extension (4) _ jquery

JQuery form verification extension written over the weekend (3) the click rate of this article is too low. I don't know whether the article is too low or why. Here I write an article to share my own coding experience, jQuery form verification extension written over the weekend (3) the click rate of this article is too low. I don't know whether the article is too low or why. Here I write an article to share my own coding experience, it also reinforces what you have learned! If there is a problem in the article, please make a lot of corrections! This article introduces the comparison of the control values in jQuery form verification extension.

(1). Existing Problems
There is not much difference between the control values mentioned in this article and in the first article. The only closer thing is the style processing. At the same time, the Code is simplified. But here we will explain it separately. This article is very simple, so it will not be explained in detail.

(2). Parameter Introduction
OnFocusText: Get the focus prompt text
OnFocusClass: Get focus Style
OnEmptyText: when the input is empty, the text is displayed.
OnEmptyClass: when the input item is empty, the display style is displayed.
OnErrorText: verification error display text
OnErrorClass: Enter the validation error display style
OnSuccessText: Text displayed after successful Input
OnSuccessClass: display style after successful Input
ComType: comparison type
DataType: Data Type of the input comparison content
DataType: Data Type of the input comparison content
ComId: the ID of the target control to be compared.
TargetId: id of the control used to display the prompt information

The comparison types are as follows: "=" "! = ""> = "" <"<=""
Compared data types are divided into the following types: "text" "number" "date"
There is no processing for the date data type, and it will be updated later.

(3) Comparison between control values for source code parsing
Comparison between jQuery control values source code analysis

The Code is as follows:

/**
* OnFocusText: Get the focus prompt text
* OnFocusClass: obtains the focus style.
* OnEmptyText: when the input is empty, the text is displayed.
* OnEmptyClass: when the input item is empty, the display style is displayed.
* OnErrorText: verification error display text
* OnErrorClass: Enter the validation error display style.
* OnSuccessText: Text displayed after successful Input
* OnSuccessClass: The display style is successfully entered.
* ComType: comparison type
* DataType: Data Type of the input comparison content
* ComId: the ID of the target control to be compared.
* TargetId: id of the control used to display the prompt information
* @ Param {Object} inputArg
*/
$. Fn. extend ({
CheckCompare: function (inputArg ){
// Only verify the information in the input box
If ($ (this). is ("input") | $ (this). is ("textarea ")){
If ($ (this). attr ("type ")! = "Radio" & $ (this). attr ("type ")! = "Checkbox "){
// Bind a focus event
$ (This). bind ("focus", function (){
Var value = $ (this). val ();
If (value! = Undefined & value! = ""){
} Else {
// Display and obtain the focus text
AddText(inputArg.tar getId, inputArg. onEmptyText );
// Switch the style
AddClass(inputArg.tar getId, inputArg. onEmptyClass );
}
});
// Bind an event with no focus
$ (This). bind ("blur", function (){
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 {
Var targetValue = $ ("#" + inputArg. comId). val ();
Var flag = false;
Switch (inputArg. dataType ){
Case "text ":
If (inputArg. comType = "= "){
Flag = value = targetValue? True: false;
} Else if (inputArg. comType = "! = "){
Flag = value! = TargetValue? True: false;
}
Break;
Case "number ":
If (inputArg. comType = "= "){
Flag = value = targetValue? True: false;
} Else if (inputArg. comType = "! = "){
Flag = value! = TargetValue? True: false;
} Else if (inputArg. comType = "> "){
Flag = value> targetValue? True: false;
} Else if (inputArg. comType = "> = "){
Flag = value> = targetValue? True: false;
} Else if (inputArg. comType = "<"){
Flag = value } Else if (inputArg. comType = "<= "){
Flag = value <= targetValue? True: false;
}
Break;
Case "date ":
Break;
}
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 );
}
}
});
}
}
}
});

This code is actually very simple, because it does not involve complex judgment, but only compares the relations between different types of values. It also limits the comparison of the control types of text and textarea. This greatly simplifies the verification complexity. This section of code is also relatively streamlined, here is not to reduce the number of features, but to code refactoring, extraction of methods. The function of the previous articles is used to add text and modify style information.
Code parsing for adding text and style information

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 );
}
}

The content is still the same, and no changes have been made. Here, the code is pasted again to facilitate the viewing of the method body. There is no other function!

(4) Examples

Comparison between strings

Prompt when getting focus

Error message indicating missing focus Verification

Verification of missing focus is successful

The above is a comparison and verification of characters. The verification test code is as follows:

The Code is as follows:

Untitled Document