JQuery form Verification Extension on weekends (iii) This article is too low, do not know whether the article is too lost level or what other reasons, here to write articles just to share the experience of their own writing code, but also to consolidate their learned things! If there is a problem in the article, please treatise a lot! This article describes the comparison of control values in the jquery form validation extension
(i). Existing problems
The comparison between the values of the controls mentioned in this article and in the first article is not much different, and the only thing closer is the processing of the style. It's also a simplification of the code. But here is a separate show to explain, this article is very simple, so there will not be a large length of the explanation.
(b). Introduction to Parameters
Onfocustext: Getting focus prompt text
Onfocusclass: Getting focus style
Onemptytext: When the entry is empty display text
Onemptyclass: When the entry is empty display style
Onerrortext: Verifying error display text
Onerrorclass: Input validation error display style
Onsuccesstext: Enter text to display successfully
Onsuccessclass: Enter a successful display style
ComType: Comparison type
DataType: Enter data type for comparison content
DataType: Enter data type for comparison content
Comid: Comparison of target control IDs
Targetid: The control ID used to display the hint information
The comparison type here is divided into the following: "= =" "! = "" > ">=" "<" <= ""
The data types of the comparison are divided into the following categories: "Text" "Number" "Date"
There is no processing of the date data type, which is updated during the later
(iii). Comparison between control values source resolution
Compare source resolution between jquery control values
Copy Code code as follows:
/**
* Onfocustext: Get focus Prompt text
* Onfocusclass: Get focus Style
* Onemptytext: When the entry is empty display text
* Onemptyclass: When the entry is empty display style
* Onerrortext: Validation error display text
* Onerrorclass: Input validation error display style
* Onsuccesstext: Enter display text successfully
* Onsuccessclass: Enter successful display style
* ComType: Comparison type
* DataType: Enter data type for comparison content
* Comid: Comparison of target control IDs
* Targetid: The control ID used to display the hint information
* @param {Object} inputarg
*/
$.fn.extend ({
Checkcompare:function (Inputarg) {
Validate Input Box information only
if ($ (this). are ("input") | | $ (this). Is ("textarea")) {
if ($ (this). attr (' type ')!= "Radio" && $ (this). attr ("type")!= "checkbox" {
Bind gets Focus Event
$ (this). Bind (' Focus ', function () {
var value=$ (this). Val ();
if (value!=undefined && value!= "") {
}else{
Show Get focus text
AddText (Inputarg.targetid,inputarg.onemptytext);
Toggle Style
AddClass (Inputarg.targetid,inputarg.onemptyclass);
}
});
Bind loses Focus Event
$ (this). Bind ("Blur", function () {
var value=$ (this). Val ();
if (value==undefined | | value== "") {
Show Get focus text
AddText (Inputarg.targetid,inputarg.onemptytext);
Toggle 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<targetvalue?true:false;
}else if (inputarg.comtype== "<=") {
flag=value<=targetvalue?true:false;
}
Break
Case "Date":
Break
}
if (flag) {
Show Get focus text
AddText (Inputarg.targetid, Inputarg.onsuccesstext);
Toggle Style
AddClass (Inputarg.targetid, Inputarg.onsuccessclass);
}else{
Show Get focus text
AddText (Inputarg.targetid, Inputarg.onerrortext);
Toggle Style
AddClass (Inputarg.targetid, Inputarg.onerrorclass);
}
}
});
}
}
}
});
This code is actually very simple, because it does not involve complex judgments, only the comparison between different types of values, but also defines the comparison of the control type text and textarea two elements. This greatly simplifies the complexity of validation. This code is also relatively thin, where the streamlining is not the reduction of functionality, but the code refactoring, method extraction. There are several articles used in this area to add text and modify style information.
add text and style information function code parsing
Copy Code code as follows:
/**
* Based on the different types of input boxes to determine
* @param {Object} flag
* @param {Object} inputarg
*/
function AddMessage (flag,inputarg) {
if (flag) {
Display the correct message text
AddText (Inputarg.targetid,inputarg.onsuccesstext);
Toggle Style
AddClass (Inputarg.targetid,inputarg.onsuccessclass);
}else{
Display error message text
AddText (Inputarg.targetid,inputarg.onerrortext);
Toggle Style
AddClass (Inputarg.targetid,inputarg.onerrorclass);
}
}
/**
* Add displayed text information to the target control
* @param {object} Targetid target control ID
* @param {Object} text needs to display the textual information
*/
function AddText (targetid,text) {
if (text==undefined) {
Text= "";
}
$ ("#" +targetid). HTML ("" +text);
}
/**
* Toggle Style
* @param {object} Targetid target control ID
* @param {Object} className display style name
*/
function AddClass (targetid,classname) {
if (classname!=undefined && classname!= "") {
$ ("#" +targetid). Removeclass ();
$ ("#" +targetid). addclass (ClassName);
}
}
Content is still the same, did not make any changes, here again posted this code, is to facilitate the view of the method body, no other role!
(iv). Examples of Use
Comparison diagram between strings
Tips when getting focus
Missing focus validation error hint
Loss of focus validation success
The above is a comparison of the characters to verify that the verification test code is as follows
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>untitled document</title>
<link type= "Text/css" rel= "stylesheet" href= "New_file.css"/>
<script language= "JavaScript" type= "Text/javascript" src= "Jquery-1.3.2.min.js" ></script>
<script language= "JavaScript" type= "Text/javascript" src= "Jquery-extend-1.0.0.js" ></script>
<script language= "JavaScript" type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#txtPass2"). Checkcompare ({
Onfocustext: "To fill the same as the above, OH",
Onfocusclass: "Notice",
Onemptytext: "Not allowed to be empty, you have to listen to point",
Onemptyclass: "Error",
Onerrortext: "Validation error, please fill in carefully",
Onerrorclass: "Error",
Onsuccesstext: "Congratulations, it worked."
Onsuccessclass: "Correct",
ComType: "= =",
DataType: "Text",
Comid: "TxtPass1",
Targetid: "Txtpass2tip"
});
});
</script>
<body>
<p>
<label> password 1:</label><input type= "text" id= "TxtPass1" value= ""/><span id= "Txtpass1tip" ></ Span>
</p>
<p>
<label> password 2:</label><input type= "text" id= "TxtPass2" value= ""/><span id= "Txtpass2tip" ></ Span>
</p>
</body>
Validation between numbers
Digital validation gets focus prompt
Digital verification loses focus validation failed
Digital verification loses focus verification success
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>untitled document</title>
<link type= "Text/css" rel= "stylesheet" href= "New_file.css"/>
<script language= "JavaScript" type= "Text/javascript" src= "Jquery-1.3.2.min.js" ></script>
<script language= "JavaScript" type= "Text/javascript" src= "Jquery-extend-1.0.0.js" ></script>
<script language= "JavaScript" type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#txtPass2"). Checkcompare ({
Onfocustext: "The result is bigger than the front."
Onfocusclass: "Notice",
Onemptytext: "Not allowed to be empty, you have to listen to point",
Onemptyclass: "Error",
Onerrortext: "Validation error, please fill in carefully",
Onerrorclass: "Error",
Onsuccesstext: "Congratulations, it worked."
Onsuccessclass: "Correct",
ComType: ">",
DataType: "Number",
Comid: "TxtPass1",
Targetid: "Txtpass2tip"
});
});
</script>
<body>
<p>
<label> password 1:</label><input type= "text" id= "TxtPass1" value= ""/><span id= "Txtpass1tip" ></ Span>
</p>
<p>
<label> password 2:</label><input type= "text" id= "TxtPass2" value= ""/><span id= "Txtpass2tip" ></ Span>
</p>
</body>
The content of the article do not want to do too much explanation, this article is very simple, relative to the previous articles. The form verification extension is constantly updated, and the following expectations ...
