Super powerful Form Verification

<Title> Form Verification class Validator v1.01 </title>
<Style>
Body, td {font: normal 12px Verdana; color: #333333}
Input, textarea, select, td {font: normal 12px Verdana; color: #333333; border: 1px solid #999999; background: # ffffff}
Table {border-collapse: collapse ;}
Td {padding: 3px}
Input {height: 20 ;}
Textarea {width: 80%; height: 50px; overfmin: auto ;}
Form {display: inline}
</Style>
<Table align = "center">
<Form name = "theForm" id = "demo" action = "" method = "get" onSubmit = "return Validator. Validate (this, 2)">
<Tr>
<Td> real name: </td> <input Name = "name" dataType = "Chinese" msg = "Real Name Only Chinese"> </td>
</Tr>
<Tr>
<Td> English Name: </td> <input name = "Nick" dataType = "English" require = "false" msg = "English name only English letters"> </td>
</Tr>
<Tr>
<Td> Home Page: </td> <input name = "Homepage" require = "false" dataType = "Url" msg = "invalid Url"> </td>
</Tr>
<Tr>
<Td> password: </td> <input name = "Password" dataType = "SafeString" msg = "password does not comply with security rules" type = "Password"> </td>
</Tr>
<Tr>
<Td> repeated: </td> <input name = "Repeat" dataType = "Repeat" to = "Password" msg = "inconsistent passwords" type = "password"> </td>
</Tr>
<Tr>
<Td> mailbox: </td> <input name = "Email" dataType = "Email" msg = "Incorrect mailbox format"> </td>
</Tr>
<Tr>
<Td> mailbox: </td> <input name = "Email" dataType = "Repeat" to = "Email" msg = "two input mailboxes are inconsistent"> </td>
</Tr>
<Tr>
<Td> QQ: </td> <input name = "QQ" require = "false" dataType = "QQ" msg = "QQ number does not exist"> </td>
</Tr>
<Tr>
<Td> ID Card: </td> <input name = "Card" dataType = "IdCard" msg = "Incorrect ID Card number"> </td>
</Tr>
<Tr>
<Td> Age: </td> <input name = "Year" dataType = "Range" msg = "age must be 18 ~ Between 28 "min =" 18 "max =" 28 "> </td>
</Tr>
<Tr>
<Td> age 1: </td> <input name = "Year1" require = "false" dataType = "Compare" msg = "must be above 18" to = "18" operator = ""GreaterThanEqual"> </td>
</Tr>
<Tr>
<Td> Telephone: </td> <input name = "Phone" require = "false" dataType = "Phone" msg = "Incorrect Phone number"> </td>
</Tr>
<Tr>
<Td> mobile phone: </td> <input name = "Mobile" require = "false" dataType = "Mobile" msg = "Incorrect Mobile phone number"> </td>
</Tr>
<Tr>
<Td> birthday: </td> <input name = "Birthday" dataType = "Date" format = "ymd" msg = "Birthday Date does not exist"> </td>
</Tr>
<Tr>
<Td> zip code: </td> <input name = "Zip" dataType = "Custom" regexp = "^ [1-9] \ d {5} $" msg = "Zip code does not exist "> </td>
</Tr>
<Tr>
<Td> Zip code: </td> <input name = "Zip1" dataType = "Zip" msg = "Zip code does not exist"> </td>
</Tr>
<Tr>
<Td> operating system: </td> <select name = "Operation" dataType = "Require" msg = "operating system not selected"> <option value = ""> select operating System </option> <option value = "Win98"> Win98 </option> <option value = "Win2k"> Win2k </option> <option value = "WinXP"> winXP </option> </select> </td>
</Tr>
<Tr>
<Td> province: </td> <td> Guangdong <input name = "Province" value = "1" type = "radio"> Shaanxi <input name = "Province" value = "2" type = "radio"> Zhejiang <input name = "Province" value = "3" type = "radio"> Jiangxi <input name = "Province" value = "4" type =" radio "dataType =" Group "msg =" A province must be selected "> </td>
</Tr>
<Tr>
<Td> Hobbies: </td> <td> exercise <input name = "Favorite" value = "1" type = "checkbox"> surfing the Internet <input name = "Favorite" value = "2" type = "checkbox"> listening to music <input name = "Favorite" value = "3" type = "checkbox"> reading <input name = "Favorite" value = "4" type =" checkbox "" dataType = "Group" min = "2" max = "3" msg = "2 ~ 3 hobbies "> </td>
</Tr>
<Td> self-introduction: </td> <textarea name = "Description" dataType = "Limit" max = "10" msg = "self-introduction content must be within 10 words"> Chinese is one word </textarea> </td>
</Tr>
<Td> autobiography: </td> <textarea name = "History" dataType = "LimitB" min = "3" max = "10" msg = "autobiography content must be in [3, 10] within bytes "> the Chinese character is two bytes t </textarea> </td>
</Tr>
<Tr>
<Td colspan = "2"> <input name = "Submit" type = "submit" value = "Confirm submission"> <input onClick = "Validator. validate (document. getElementById ('Demo') "value =" Test Mode 1 "type =" button "> <input onClick =" Validator. validate (document. getElementById ('Demo'), 2) "value =" Test Mode 2 "type =" button "> <input onClick =" Validator. validate (document. getElementById ('Demo'), 3) "value =" Test Mode 3 "type =" button "> </td>
</Tr>
</Form>
</Table>
<Script>
/*************************************** **********
Validator v1.01
Code by my Buddha
Wfsr@cunite.com
Http://www.cunite.com
**************************************** *********/
Validator = {
Require:/. + /,
Email:/^ \ w + ([-+.] \ w +) * @ \ w + ([-.] \ w + )*\. \ w + ([-.] \ w +) * $ /,
Phone:/^ (\ d {3} \) | (\ d {3 }\-))? (\ (0 \ d {2, 3} \) | 0 \ d {2, 3 }-)? [1-9] \ d {6, 7} $ /,
Mobile:/^ (\ d {3} \) | (\ d {3 }\-))? 13 \ d {9} $ /,
Url:/^ http: \/[A-Za-z0-9] + \. [A-Za-z0-9] + [\/= \? % \-&_~ '@ [\] \': +!] * ([^ <> \ "\"]) * $ /,
IdCard:/^ \ d {15} (\ d {2} [A-Za-z0-9])? $ /,
Currency:/^ \ d + (\. \ d + )? $ /,
Number:/^ \ d + $ /,
Zip:/^ [1-9] \ d {5} $ /,
QQ:/^ [1-9] \ d {4, 8} $ /,
Integer:/^ [-\ +]? \ D + $ /,
Double:/^ [-\ +]? \ D + (\. \ d + )? $ /,
English:/^ [A-Za-z] + $ /,
Chinese:/^ [\ u0391-\ uFFE5] + $ /,
UnSafe:/^ ([A-Z] * | [a-z] * | \ d * | [-_\~! @ # \ $ % \ ^ & \ * \. \ (\) \ [\] \ {\} <> \? \/\ '\ "] *) |. {0, 5}) $ | \ s /,
IsSafe: function (str) {return! This. UnSafe. test (str );},
SafeString: "this. IsSafe (value )",
Limit: "this. limit (value. length, getAttribute ('Min'), getAttribute ('max '))",
LimitB: "this. limit (this. LenB (value), getAttribute ('Min'), getAttribute ('max '))",
Date: "this. IsDate (value, getAttribute ('Min'), getAttribute ('format '))",
Repeat: "value = document. getElementsByName (getAttribute ('to') [0]. value ",
Range: "getAttribute ('Min') <value & value <getAttribute ('max ')",
Compare: "this. compare (value, getAttribute ('operator'), getAttribute ('to '))",
Custom: "this. Exec (value, getAttribute ('regexp '))",
Group: "this. MustChecked (getAttribute ('name'), getAttribute ('Min'), getAttribute ('max '))",
ErrorItem: [document. forms [0],
ErrorMessage: ["failed submission due to the following reasons: \ t"],
Validate: function (theForm, mode ){
Var obj = theForm | event. srcElement;
Var count = obj. elements. length;
This. ErrorMessage. length = 1;
This. ErrorItem. length = 1;
This. ErrorItem [0] = obj;
For (var I = 0; I <count; I ++ ){
With (obj. elements [I]) {
Var _ dataType = getAttribute ("dataType ");
If (typeof (_ dataType) = "object" | typeof (this [_ dataType]) = "undefined") continue;
This. ClearState (obj. elements [I]);
If (getAttribute ("require") = "false" & value = "") continue;
Switch (_ dataType ){
Case "Date ":
Case "Repeat ":
Case "Range ":
Case "Compare ":
Case "Custom ":
Case "Group ":
Case "Limit ":
Case "LimitB ":
Case "SafeString ":
If (! Eval (this [_ dataType]) {
This. AddError (I, getAttribute ("msg "));
}
Break;
Default:
If (! This [_ dataType]. test (value )){
This. AddError (I, getAttribute ("msg "));
}
Break;
}
}
}
If (this. ErrorMessage. length> 1 ){
Mode = mode | 1;
Var errCount = this. ErrorItem. length;
Switch (mode ){
Case 2:
For (var I = 1; I <errCount; I ++)
This. ErrorItem [I]. style. color = "red ";
Case 1:
Alert (this. ErrorMessage. join ("\ n "));
This. ErrorItem [1]. focus ();
Break;
Case 3:
For (var I = 1; I <errCount; I ++ ){
Try {
Var span = document. createElement ("SPAN ");
Span. id = "_ ErrorMessagePanel ";
Span. style. color = "red ";
This. ErrorItem [I]. parentNode. appendChild (span );
Span. innerHTML = this. ErrorMessage [I]. replace (/\ d + :/,"*");
}
Catch (e) {alert (e. description );}
}
This. ErrorItem [1]. focus ();
Break;
Default:
Alert (this. ErrorMessage. join ("\ n "));
Break;
}
Return false;
}
Return true;
},
Limit: function (len, min, max ){
Min = min | 0;
Max = max | Number. MAX_VALUE;
Return min <= len & len <= max;
},
LenB: function (str ){
Return str. replace (/[^ \ x00-\ xff]/g, "**"). length;
},
ClearState: function (elem ){
With (elem ){
If (style. color = "red ")
Style. color = "";
Var lastNode = parentNode. childNodes [parentNode. childNodes. length-1];
If (lastNode. id = "_ ErrorMessagePanel ")
ParentNode. removeChild (lastNode );
}
},
AddError: function (index, str ){
This. ErrorItem [this. ErrorItem. length] = this. ErrorItem [0]. elements [index];
This. ErrorMessage [this. ErrorMessage. length] = this. ErrorMessage. length + ":" + str;
},
Exec: function (op, reg ){
Return new RegExp (reg, "g"). test (op );
},
Compare: function (op1, operator, op2 ){
Switch (operator ){
Case "NotEqual ":
Return (op1! = Op2 );
Case "GreaterThan ":
Return (op1> op2 );
Case "GreaterThanEqual ":
Return (op1> = op2 );
Case "LessThan ":
Return (op1 <op2 );
Case "LessThanEqual ":
Return (op1 <= op2 );
Default:
Return (op1 = op2 );
}
},
MustChecked: function (name, min, max ){
Var groups = document. getElementsByName (name );
Var hasChecked = 0;
Min = min | 1;
Max = max | groups. length;
For (var I = groups. length-1; I> = 0; I --)
If (groups [I]. checked) hasChecked ++;
Return min <= hasChecked & hasChecked <= max;
},
IsDate: function (op, formatString ){
FormatString = formatString | "ymd ";
Var m, year, month, day;
Switch (formatString ){
Case "ymd ":
M = op. match (new RegExp ("^ (\ d {4}) | (\ d {2 }))([-. /]) (\ d {1, 2}) \ 4 (\ d {1, 2}) $ "));
If (m = null) return false;
Day = m [6];
Month = m [5] --;
Year = (m [2]. length = 4 )? M [2]: GetFullYear (parseInt (m [3], 10 ));
Break;
Case "dmy ":
M = op. match (new RegExp ("^ (\ d {1, 2 })([-. /]) (\ d {1, 2}) \ 2 (\ d {4}) | (\ d {2}) $ "));
If (m = null) return false;
Day = m [1];
Month = m [3] --;
Year = (m [5]. length = 4 )? M [5]: GetFullYear (parseInt (m [6], 10 ));
Break;
Default:
Break;
}
If (! ParseInt (month) return false;
Month = 12? 0: month;
Var date = new Date (year, month, day );
Return (typeof (date) = "object" & year = date. getFullYear () & month = date. getMonth () & day = date. getDate ());
Function GetFullYear (y) {return (y <30? "20": "19") + y) | 0 ;}
}
}
</Script>