Before reading this article, you can take a look at the first two articles, form validation input scope validation is based on the original rewrite.
(i). Input range Validation Problem
The problem mentioned in the second article is the same in the original validation. Of course, some of these problems have been solved in this rewriting. Validation of the Radio,checkbox,select element is also added. Of course, the verification of time is still unresolved, the follow-up process will continue to add!
(b). Verification parameter Design
Onemptytext: Display text when the input is empty
Onemptyclass: Display style When the input is empty
Onsuccesstext: Text displayed when validation is successful
Onsuccessclass: The style displayed when validation is successful
Onerrortext: Text displayed when validation fails
Onerrorclass: The style to display when validation fails
Onfocustext: Text displayed when the focus is obtained
Onfocusclass: The style displayed when the focus is obtained
DataType: Type of data entered
Min: The minimum value entered
Max: The maximum value entered
Targetid: The element ID that displays the prompt message
Rewrite the part is the hint text and style are isolated separately, can be more flexible operation form verification!
The rewritten article supports text,number,date three kinds of data forms and is updated in Radio,checkbox,select validation.
Radio,checkbox, select validation is just verifying that it is selected, and the select here is not sensitive to blur events, so the change event used here is better to validate.
(iii). Verification Scope Source Code resolution
jquery Check the scope of the input source code resolution
/**
* Onemptytext: Display text when the input is empty
* Onemptyclass: Displays the style when the input content is empty
* Onsuccesstext: Text displayed when validation is successful
* Onsuccessclass: Style displayed when validation is successful
* Onerrortext: Text displayed when validation fails
* Onerrorclass: The style to display when validation fails
* Onfocustext: Text displayed when the focus is obtained
* Onfocusclass: The style displayed when the focus is obtained
* DataType: Type of data entered
* min: The minimum value of the input
* Max: The maximum value entered
* Targetid: The element ID that displays the prompt message
* @param {Object} inputarg
*/
$.fn.extend ({
Checkrange:function (Inputarg) {
Bind Focus Event
$ (this). Bind (' Focus ', function () {
var flag=true;
if ($ (this). are ("input") | | $ (this). Is ("textarea")) {
if ($ (this). attr ("type") = = "Radio" | | $ (this). attr ("type") = = "checkbox") {
var name=$ (this). attr ("name");
var items=$ (' input[@name = "" +name+ ""][checked] ");
if (items.length>0) {
Flag=false;
}
}else{
if ($ (this). Val ()!=undefined && $ (this). Val ()!= "") {
Flag=false;
}
}
}else{//select needs to be improved select No focus event, should be changed to change event
}
if (flag) {
Show Get focus text
AddText (Inputarg.targetid, Inputarg.onfocustext);
Toggle Style
AddClass (Inputarg.targetid, Inputarg.onfocusclass);
}
});
Bind loses Focus Event
$ (this). Bind ("Blur", function () {
var Flag=false;
if ($ (this). are ("input") | | $ (this). Is ("textarea")) {
if ($ (this). attr ("type") = = "Radio" | | $ (this). attr ("type") = = "checkbox") {
var name=$ (this). attr ("name");
var items=$ (' input[@name = "" +name+ ""][checked] ");
if (items!=undefined && items.length>=inputarg.min && items.length<inputarg.max) {
Flag=true;
}
}else{
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 {
Switch (inputarg.datatype) {
Case "Text":
if (Value.length < Inputarg.min | | | value.length >= inputarg.max) {
Flag=false;
}else{
Flag=true;
}
Break
Case "Number":
if (isNaN (value)) {
Flag = false;
}
else {
if (Value < Inputarg.min | | | value >= inputarg.max) {
Flag = false;
}
else {
Flag = true;
}
}
Break
Case "Date":
Break
}
}
}
}else{//select
}
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);
}
});
Select Selection Box Selection event
if ($ (this). Is ("select")) {
$ (this). bind (' Change ', function () {
var items=$ (this). Find ("option:selected");
if (items!=undefined && items.length>=inputarg.min && items.length<inputarg.max) {
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);
}
});
}
}
});
The important thing here is that for the validation of the Select element, select can select multiple selections. Radio,checkbox,select only validates the selection length and does not validate text,date. This is a very important part of this article. The source code has also been refactoring, there are many common parts are extracted, greatly reduced the amount of code, but also using the jquery form verification Extension (ii) part of the method.
(iv). Common Code resolution extracted
Common methods in the second article
/**
* 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);
}
}
This code is primarily used to add text hints and style questions.
For the validation code for the SELECT element
Select Selection Box Selection event
if ($ (this). Is ("select")) {
$ (this). bind (' Change ', function () {
var items=$ (this). Find ("option:selected");
if (items!=undefined && items.length>=inputarg.min && items.length<inputarg.max) {
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 validates the Select selection box element and supports multiple selection validation.
(v) Validation use examples
text box Input Validation
When the input content length does not match
The string entered satisfies the current requirement prompt
Validation when no text is entered
For validation of numbers
Get focus Prompt question
The number entered does not meet the range
Validation successful
For verification of a CheckBox
One of the checkbox groups gets the focus
Choose to meet the data
Select over quantity
For select multiple selection
Excessive number of choices
Validation successful
(vi). Validation Test Code
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<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" 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"). Checkrange ({
Onfocustext: "Required",
Onfocusclass: "Notice",
Targetid: "Txtnametip",
Onsuccesstext: "Verify successful",
Onsuccessclass: "Correct",
Onerrortext: "You really do not listen, please fill in carefully",
Onerrorclass: "Error",
Min:6,
Max:12,
DataType: "Text"
});
$ ("#rdbMan, #rdbWoman"). Checkrange ({
Onfocustext: "Required",
Onfocusclass: "Notice",
Targetid: "Txtsextip"
});
$ ("#txtPass2"). Checkrange ({
Onfocustext: "Required",
Onfocusclass: "Notice",
Targetid: "Txtpass2tip",
Onsuccesstext: "Verify successful",
Onsuccessclass: "Correct",
Onerrortext: "You really do not listen, please fill in carefully",
Onerrorclass: "Error",
Min:10,
Max:60,
DataType: "Text"
});
$ ("#rdbMan1, #rdbWoman2, #rdbMan3, #rdbWoman4"). Checkrange ({
Onfocustext: "Required",
Onfocusclass: "Notice",
Targetid: "Txthobbytip",
Onsuccesstext: "Verify successful",
Onsuccessclass: "Correct",
Onerrortext: "You really do not listen, please fill in carefully",
Onerrorclass: "Error",
Min:1,
Max:3,
DataType: "Text"
});
$ ("#txtAge"). Checkrange ({
Onfocustext: "Required",
Onfocusclass: "Notice",
Targetid: "Txtagetip",
Onsuccesstext: "Verify successful",
Onsuccessclass: "Correct",
Onerrortext: "Enter a range of 10-60",
Onerrorclass: "Error",
Min:10,
Max:60,
DataType: "Number"
});
$ ("#ddlOption"). Checkrange ({
Onfocustext: "Required",
Onfocusclass: "Notice",
Targetid: "Ddloptiontip",
Onsuccesstext: "Verify successful",
Onsuccessclass: "Correct",
Onerrortext: "You really do not listen, please fill in carefully",
Onerrorclass: "Error",
Min:1,
Max:2,
DataType: "Number"
});
$ ("#rdbMan, #rdbWoman"). Checkrange ({
Onfocustext: "Required",
Onfocusclass: "Notice",
Targetid: "Txtsextip",
Onsuccesstext: "Verify successful",
Onsuccessclass: "Correct",
Onerrortext: "You really do not listen, please fill in carefully",
Onerrorclass: "Error",
Min:1,
Max:2,
DataType: "Number"
});
});
</script>
<body>
<p>
<label> Name: </label><input type= "text" id= "txtname" value= ""/><span id= "Txtnametip" ></ Span>
</p>
<p>
<label> Age: </label><input type= "text" id= "txtage" value= ""/><span id= "Txtagetip" ></span >
</p>
<p>
<label> Description: </label><textarea id= "Txtarea" ></textarea><span id= "Txtareatip" ></ Span>
</p>
<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>
<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>
<p>
<label> Area:</label>
<span>
<select id= "ddloption" name= "area" multiple= "multiple" >
<option value= "0" >00000</option>
<option value= "1" >11111</option>
<option value= "2" >22222</option>
<option value= "3" >33333</option>
<option value= "4" >44444</option>
</select>
</span>
<span id= "Ddloptiontip" ></span>
</p>
</body>
The above is part of the code for testing, but the basics can explain how this approach is used.
Here is not much written, follow-up constantly updated ...
