Super Powerful form validation _javascript
Last Update:2017-01-18
Source: Internet
Author: User
<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><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= "Chinese" require= "false" msg= "English name only allowed letter" > </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> e-mail: </td><td><input name= "email" datatype= "Email" msg= "mailbox format is not correct" ></td>
</tr>
<tr>
<td> e-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=" 18 "Operator=" Greaterthanequal "></td>
</tr>
<tr>
<td> Tel: </td><td><input name= "Phone" require= "false" datatype= "Phone" msg= "phone number is incorrect" ></td >
</tr>
<tr>
<td> Mobile: </td><td><input name= "mobile" require= "false" datatype= "mobile" msg= "cell phone number is incorrect" ></ Td>
</tr>
<tr>
<td> Birthdays: </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= "No Operating system selected" ><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 access <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= "biographical content must be in [3,10] Bytes "> Chinese is two bytes t</textarea></td>
</tr>
<tr>
<TD colspan= "2" ><input name= "Submit" type= "submit" value= "determined to 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.01
Code by I 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 (\\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 = 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?) "A": "") + y) |
}
}
</script>