万能js表单骓证

万能js表单骓证是一款比较好的表单js代码,你只需要了解基本用法即可.

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 : ["以下原因导致提交失败：\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]-1;
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]-1;
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)|0;}
}
}

使用方法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>这是一个测试</title>
<script src="inc/js.js" charset="utf-8" language="javascript"></script>
</head>
<body>
<form id="form1" name="form1" method="post" action="email.php?action=sends" onsubmit="return Validator.Validate(this,3);">
<table width="100%" cellspacing="0" cellpadding="5" border="1" align="center" class="table">	
	<input type="hidden" name="id" value=""><tbody>
	<tr><td width="15%" align="right">会员账号：</td>
	<td> <input type="text" name="user" value="" size="20" datatype="LimitB" min="3" max="20" msg="用户名必须在3,20个字节之内"></td></tr>
	<tr><td align="right"> 密码：</td>
	<td><input type="password" name="password" value="" size="40" datatype="LimitB" min="6" max="20" msg="密码必须在6,20个字节之内"></td></tr> 
	 <tr><td align="right">重复密码： </td><td><input type="password" name="password2" value="" size="40" datatype="Repeat" to="password" msg="两次输入的密码不一致"></td></tr> 
	 <tr><td align="right">邮箱地址： </td><td><input type="text" datatype="Email" msg="请正确填写电子邮件" name="email" value="" size="40"></td></tr>
	 <tr><td align="right">积分： </td><td><input type="text" name="points" value="" size="20"></td></tr>
	 <tr><td align="right">真实姓名： </td><td><input type="text" name="name" value="" size="20"></td></tr> 
	 <tr><td align="right">性别： </td><td> <select name="sex">  <option selected="">性别</option>   <option value="女">女</option>  
	 <option value="男">男</option> </select></td></tr>  
	 <tr><td align="right">出生日期： </td><td><input type="text" format="ymd" datatype="Date" msg="请正确填写日期格式" name="brith" value="" size="20">  日期格式为(yyyy-mm-dd)</td></tr>				
	 <tr><td align="right">地区： </td><td> 
	 <select onchange="chageprovice(this.value);" id="provice" name="provice">  <option value="1">北京市</option><option value="2">上海市</option><option value="3">天津市</option><option value="4">重庆市</option><option value="5">河北省</option><option value="6">山西省</option><option value="7">内蒙古自治区</option><option value="8">辽宁省</option><option value="9">吉林省</option><option value="10">黑龙江省</option><option value="11">江苏省</option><option value="12">浙江省</option><option value="13">安徽省</option><option value="14">福建省</option><option value="15">江西省</option><option value="16">山东省</option><option value="17">河南省</option><option value="18">湖北省</option><option value="19">湖南省</option><option value="20">广东省</option><option value="21">广西壮族自治区</option><option value="22">海南省</option><option value="23">四川省</option><option value="24">贵州省</option><option value="25">云南省</option><option value="26">西藏自治区</option><option value="27">陕西省</option><option value="28">甘肃省</option><option value="29">青海省</option><option value="30">宁夏回族自治区</option><option value="31">新疆维吾尔自治区</option><option value="32">台湾省</option><option value="33">香港特别行政区</option><option value="34">澳门特别行政区</option></select>
	 <select onchange="chagecity(this.value);" id="city" name="city">  <option value="35">东城区</option><option value="36">西城区</option><option value="37">崇文区</option><option value="38">宣武区</option><option value="39">朝阳区</option><option value="40">丰台区</option><option value="41">石景山区</option><option value="42">海淀区</option><option value="43">门头沟区</option><option value="44">房山区</option><option value="45">通州区</option><option value="46">顺义区</option><option value="47">昌平区</option><option value="48">大兴区</option><option value="49">怀柔区</option><option value="50">平谷区</option><option value="51">密云县</option><option value="52">延庆县</option></select>
	 <select id="area" name="area" style="display: none;">  <option selected="">--请输入城区--</option></select>	 
	 </td></tr>
	 <tr><td align="right">手机： </td><td><input type="text" datatype="Mobile" msg="请填手机" name="phone" value="" size="20"></td></tr>				  
	 <tr><td align="right">电话： </td><td><input type="text" datatype="Phone" msg="请填电话地址" name="tel" value="" size="20">  电话格式为(020-82868828)</td></tr>				  
	 <tr><td align="right">地址： </td><td><input type="text" datatype="Require" msg="请填居住地址" name="address" value="" size="40"></td></tr>				  
	 <tr align="center"><td colspan="2"><input type="submit" name="Submit_edit" value="确定修改"></td></tr></tbody></table>
</form>
</body>
</html>