After a period of learning about jquery, the powerful jquery solution solves the problem that the auxiliary code is too difficult to maintain.
Autovalidate.js
Copy Code code as follows:
<reference path= ". /scripts/jquery-1.4.1-vsdoc.js "/>
Verification Method v1.0, was created in 2010-12-9 to complete 2010-12-16 MR. X system
Modify 2010-12-10, 2010-12-12, 2010-12-15, 2010-12-16 add information hint animation effect
Support Type=text type=checkbox Type=radio Select Tag Validation
Vld= "* * *" required format verification
vld= "n***" optional format validation
Err= "* * *" Error display content
Super= "Y" uses <span> to append the message, to use the letter of Y to modify the peer group of validation, the same group of labels can be in the first tab super= "Y" attribute identification, others do not
len= "* *" length limit, for TEXTAREA label
<input id= "* * *" type= "text" vld= "* * *" err= "* * *" span= "* * *" len= "* * *"/>
$ (function () {
Regular Anonymous objects
var strregex = {};
Error message Anonymous Object
var strerror = {};
Correct information Anonymous Object
var strright = {};
/** parameter configuration start **/
Not empty
Strregex.nonull =/[^\s]+/;
Strerror.nonull = "Please fill in the content, such as 123, China!" ";
Mailbox
Strregex.email =/^ ([a-za-z0-9_-]) +@ ([a-za-z0-9_-]) + ((\.[ a-za-z0-9_-]{2,3}) {1,2}) $/;
Strerror.email = "Please check the email format, such as china@163.com! ";
Url
Strregex.url =/^http:\/\/[a-za-z0-9]+\. [a-za-z0-9]+[\/=\?%\ -&_~ ' @[\]\ ': +!] *([^\"\"])*$/;
Strerror.url = "Please check the URL format, such as http://www.jb51.net! ";
Account
strregex.an =/^ ([a-za-z0-9]|[ _]) {6,16}$/;
strerror.an = "Please check the account format, such as china_56! ";
Digital
Strregex.math =/\d+$/;
Strerror.math = "Please check the number format, such as 1234!" ";
Age
Strregex.age =/^\d{2}$/;
Strerror.age = "Please check the age format between 10~99岁!" ";
Zip
Strregex.post =/^[1-9]\d{5}$/;
Strerror.post = "Please check the postcode format, such as 150001!" ";
Phone
Strregex.phone =/^ (\d{11}) | ( (\d{7,8}) | (\d{4}|\d{3})-(\d{7,8}) | (\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}) | (\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})) $/;
Strerror.phone = "Please check the phone format, such as 15546503251!" ";
Id
Strregex.card =/^ ([1-9]\d{5}[1-9]\d{3} (0\d) | ( 1[0-2])) (([0|1|2]\d) |3[0-1]) ((\d{4}) |\d{3}[x,x]) | ([1-9]\d{5}[1-9]\d{1} (0\d) | ( 1[0-2])) (([0|1|2]\d) |3[0-1]) (\d{3})) $/;
Strerror.card = "Please check the ID card format, such as 230103190001010000!" ";
Money
Strregex.price =/^ ([1-9]\d*|0) (\.\d+) $/;
Strerror.price = "Please check the money format, such as 99.98!" ";
Date
Strregex.date =/((^ (1[8-9]\d{2}) | ( [2-9]\d{3})] ([-\/\._]) (10|12|0?[ 13578]) ([-\/\._]) (3[01]|[ 12][0-9]|0? [1-9]) $)| (^ (1[8-9]\d{2}) | ([2-9]\d{3})] ([-\/\._]) (11|0?) [469]) ([-\/\._]) (30| [12] [0-9]|0? [1-9]) $)| (^ (1[8-9]\d{2}) | ([2-9]\d{3})] ([-\/\._]) (0?2) ([-\/\._]) (2[0-8]|1[0-9]|0?) [1-9]) $)| (^ ([2468][048]00) ([-\/\._]) (0?2) ([-\/\._]) (29) $) | (^ ([3579][26]00) ([-\/\._]) (0?2) ([-\/\._]) (29) $) | (^ ([1][89][0][48]) ([-\/\._]) (0?2) ([-\/\._]) (29) $) | (^ ([2-9][0-9][0][48]) ([-\/\._]) (0?2) ([-\/\._]) (29) $) | (^ ([1][89][2468][048]) ([-\/\._]) (0?2) ([-\/\._]) (29) $) | (^ ([2-9][0-9][2468][048]) ([-\/\._]) (0?2) ([-\/\._]) (29) $) | (^ ([1][89][13579][26]) ([-\/\._]) (0?2) ([-\/\._]) (29) $) | (^ ([2-9][0-9][13579][26]) ([-\/\._]) (0?2) ([-\/\._]) (29) $) /;
Strerror.date = "Please check the date format, such as 1999.9.9, 1999-9-9, 1999.09.09!" ";
Time
Strregex.time =/^ ([0-9]|[ 0-1][0-9]| [2] [0-3]) (: |:) ([0-5][0-9]) $/;
Strerror.time = "Please check the time format, such as 23:59!" ";
Strerror.length = "Please check the length of input information, length is less than";
Strright.info = "The format is correct!" "; can be set to NULL
Drop down box
STRREGEX.DDL = "Please choose";
STRERROR.DDL = "Please select options";
Single checkbox check box
Strregex.check = "Please choose";
Strerror.check = "Please select options";
Single Radio check box
Strregex.radio = "Please choose";
Strerror.radio = "Please select options";
A set of checkbox at the same peer check box
Strregex.checkgroup = "Please choose";
Strerror.checkgroup = "Please select options";
Sibling Group Radio check box
Strregex.radiogroup = "Please choose";
Strerror.radiogroup = "Please select options";
Append information after label
var spanerror = "<span class= ' vldspanerr ' ></span>";
var Spanok = "<span class= ' vldspanrig ' ></span>";
/** parameter Configuration End **/
/** Main **/
File directory, return to the top-level directory. /
function FilePath () {
var file = "";
var path = Window.location.pathname.split ('/');
$ (path). each (function () {
File = ".. /"+ file;
});
return file;
}
Page Validation Self test
$ ("#form1 [VLD]"). blur (function () {
Regexgether ($ (this));
});
Validation Processing Collection
function Regexgether ($ctrl) {
Switch ($ctrl. attr ("VLD")) {
Case "Nonull":
Regexnull ($ctrl);
Break
Case "Age":
Regexinputtextall ($ctrl, Strregex.age, strerror.age);
Break
Case "Nage":
Regexinputtextonly ($ctrl, Strregex.age, strerror.age);
Break
Case "Date":
Regexinputtextall ($ctrl, Strregex.date, strerror.date);
Break
Case "Ndate":
Regexinputtextonly ($ctrl, Strregex.date, strerror.date);
Break
Case "Price":
Regexinputtextall ($ctrl, Strregex.price, Strerror.price);
Break
Case "Nprice":
Regexinputtextonly ($ctrl, Strregex.price, Strerror.price);
Break
Case "Email":
Regexinputtextall ($ctrl, Strregex.email, Strerror.email);
Break
Case "Nemail":
Regexinputtextonly ($ctrl, Strregex.email, Strerror.email);
Break
Case "POST":
Regexinputtextall ($ctrl, Strregex.post, strerror.post);
Break
Case "Npost":
Regexinputtextonly ($ctrl, Strregex.post, strerror.post);
Break
Case "card":
Regexinputtextall ($ctrl, Strregex.card, Strerror.card);
Break
Case "Ncard":
Regexinputtextonly ($ctrl, Strregex.card, Strerror.card);
Break
Case "Time":
Regexinputtextall ($ctrl, Strregex.time, strerror.time);
Break
Case "Ntime":
Regexinputtextonly ($ctrl, Strregex.time, strerror.time);
Break
Case "Math":
Regexinputtextall ($ctrl, Strregex.math, Strerror.math);
Break
Case "Nmath":
Regexinputtextonly ($ctrl, Strregex.math, Strerror.math);
Break
Case "url":
Regexinputtextall ($ctrl, Strregex.url, Strerror.url);
Break
Case "Nurl":
Regexinputtextonly ($ctrl, Strregex.url, Strerror.url);
Break
Case "a":
Regexinputtextall ($ctrl, strregex.an, strerror.an);
Break
Case "Nan":
Regexinputtextonly ($ctrl, strregex.an, strerror.an);
Break
Case "Phone":
Regexinputtextall ($ctrl, Strregex.phone, Strerror.phone);
Break
Case "Nphone":
Regexinputtextonly ($ctrl, Strregex.phone, Strerror.phone);
Break
Case "DDL":
Regexselect ($ctrl);
Break
Case "Check":
Regexinputcheckboxradioonly ($ctrl, Strerror.check);
Break
Case "Radio":
Regexinputcheckboxradioonly ($ctrl, Strerror.radio);
Break
Case "CheckGroup":
Regexinputcheckboxradioall ($ctrl, Strerror.checkgroup);
Break
Case "Radiogroup":
Regexinputcheckboxradioall ($ctrl, Strerror.radiogroup);
Break
}
}
Label content NULL validation
function Regexnull ($ctrl) {
if (StrRegex.NoNull.test ($ctrl. Val ())) {
Return Regexlen ($ctrl);
}
else {
Error ($ctrl, strerror.nonull);
return false;
}
}
Verify multiple peer-group input (type=radio) labels or input (type=checkbox) labels
function Regexinputcheckboxradioall ($ctrl, error) {
if ($ctrl. Parent (). Children (": Checked"). Length = = 0) {
if ($ctrl. Parent (). Children (). attr ("Super")) {
There may be more than one [super= ' Y '] in the sibling tag, just a single, return false; control, execute once and jump out of the loop body
$ctrl. Parent (). Children ("[super= ' Y ']"). each (function () {
Error ($ (this), error);
return false;
});
}
else {
A group of labels with a sibling
$ctrl. Parent (). Children ("[type= '" + $ctrl. attr ("type") + "']"). each (function () {
Error ($ (this), error);
});
}
return false;
}
else {
if ($ctrl. Parent (). Children (). attr ("Super")) {
$ctrl. Parent (). Children ("[super= ' Y ']"). each (function () {
Ok ($ (this));
return false;
});
}
else {
$ctrl. Parent (). Children (). each (function () {
Ok ($ (this));
});
}
return true;
}
}
Verifying a single input (type=radio) label or input (type=checkbox) label
function regexinputcheckboxradioonly ($ctrl, error) {
if (! $ctrl. attr ("checked")) {
Error ($ctrl, error);
return false;
}
else {
Ok ($ctrl);
return true;
}
}
Select label, option Validation
function Regexselect ($ctrl) {
if ($ctrl. val () = Strregex.ddl) {
Error ($ctrl, STRERROR.DDL);
return false;
}
else {
Ok ($ctrl);
return true;
}
}
Label allows for null content format validation, type=text label validation
function Regexinputtextonly ($ctrl, Regex, error) {
Verify that the label is empty first
if (StrRegex.NoNull.test ($ctrl. Val ())) {
Return Regexotherformat ($ctrl, Regex, error);
}
else {
Ok ($ctrl);
return true;
}
}
Label is not allowed for null content format validation, type=text label validation
function Regexinputtextall ($ctrl, Regex, error) {
Verify that the label is empty first
if (StrRegex.NoNull.test ($ctrl. Val ())) {
Return Regexotherformat ($ctrl, Regex, error);
}
else {
Error ($ctrl, error);
return false;
}
}
Label Content format validation
function Regexotherformat ($ctrl, Regex, error) {
if (Regex.test ($ctrl. Val ())) {
Return Regexlen ($ctrl);
}
else {
Error ($ctrl, error);
return false;
}
}
TextArea Label Length Verification
function Regexlen ($ctrl) {
Whether the Len attribute is in the label
if ($ctrl. attr ("Len")) {
var error = Strerror.length + $ctrl. attr ("len") + "Word!" ";
if (parseint ($ctrl. Val (). Length) > parseint ($ctrl. attr ("Len")) {
Error ($ctrl, error);
return false;
}
}
Ok ($ctrl);
return true;
}
Format validation error display
Function error ($ctrl, error) {
The Err attribute is in the label and is filled in title according to the property content
if ($ctrl. attr ("err")) {
Error = $ctrl. attr ("err");
}
if ($ctrl. attr ("Super")) {
Append span with super attribute label
$ctrl. Parent (). FIND ("span"). Remove ();
$ctrl. Parent (). append (Spanerror);
$ctrl. Parent (). FIND ("span"). Append (Error);
$ctrl. Parent (). FIND ("span"). Fadeto ("Slow", 0.66);
}
else {
Append to Title Property
$ctrl. attr ("title", error);
$ctrl. addclass ("error");
}
}
Correct format validation, clear error style
function Ok ($ctrl) {
Remove the error styles that can exist
if ($ctrl. attr ("Super")) {
$ctrl. Parent (). FIND ("span"). Remove ();
}
else {
$ctrl. Removeclass ("error");
}
if ($.trim ($ctrl. Val ()). length > 0) {
var right = Strright.info;
Check to see if a rig property is in the label
if ($ctrl. attr ("rig")) {
right = $ctrl. attr ("rig");
}
Add correct hint information
if ($ctrl. attr ("Super")) {
$ctrl. Parent (). append (Spanok);
$ctrl. Parent (). Find (' span '). append (right);
$ctrl. Parent (). FIND ("span"). Fadeto ("slow", 0.99). Fadeto ("slow", 0.99). Fadeto ("Slow", 0);
}
else {
$ctrl. attr ("title", right);
}
}
}
Submit Self Test
$ ("#vldBtn"). Click (function () {
$ ("#form1 [VLD]"). each (function () {
Regexgether ($ (this));
});
Check if the style in the label has an error
if ($ ("#form1 [vld][class= ' Error ']"). Length > 0) {
return false;
}
else {
return true;
}
});
});
Autovalidate.htm
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<link href= "Css/style01.css" rel= "stylesheet" type= "Text/css"/>
<link href= "Css/autovalidate.css" rel= "stylesheet" type= "Text/css"/>
<script src= "Scripts/jquery-1.4.1.js" type= "Text/javascript" ></script>
<script src= "Scripts/jquery.timer.js" type= "Text/javascript" ></script>
<script src= "Js/style.js" type= "Text/javascript" ></script>
<script src= "Js/autovalidate.js" type= "Text/javascript" ></script>
<body>
<form id= "Form1" >
<ul class= "Tab_ul" >
<li>
<p> name:</p>
<p><input id= "name" type= "text" vld= "Nonull" err= "Okokok!!!" super= "y" rig= "format", 暃, 暃, 暃, 暃, 暃 暃 "昦
</li>
<li>
<p> Age:</p>
<p><input id= "Age" type= "text" vld= "age"/></p>
</li>
<li>
<p> Date:</p>
<p><input id= "Date" type= "text" vld= "Ndate"/></p>
</li>
<li>
<p> Money:</p>
<p><input id= "Price" type= "text" vld= "Nprice"/></p>
</li>
<li>
<p> Email:</p>
<p><input id= "Email" type= "text" vld= "email"/></p>
</li>
<li>
<p> Zip:</p>
<p><input id= "POST" type= "text" vld= "POST"/></p>
</li>
<li>
<p> Telephone:</p>
<p><input id= "Phone" type= "text" vld= "Phone" len= "ten"/></p>
</li>
<li>
<p> ID:</p>
<p><input id= "card" type= "text" vld= "card"/></p>
</li>
<li>
<p> Time:</p>
<p><input id= "Time" type= "text" vld= "Ntime"/></p>
</li>
<li>
<p> Digital:</p>
<p><input id= "math" type= "text" vld= "Nmath"/></p>
</li>
<li>
<p> website:</p>
<p><input id= "url" type= "text" vld= "url"/></p>
</li>
<li>
<p> Account:</p>
<p><input id= "an" type= "text" vld= "Nan"/></p>
</li>
<li style= "height:60px" >
<p> Text length limit:</p>
<p><textarea id= "Len" style= "width:300px; height:50px "len=" vld= "Nonull" ></textarea></p>
</li>
<li>
<p> dropdown Box:</p>
<p><select id= "DDL" vld= "DDL" ><option> Please select </option><option value= "1" > China </option ></select></p>
</li>
<li>
<p> Square check box:</p>
<p><input type= "checkbox" id= "Check1" vld= "Check" value= "1"/><label for= "Check1" > is </label> </p>
</li>
<li>
<p> round check box:</p>
<p><input type= "Radio" id= "Radio1" vld= "Radio" value= "1"/><label for= "Radio1" > is </label>< /p>
</li>
<li>
<p> Square check box:</p>
<p><input type= "checkbox" id= "Checkbox1" vld= "CheckGroup" name= "DSA" value= "1" err= "must choose a" super= "Y"/> <label for= "Checkbox1" > is </label><input type= "checkbox" id= "Checkbox2" name= "DSA" vld= "CheckGroup" Value= "1"/><label for= "Checkbox2" > is </label></p>
</li>
<li>
<p> round check box:</p>
<p><input type= "Radio" id= "Radio2" vld= "Radiogroup" Name= "ASD" value= "1"/><label for= "Radio2" > is </label><input type= "Radio" id= "Radio3" Name= "ASD" vld= "Radiogroup" value= "1"/><label for= "Radio3" > is </label></p>
</li>
<li>
<input id= "vldbtn" type= "button" value= "Confirmation"/>
</li>
</ul>
</form>
</body>
