jQuery form validation extension (4)_jquery-JS Tutorial-php.cn

jQuery form validation extension (4)_jquery

WBOY

Release： 2016-05-16 18:18:03

Original

957 people have browsed it

jQuery form validation extension written on the weekend (3) The click-through rate of this article is too low. I don’t know whether it is because the article is too low-quality or for other reasons. I am writing this article just to share my experience in writing code, and at the same time to consolidate myself. What I have learned! If there are any problems in the article, please correct me! This article introduces the comparison of control values in the jQuery form validation extension

(1). Existing problems
The difference between the control values mentioned in this article and the first article There is not much difference between them, the only difference is the processing of style. At the same time, the code is simplified. But I’ll explain it separately here. This article is very simple, so there won’t be a long explanation.

(2). Parameter introduction
onFocusText: Get focus prompt text
onFocusClass: Get focus style
onEmptyText: Display text when the input item is empty
onEmptyClass: Display style when the input item is empty
onErrorText: Verification error display text
onErrorClass: Input verification error display style
onSuccessText: Input successful display text
onSuccessClass: Input successful display style
comType :Comparison type
dataType: Enter the data type of the comparison content
dataType: Enter the data type of the comparison content
comId: Comparison target control ID
targetId: Control id used to display prompt information

The comparison types here are divided into the following categories: “==” “!=" “>” “>=” “<” <="”
The comparison data types are divided into The following are the following: "text" "number" "date"
No processing has been done on the date data type here. It will be updated in the later process

(3). Between the control values Compare source code parsing
Comparison source code parsing between jQuery control values

Copy code The code is as follows:

 
/**
* onFocusText: Get focus prompt text
* onFocusClass: Get focus style
* onEmptyText: Display text when the input item is empty
* onEmptyClass: Display style when the input item is empty
* onErrorText :Verification error display text
* onErrorClass: Input verification error display style
* onSuccessText: Input success display text
* onSuccessClass: Input success display style
* comType: Comparison type
* dataType: Data type of input comparison content 
* comId: Comparison target control ID 
* targetId: Control id used to display prompt information 
* @param {Object} inputArg 
*/ 
$.fn.extend({ 
checkCompare:function(inputArg){ 
//Only verify the input box information
if($ (this).is("input") || $(this).is("textarea")){ 
if($(this).attr("type")!="radio" && $(this ).attr("type")!="checkbox"){ 
//Bind the focus event
$(this).bind("focus",function(){ 
var value=$ (this).val(); 
if(value!=undefined && value!=""){ 
}else{ 
//Display the focused text
addText(inputArg.targetId,inputArg .onEmptyText); 
//Switch style
addClass(inputArg.targetId,inputArg.onEmptyClass); 
} 
}); 
//Bind the lost focus event
$( this).bind("blur",function(){ 
var value=$(this).val(); 
if(value==undefined || value==""){ 
/ /Display the focused text
addText(inputArg.targetId,inputArg.onEmptyText); 
//Switch style
addClass(inputArg.targetId,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 the focused text
addText(inputArg.targetId, inputArg.onSuccessText); 
//Switch style
addClass(inputArg.targetId, inputArg.onSuccessClass); 
}else{ 
// Display the focused text
addText(inputArg.targetId, inputArg.onErrorText); 
//Switch style
addClass(inputArg.targetId, inputArg.onErrorClass); 
} 
} 
 }); 
} 
} 
} 
}); 

This code is actually very simple, because it does not involve complex judgments, it is just a comparison between different types of values, and it also limits the comparison control types text and textarea elements. This greatly simplifies the complexity of verification. This code is also relatively streamlined. The simplification here is not the reduction of functions, but the reconstruction of the code and the extraction of methods. The functional methods of the previous articles are used here to add text and modify style information.
Add text and style information function code analysis

Copy code The code is as follows:

 
/**
* Determine based on the different types of input boxes 
* @param {Object} flag 
* @param {Object} inputArg 
*/ 
function addMessage(flag,inputArg){ 
if(flag){ 
//Display the correct message text
addText(inputArg.targetId, inputArg.onSuccessText); 
//Switch style
addClass(inputArg.targetId,inputArg.onSuccessClass); 
}else{ 
//Display error message text
addText(inputArg.targetId, inputArg.onErrorText); 
//Switch style
addClass(inputArg.targetId,inputArg.onErrorClass); 
} 
} 
/**
* Add displayed text information to the target control 
* @param {Object} targetId target control id 
* @param {Object} text text information to be displayed 
*/ 
function addText (targetId,text){ 
if(text==undefined){ 
text=""; 
} 
$("#" targetId).html(" " " text); 
 } 
/**
* Switch style 
* @param {Object} targetId target control id 
* @param {Object} className Displayed style name 
*/ 
function addClass(targetId,className){ 
if(className!=undefined && className!=""){ 
$("#" targetId) .removeClass(); 
$("#" targetId).addClass(className); 
} 
} 

The content is still the same, no changes have been made, posted here again This code is included to facilitate viewing the method body, and has no other purpose!

(4). Usage examples

Comparison renderings between strings

Prompt when getting focus

Lost focus verification error message

Lost focus and verified successfully

The above is a comparative verification of characters. The verification test code is as follows

Copy codeThe code is as follows :

Untitled Document

Password 1:

Password 2:

Verification between numbers

Digital verification gains focus prompt function

Digital verification lost focus and verification failed

Digital verification lost focus and verification was successful

Copy code The code is as follows:

Untitled Document

Password 1:

Password 2:

I don’t want to explain too much about the content of the article. This article is very simple. As for the previous articles. The form validation extension is constantly being updated, looking forward to the follow-up......