A very powerful complete Web Form verifier (JavaScript) __web
Last Update:2018-07-25
Source: Internet
Author: User
Validator Complete code:
<title> form Verification Class Validator v1.0</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;overflow: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><td><input name= "name" datatype= "Chinese"
msg= "real name only allowed in Chinese" ></td>
</tr>
<tr>
<td> English Name: </td><td><input name= "Nick" datatype= "中文版"
Require= "false" msg= "English name only allowed English alphabet" ></td>
</tr>
<tr>
<td> Home: </td><td><input name= "homepage" require= "false"
Datatype= "url" msg= "Illegal url" ></td>
</tr>
<tr>
<td> Password: </td><td><input name= "Password" datatype= "safestring"
msg= "Password does not conform to security rules" type= "password" ></td>
</tr>
<tr>
<td> repeat: </td><td><input name= "Repeat" datatype= "Repeat"
To= "Password" msg= "Two input passwords inconsistent" type= "Password" ></td>
</tr>
<tr>
<td> Mail: </td><td><input name= "email" datatype= "email"
msg= "Mailbox format not correct" ></td>
</tr>
<tr>
<td> Mail: </td><td><input name= "Email" datatype= "Repeat"
to= "Email" msg= "two-input mailbox inconsistency" ></td>
</tr>
<tr>
<td>qq:</td><td><input name= "QQ" require= "false"
Datatype= "QQ" msg= "QQ number does not exist" ></td>
</tr>
<tr>
<td> ID: </td><td><input name= "card" datatype= "Idcard"
msg= "wrong ID number" ></td>
</tr>
<tr>
<td> Age: </td><td><input name= "Year" datatype= "Range"
Msg= "Age must be between 18~28" min= "max=" ></td>
</tr>
<tr>
<td> age 1:</td><td><input name= "Year1" require= "false"
Datatype= "Compare" msg= age must be above 18 "to=" operator= "Greaterthanequal" ></td>
</tr>
<tr>
<td> Tel: </td><td><input name= "Phone" require= "false"
Datatype= "Phone" msg= "wrong Number" ></td>
</tr>
<tr>
<td> Mobile: </td><td><input name= "mobile" require= "false"
Datatype= "mobile" msg= "cell phone number is incorrect" ></td>
</tr>
<tr>
<td> Birthday: </td><td><input name= "Birthday" datatype= "Date"
format= "Ymd" msg= "Birthday date does not exist" ></td>
</tr>
<tr>
<td> zip Code: </td><td><input name= "Zip" datatype= "Custom"
regexp= "^[1-9]/d{5}$" msg= "ZIP code does not exist" ></td>
</tr>
<tr>
<td> Postal Code: </td><td><input name= "Zip1" datatype= "Zip"
msg= "ZIP code does not exist" ></td>
</tr>
<tr>
<td> operating system: </td><td><select name= "Operation" datatype= "Require"
Msg= "Not selected operating system" ><option value= "> select the operating system you are using </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= "must select a province" ></td>
</tr>
<tr>
<td> Hobby:</td><td> Sports <input name= "favorite" value= "1"
type= "checkbox" > 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= "must choose 2~3 kind of hobby" ></td>
</tr>
<td> Self Introduction: </td><td><textarea name= "Description"
Datatype= "Limit" max= "msg=" Self introduction content must be within 10 words "> Chinese is a word </textarea></td>
</tr>
<td> autobiography: </td><td><textarea name= "History" datatype= "LIMITB"
Min= "3" max= "msg=" autobiographical content must be within [3,10] bytes "> Chinese is two bytes t</textarea></td>
</tr>
<tr>
<TD colspan= "2" ><input name= "Submit" type= "Submit"
Value= "OK submit" ><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.0
Cody by me Foshan people
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+)? $/,
中文版:/^[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: [The following causes failed to commit:/t/t/t/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 ("^//s*" (//d{4}) | ( D{2})) ([-./]) (//d{1,2})//4 (//d{1,2})//s*$));
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 ("^//s* (//d{1,2}) ([-./]) (//d{1,2})//2 ((//d{4}) | ( D{2})) (//s*$));
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
}
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) |
}
}
</script>