JQuery form verification extension code (1)

I again stated that there are many plug-ins and they will be solved one by one in the future. Please do not say anything wrong. I hope you will give more suggestions and provide better comments.
I. analyze basic information about Form Verification
In our web development process, we will encounter various verifications. To sum up, we can basically divide it into several categories:
(1). Required? [This is very basic]
(2). Range verification in input parameters
(3). Comparison between input parameters and other control values
(4). Regular Expression verification of input parameters
2. required verification?
There are several situations:
(1) The input box obtains the focus prompt.
(2) error message about missing focus verification in the input box
(3) Correct prompt for missing focus verification in the input box
First, determine whether the input box is required, and then the actual location of the message is prompted.
The following parameters are determined based on the above situations:
Required: whether it is required, true or false, true indicates that it is required (*)
OnFocus: Text prompt for getting the focus (if you specify a style, add @ before the style name, so the text prompt cannot contain @ at the first letter @)
OnBlur: Text prompt with no focus (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter) (Verification failure prompt)
OnSucces: Text prompt for successful verification (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter @)
TipId: id of the control used to display the prompt information (*)
Combination example: {required: true, onFocus: "Required", onBlur: "@ error", onSucces: "Success", tipId: "tipid "}
Note: Some of the rules defined above may not be implemented and are gradually improved in the later stage.
Copy codeThe Code is as follows:
/**
* Check whether the input box is required.
* Input parameters:
* Required: indicates whether the parameter is required. Optional values: true and false. true indicates that the parameter is required (*)
* OnFocus: indicates the text prompt for getting the focus (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter @)
* OnBlur: Text prompt with no focus (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter) (Verification failure prompt)
* OnSucces: Text prompt for successful verification (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter @)
* TipId: id of the control used to display the prompt information (*)
* Combination example: {required: true, onFocus: "Required", onBlur: "@ error", onSucces: "Success", tipId: "tipid "}
*/
$. Fn. extend ({
CheckRequired: function (inputArg ){
If (inputArg. required ){
If ($ (this). is ("input") | $ (this). is ("textarea ")){
// Bind a focus event
$ (This). bind ("focus", function (){
If (inputArg. onFocus! = Undefined ){
$ ("#" + InputArg.tipId).html (inputArg. onFocus );
}
});
// Bind an event with no focus
$ (This). bind ("blur", function (){
If ($ (this). val ()! = Undefined & $ (this). val ()! = ""){
$ ("#" + InputArg.tipId).html (inputArg. onSucces );
} Else {
$ ("#" + InputArg.tipId).html (inputArg. onBlur );
}
});
}
}
}
});

 Results and test code:

The following message is displayed when the focus is obtained.

When the focus is lost, no prompt is displayed.

After the text information is entered, a message indicating successful results is displayed.

The test code is as follows:
Copy codeThe Code is as follows:
<Script language = "JavaScript" src = "jquery-1.3.2.min.js" type = "text/javascript"> </script>
<Script language = "JavaScript" src = "jquery-extend-1.0.0.js" type = "text/javascript"> </script>
<Script language = "JavaScript" type = "text/javascript">
$ (Document). ready (function (){
$ ("# TxtName"). checkRequired ({
Required: true,
OnFocus: "This is required ",
OnBlur: "required ",
OnSucces: "Congratulations, you entered ",
TipId: "txtNameTip"
});
});
</Script>

3. Range verification in input parameters

Compared with the above verification, this is a little more complicated because there is a range of input values. The verification is classified as follows: the input data type is string, number, and time.

If it is a string, the length, number, and time of the string are compared. (Time is not complete yet)

Because the range is compared, a Range is defined. Therefore, two attributes, lower limit and upper limit, are added here.

Input parameter list:

OnFocus: Text prompt for getting the focus (if you specify a style, add @ before the style name, so the text prompt cannot contain @ at the first letter @)

OnEmpty: enter a blank text prompt (if a style is specified, add @ before the style name, so the text prompt cannot start @)

OnSucces: Text prompt for successful verification (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter @)

OnBlur: Text prompt with no focus (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter) (Verification failure prompt)

DataType: Data Type parameter (text, number, date)

Min: minimum input value

Max: The maximum input value.

