I. The problems that exist
As I mentioned in the previous article, the validation hint is intended to display a hint message in two ways: text and style, both of which can be used alone, so the new content is expanded to make it common. Whether the previous write must fill in the item this validation is just a pair of Text, TextArea the two form elements, and also supports the Radio,checkbox two elements in the new extension.
Two. Design of verification parameters
Based on multiple selection considerations, some of the necessary parameters are extended, with the following parameters listed:
Required: is required, true and false, True is required (*)
Onfocustext: Text tips for getting focus
Onfocusclass: The style after getting focus
Onerrortext: Text hints for validation errors
Onerrorclass: Style hint for validation errors
Onsuccesstext: Verifying Successful text hints
Onsuccessclass: Validating a successful style hint
Targetid: The ID number of the informational element
Compared to the previous changes, read the previous article will know, I separate the style and text, before is mixed together. This is also a step to consider as an extension. The name of the error message hint parameter is then changed.
three. SOURCE Analysis
JQuery Form Verification Extension verification is required source code
Copy Code code as follows:
$.fn.extend ({
Checkrequired:function (Inputarg) {
Only required fields to verify, non-required items meaningless
if (inputarg.required) {
Verify that the Input box form
if ($ (this). are ("input") | | $ (this). Is ("textarea")) {
Get Focus Tips
$ (this). Bind (' Focus ', function () {
Do not replace the hint style if text exists
if ($ (this). Val ()!= undefined && $ (this). Val ()!= "") {
Display the correct message text
AddText (Inputarg.targetid,inputarg.onsuccesstext);
Toggle Style
AddClass (Inputarg.targetid,inputarg.onsuccessclass);
}else{
Show Get focus text
AddText (Inputarg.targetid,inputarg.onfocustext);
Toggle Style
AddClass (Inputarg.targetid,inputarg.onfocusclass);
}
});
Lose focus hint
$ (this). Bind ("Blur", function () {
if ($ (this). attr ("type") = = "Radio" | | $ (this). attr ("type") = = "checkbox") {
var name=$ (this). attr ("name");
var items=$ (' input[@name = "" +name+ ""][checked] ");
if (items.length>0) {
AddMessage (TRUE,INPUTARG);
}else{
AddMessage (FALSE,INPUTARG);
}
}else{
if ($ (this). Val ()!=undefined && $ (this). Val ()!= "") {
AddMessage (TRUE,INPUTARG);
}else{
AddMessage (FALSE,INPUTARG);
}
}
});
}
}
}
});
/**
* 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);
}
}
As you can see with jquery, jquery is a very easy to expand framework that provides functions to extend the core library. This form of validation is extended based on this extension function.
This also takes into account some code reusability issues, separating common code, which makes the final code much less.
JQuery Form validation extension required common method extraction
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);
}
}
/code]
Each time a different validation involves adding a text message, a different form element adds a text message, and a style substitution, and then separates the three common methods above.
In the source code if ($ (this). attr ("type") = = "Radio" | | $ (this). attr ("type") = = "checkbox" This is a more important sentence because it involves the extension of the validation element.
Four. Examples of Use
text box test sample diagram
Enter a text box to get focus tips
Input text box loses focus error prompt
Input text validation correct prompt
Radio test sample diagram
CheckBox Test Sample Diagram
CheckBox validation Failure prompt
CheckBox Validation Success Prompt
Test code
[Code]
<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,
Onfocustext: "Required",
Onfocusclass: "Notice",
Onerrortext: "Error Prompt",
Onerrorclass: "Error",
Onsuccessclass: "Correct",
Targetid: "Txtnametip"
});
$ ("#rdbMan"). Checkrequired ({
Required:true,
Onfocustext: "Required",
Onfocusclass: "Notice",
Onerrortext: "Error Prompt",
Onerrorclass: "Error",
Onsuccessclass: "Correct",
Targetid: "Txtsextip"
});
$ ("#rdbWoman"). Checkrequired ({
Required:true,
Onfocustext: "Required",
Onfocusclass: "Notice",
Onerrortext: "Error Prompt",
Onerrorclass: "Error",
Onsuccessclass: "Correct",
Targetid: "Txtsextip"
});
$ ("#rdbMan1, #rdbWoman2, #rdbMan3, #rdbWoman4"). Checkrequired ({
Required:true,
Onfocustext: "Required",
Onfocusclass: "Notice",
Onerrortext: "Error Prompt",
Onerrorclass: "Error",
Onsuccessclass: "Correct",
Targetid: "Txthobbytip"
});
});
</script>
<p>
<label> Name: </label><input type= "text" id= "txtname" value= ""/><span id= "Txtnametip" ></ Span>
</p>
<p>
<label> Sex:</label>
<span>
<input id= "Rdbman" type= "Radio" name= "Sex" value= "male"/> Male
<input id= "Rdbwoman" type= "Radio" name= "Sex" value= "female"/> Female
</span>
<span id= "Txtsextip" ></span>
</p>
<p>
<label> Hobby:</label>
<span>
<input id= "RdbMan1" type= "checkbox" name= "Hobby" value= "Hobby1"/>aa
<input id= "rdbWoman2" type= "checkbox" name= "Hobby" value= "Hobby2"/>bb
<input id= "rdbMan3" type= "checkbox" name= "Hobby" value= "Hobby3"/>aa
<input id= "RdbWoman4" type= "checkbox" name= "Hobby" value= "Hobby4"/>bb
</span>
<span id= "Txthobbytip" ></span>
</p>
Here is not much to say, the article continues to update! There are problems in further modification ....
