Super Powerful form validation _javascript

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" &GT;&LT;/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>
&LT;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>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.