TipId: id of the control used to display the prompt information (*)
Copy codeThe Code is as follows:
/**
* Check the input range.
* Input parameters:
* OnFocus: indicates the text prompt for getting the focus (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter @)
* OnEmpty: enter a blank text prompt (if a style is specified, add @ before the style name, so the text prompt cannot start @)
* OnSucces: Text prompt for successful verification (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter @)
* OnBlur: Text prompt with no focus (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter) (Verification failure prompt)
* DataType: Data Type parameter (text, number, date)
* Min: minimum input value
* Max: maximum input value
* TipId: id of the control used to display the prompt information (*)
*
*/
$. Fn. extend ({
CheckRange: function (inputArg ){
If ($ (this). is ("input") | $ (this). is ("textarea ")){
// Obtain the focus binding
$ (This). bind ("focus", function (){
If (inputArg. onFocus! = Undefined ){
$ ("#" + InputArg.tipId).html (inputArg. onFocus );
}
});
// Lose focus binding
$ (This). bind ("blur", function (){
If ($ (this). val () = undefined | $ (this). val () = ""){
$ ("#" + InputArg.tipId).html (inputArg. onEmpty );
} Else {
Switch (inputArg. dataType ){
Case "text ":
If ($ (this ). val (). length> = parseInt (inputArg. min) & $ (this ). val (). length <parseInt (inputArg. max )){
$ ("#" + InputArg.tipId).html (inputArg. onSucces );
} Else {
$ ("#" + InputArg.tipId).html (inputArg. onBlur );
}
Break;
Case "number ":
If (! IsNaN ($ (this). val ())){
If (parseInt ($ (this ). val ()> parseInt (inputArg. min) & parseInt ($ (this ). val () <parseInt (inputArg. max )){
$ ("#" + InputArg.tipId).html (inputArg. onSucces );
} Else {
$ ("#" + InputArg.tipId).html (inputArg. onBlur );
}
}
Break;
Case "date ":
Break;
}
}
});
}
}
});

Input scope effect and test code

If the age Conventions are numbers

The input is not within the agreed range.

Verification Successful
Copy codeThe Code is as follows:
$ ("# TxtAge"). checkRange ({
OnFocus: "Age is a number ",
OnEmpty: "cannot be blank ",
OnSucces: "Verification Successful ",
OnBlur: "Verification Failed. Please input it carefully ",
DataType: "number ",
Min: "10 ",
Max: "100 ",
TipId: "txtAgeTip"
});
<P>
<Label> Age: </label> <input type = "text" id = "txtAge" value = ""/> <span id = "txtAgeTip"> </span>
</P>

Iv. Comparison between input parameters and other control values

Compared with the preceding verification, the difference is that you must specify the id of the control to be compared.

The following are the input parameters:

OnFocus: Text prompt for getting the focus (if you specify a style, add @ before the style name, so the text prompt cannot contain @ at the first letter @)

OnEmpty: enter a blank text prompt (if a style is specified, add @ before the style name, so the text prompt cannot start @)

OnSucces: Text prompt for successful verification (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter @)

OnBlur: Text prompt with no focus (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter) (Verification failure prompt)

DataType: Data Type parameter (text, number, date)

ComType: comparison type (=,>, >=, <, <= ,! =)

TipId: id of the control used to display the prompt information (*)

TargetId: the Id of the target control to be compared.

Copy codeThe Code is as follows:
/**
* Comparison between control values
* Input parameters:
* OnFocus: indicates the text prompt for getting the focus (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter @)
* OnEmpty: enter a blank text prompt (if a style is specified, add @ before the style name, so the text prompt cannot start @)
* OnSucces: Text prompt for successful verification (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter @)
* OnBlur: Text prompt with no focus (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter) (Verification failure prompt)
* DataType: Data Type parameter (text, number, date)
* ComType: comparison type (=,>, >=, <, <= ,! =)
* TipId: id of the control used to display the prompt information (*)
* TargetId: the Id of the target control to be compared.
*/
$. Fn. extend ({
CheckCompare: function (inputArg ){
If ($ (this). is ("input") | $ (this). is ("textarea ")){
// Obtain the focus binding
$ (This). bind ("focus", function (){
If (inputArg. onFocus! = Undefined ){
$ ("#" + InputArg.tipId).html (inputArg. onFocus );
}
});
// Lose focus binding
$ (This). bind ("blur", function (){
Var targetValue = $ ("#" +inputArg.tar getId). val ();
If (targetValue! = Undefined & targetValue! = Null ){
If ($ (this). val ()! = Undefined & $ (this). val ()! = ""){
If (inputArg. dataType = "text "){
Switch (inputArg. comType ){
Case "= ":
If (targetValue = $ (this). val ()){
$ ("#" + InputArg.tipId).html (inputArg. onSucces );
} Else {
$ ("#" + InputArg.tipId).html (inputArg. onBlur );
}
Break;
Case "! = ":
If (targetValue! = $ (This). val ()){
$ ("#" + InputArg.tipId).html (inputArg. onSucces );
} Else {
$ ("#" + InputArg.tipId).html (inputArg. onBlur );
}
Break;
}
} Else if (inputArg. dataType = "number "){
If (isNaN (targetValue) = false & isNaN ($ (this). val () = false ){
Switch (inputArg. comType ){
Case "= ":
If (targetValue = $ (this). val ()){
$ ("#" + InputArg.tipId).html (inputArg. onSucces );
}
Else {
$ ("#" + InputArg.tipId).html (inputArg. onBlur );
}
Break;
Case "! = ":
If (targetValue! = $ (This). val ()){
$ ("#" + InputArg.tipId).html (inputArg. onSucces );
}
Else {
$ ("#" + InputArg.tipId).html (inputArg. onBlur );
}
Break;
Case "> ":
If ($ (this). val ()> targetValue ){
$ ("#" + InputArg.tipId).html (inputArg. onSucces );
}
Else {
$ ("#" + InputArg.tipId).html (inputArg. onBlur );
}
Break;
Case "> = ":
If ($ (this). val ()> = targetValue ){
$ ("#" + InputArg.tipId).html (inputArg. onSucces );
}
Else {
$ ("#" + InputArg.tipId).html (inputArg. onBlur );
}
Break;
Case "<":
If ($ (this). val () <targetValue ){
$ ("#" + InputArg.tipId).html (inputArg. onSucces );
}
Else {
$ ("#" + InputArg.tipId).html (inputArg. onBlur );
}
Break;
Case "<= ":
If ($ (this). val () <= targetValue ){
$ ("#" + InputArg.tipId).html (inputArg. onSucces );
}
Else {
$ ("#" + InputArg.tipId).html (inputArg. onBlur );
}
Break;
}
} Else {
$ ("#" + InputArg.tipId).html (inputArg. onBlur );
}
} Else if (inputArg. dataType = "date "){
}
} Else {
$ ("#" + InputArg.tipId).html (inputArg. onEmpty );
}
}
});
}
}
});

Comparison between control values and test code

1

2

3
Copy codeThe Code is as follows:
$ ("# TxtPass2"). checkCompare ({
OnFocus: "compared with the previous one ",
OnEmpty: "The input cannot be blank ",
OnSucces: "Verification Successful ",
OnBlur: "Verification Failed ",
DataType: "number ",
ComType: "> = ",
TipId: "txtPass2Tip ",
TargetId: "txtPass1"
});

<P>
<Label> password 1: </label> <textarea id = "txtPass1"> </textarea> <span id = "txtPass1Tip"> </span>
</P>
<P>
<Label> password 2: </label> <textarea id = "txtPass2"> </textarea> <span id = "txtPass2Tip"> </span>
</P>




5. input parameter Regular Expression Verification

This verification is relatively simple, because the regular expression does not need to think about the input. You only need to introduce a regular expression.

The following are the input parameters:

OnFocus: Text prompt for getting the focus (if you specify a style, add @ before the style name, so the text prompt cannot contain @ at the first letter @)

OnEmpty: enter a blank text prompt (if a style is specified, add @ before the style name, so the text prompt cannot start @)

OnSucces: Text prompt for successful verification (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter @)

OnBlur: Text prompt with no focus (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter) (Verification failure prompt)

RegExp: Regular Expression

TipId: id of the control used to display the prompt information (*)

Validation of jQuery Regular Expressions
Copy codeThe Code is as follows:
/**
* Regular Expression Verification
* Input parameters:
* OnFocus: indicates the text prompt for getting the focus (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter @)
* OnEmpty: enter a blank text prompt (if a style is specified, add @ before the style name, so the text prompt cannot start @)
* OnSucces: Text prompt for successful verification (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter @)
* OnBlur: Text prompt with no focus (if a style is specified, add @ before the style name, so the text prompt cannot contain @ at the first letter) (Verification failure prompt)
* RegExp: Regular Expression
* TipId: id of the control used to display the prompt information (*)
*/

$. Fn. extend ({
CheckRegExp: function (inputArg ){
If ($ (this). is ("input") | $ (this). is ("textarea ")){
// Obtain the focus binding
$ (This). bind ("focus", function (){
If (inputArg. onFocus! = Undefined ){
$ ("#" + InputArg.tipId).html (inputArg. onFocus );
}
});

// Get a focus loss event
$ (This). bind ("blur", function (){
If ($ (this). val ()! = Undefined & $ (this). val ()! = ""){
If ($ (this). val (). match (inputArg. regExp) = null ){
$ ("#" + InputArg.tipId).html (inputArg. onSucces );
} Else {
$ ("#" + InputArg.tipId).html (inputArg. onBlur );
}
} Else {
$ ("#" + InputArg.tipId).html (inputArg. onEmpty );
}
});
}
}
});

Regular Expression effects and test code

Enter a non-Number

Enter a number
Copy codeThe Code is as follows:
$ ("# TxtAge"). checkRegExp ({
OnFocus: "The age must be a number ",
OnEmpty: "The input cannot be blank ",
OnSucces: "Verification Successful ",
OnBlur: "Verification Failed ",
RegExp:/\ D /,
TipId: "txtAgeTip"
});
<Label> Age: </label> <input type = "text" id = "txtAge" value = ""/> <span id = "txtAgeTip"> </span>

This is a basic prototype of the verification plug-in, and will be updated later ..........