应用时,直接把JavaScript代码copy到一个JS文件中,然后引用到表单页面中,在form中调用JS验证类,在表单控件中直接加入属性即可。
用起来效率很高,那效果是嘎嘎地。具体用法可参考代码中的例子。
<
title
>
表单验证类 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 > 真实姓名: </ td >< td >< input name ="Name" dataType ="Chinese" msg ="真实姓名只允许中文" ></ td >
</ tr >
< tr >
< td > 英文名: </ td >< td >< input name ="Nick" dataType ="English" require ="false" msg ="英文名只允许英文字母" ></ td >
</ tr >
< tr >
< td > 主页: </ td >< td >< input name ="Homepage" require ="false" dataType ="Url" msg ="非法的Url" ></ td >
</ tr >
< tr >
< td > 密码: </ td >< td >< input name ="Password" dataType ="SafeString" msg ="密码不符合安全规则" type ="password" ></ td >
</ tr >
< tr >
< td > 重复: </ td >< td >< input name ="Repeat" dataType ="Repeat" to ="Password" msg ="两次输入的密码不一致" type ="password" ></ td >
</ tr >
< tr >
< td > 信箱: </ td >< td >< input name ="Email" dataType ="Email" msg ="信箱格式不正确" ></ td >
</ tr >
< tr >
< td > 信箱: </ td >< td >< input name ="Email" dataType ="Repeat" to ="Email" msg ="两次输入的信箱不一致" ></ td >
</ tr >
< tr >
< td > QQ: </ td >< td >< input name ="QQ" require ="false" dataType ="QQ" msg ="QQ号码不存在" ></ td >
</ tr >
< tr >
< td > 身份证: </ td >< td >< input name ="Card" dataType ="IdCard" msg ="身份证号码不正确" ></ td >
</ tr >
< tr >
< td > 年龄: </ td >< td >< input name ="Year" dataType ="Range" msg ="年龄必须在18~28之间" min ="18" max ="28" ></ td >
</ tr >
< tr >
< td > 年龄1: </ td >< td >< input name ="Year1" require ="false" dataType ="Compare" msg ="年龄必须在18以上" to ="18" operator ="GreaterThanEqual" ></ td >
</ tr >
< tr >
< td > 电话: </ td >< td >< input name ="Phone" require ="false" dataType ="Phone" msg ="电话号码不正确" ></ td >
</ tr >
< tr >
< td > 手机: </ td >< td >< input name ="Mobile" require ="false" dataType ="Mobile" msg ="手机号码不正确" ></ td >
</ tr >
< tr >
< td > 生日: </ td >< td >< input name ="Birthday" dataType ="Date" format ="ymd" msg ="生日日期不存在" ></ td >
</ tr >
< tr >
< td > 邮政编码: </ td >< td >< input name ="Zip" dataType ="Custom" regexp ="^[1-9]d{5}$" msg ="邮政编码不存在" ></ td >
</ tr >
< tr >
< td > 邮政编码: </ td >< td >< input name ="Zip1" dataType ="Zip" msg ="邮政编码不存在" ></ td >
</ tr >
< tr >
< td > 操作系统: </ td >< td >< select name ="Operation" dataType ="Require" msg ="未选择所用操作系统" >< option value ="" > 选择您所用的操作系统 </ option >< option value ="Win98" > Win98 </ option >< option value ="Win2k" > Win2k </ option >< option value ="WinXP" > WinXP </ option ></ select ></ td >
</ tr >
< tr >
< td > 所在省份: </ td >< td > 广东 < input name ="Province" value ="1" type ="radio" > 陕西 < input name ="Province" value ="2" type ="radio" > 浙江 < input name ="Province" value ="3" type ="radio" > 江西 < input name ="Province" value ="4" type ="radio" dataType ="Group" msg ="必须选定一个省份" ></ td >
</ tr >
< tr >
< td > 爱好: </ td >< td > 运动 < input name ="Favorite" value ="1" type ="checkbox" > 上网 < input name ="Favorite" value ="2" type ="checkbox" > 听音乐 < input name ="Favorite" value ="3" type ="checkbox" > 看书 < input name ="Favorite" value ="4" type ="checkbox" " dataType ="Group" min ="2" max ="3" msg ="必须选择2~3种爱好" ></ td >
</ tr >
< td > 自我介绍: </ td >< td >< textarea name ="Description" dataType ="Limit" max ="10" msg ="自我介绍内容必须在10个字之内" > 中文是一个字 </ textarea ></ td >
</ tr >
< td > 自传: </ td >< td >< textarea name ="History" dataType ="LimitB" min ="3" max ="10" msg ="自传内容必须在[3,10]个字节之内" > 中文是两个字节t </ textarea ></ td >
</ tr >
< tr >
< td colspan ="2" >< input name ="Submit" type ="submit" value ="确定提交" >< input onClick ="Validator.Validate(document.getElementById('demo'))" value ="检验模式1" type ="button" >< input onClick ="Validator.Validate(document.getElementById('demo'),2)" value ="检验模式2" type ="button" >< input onClick ="Validator.Validate(document.getElementById('demo'),3)" value ="检验模式3" type ="button" ></ td >
</ tr >
</ form >
</ table >
< script >
/* ************************************************
Validator v1.01
code by 我佛山人
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 : /^[Α-¥]+$/,
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 : ["以下原因导致提交失败: "],
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(" "));
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(" "));
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(/[^
< 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 > 真实姓名: </ td >< td >< input name ="Name" dataType ="Chinese" msg ="真实姓名只允许中文" ></ td >
</ tr >
< tr >
< td > 英文名: </ td >< td >< input name ="Nick" dataType ="English" require ="false" msg ="英文名只允许英文字母" ></ td >
</ tr >
< tr >
< td > 主页: </ td >< td >< input name ="Homepage" require ="false" dataType ="Url" msg ="非法的Url" ></ td >
</ tr >
< tr >
< td > 密码: </ td >< td >< input name ="Password" dataType ="SafeString" msg ="密码不符合安全规则" type ="password" ></ td >
</ tr >
< tr >
< td > 重复: </ td >< td >< input name ="Repeat" dataType ="Repeat" to ="Password" msg ="两次输入的密码不一致" type ="password" ></ td >
</ tr >
< tr >
< td > 信箱: </ td >< td >< input name ="Email" dataType ="Email" msg ="信箱格式不正确" ></ td >
</ tr >
< tr >
< td > 信箱: </ td >< td >< input name ="Email" dataType ="Repeat" to ="Email" msg ="两次输入的信箱不一致" ></ td >
</ tr >
< tr >
< td > QQ: </ td >< td >< input name ="QQ" require ="false" dataType ="QQ" msg ="QQ号码不存在" ></ td >
</ tr >
< tr >
< td > 身份证: </ td >< td >< input name ="Card" dataType ="IdCard" msg ="身份证号码不正确" ></ td >
</ tr >
< tr >
< td > 年龄: </ td >< td >< input name ="Year" dataType ="Range" msg ="年龄必须在18~28之间" min ="18" max ="28" ></ td >
</ tr >
< tr >
< td > 年龄1: </ td >< td >< input name ="Year1" require ="false" dataType ="Compare" msg ="年龄必须在18以上" to ="18" operator ="GreaterThanEqual" ></ td >
</ tr >
< tr >
< td > 电话: </ td >< td >< input name ="Phone" require ="false" dataType ="Phone" msg ="电话号码不正确" ></ td >
</ tr >
< tr >
< td > 手机: </ td >< td >< input name ="Mobile" require ="false" dataType ="Mobile" msg ="手机号码不正确" ></ td >
</ tr >
< tr >
< td > 生日: </ td >< td >< input name ="Birthday" dataType ="Date" format ="ymd" msg ="生日日期不存在" ></ td >
</ tr >
< tr >
< td > 邮政编码: </ td >< td >< input name ="Zip" dataType ="Custom" regexp ="^[1-9]d{5}$" msg ="邮政编码不存在" ></ td >
</ tr >
< tr >
< td > 邮政编码: </ td >< td >< input name ="Zip1" dataType ="Zip" msg ="邮政编码不存在" ></ td >
</ tr >
< tr >
< td > 操作系统: </ td >< td >< select name ="Operation" dataType ="Require" msg ="未选择所用操作系统" >< option value ="" > 选择您所用的操作系统 </ option >< option value ="Win98" > Win98 </ option >< option value ="Win2k" > Win2k </ option >< option value ="WinXP" > WinXP </ option ></ select ></ td >
</ tr >
< tr >
< td > 所在省份: </ td >< td > 广东 < input name ="Province" value ="1" type ="radio" > 陕西 < input name ="Province" value ="2" type ="radio" > 浙江 < input name ="Province" value ="3" type ="radio" > 江西 < input name ="Province" value ="4" type ="radio" dataType ="Group" msg ="必须选定一个省份" ></ td >
</ tr >
< tr >
< td > 爱好: </ td >< td > 运动 < input name ="Favorite" value ="1" type ="checkbox" > 上网 < input name ="Favorite" value ="2" type ="checkbox" > 听音乐 < input name ="Favorite" value ="3" type ="checkbox" > 看书 < input name ="Favorite" value ="4" type ="checkbox" " dataType ="Group" min ="2" max ="3" msg ="必须选择2~3种爱好" ></ td >
</ tr >
< td > 自我介绍: </ td >< td >< textarea name ="Description" dataType ="Limit" max ="10" msg ="自我介绍内容必须在10个字之内" > 中文是一个字 </ textarea ></ td >
</ tr >
< td > 自传: </ td >< td >< textarea name ="History" dataType ="LimitB" min ="3" max ="10" msg ="自传内容必须在[3,10]个字节之内" > 中文是两个字节t </ textarea ></ td >
</ tr >
< tr >
< td colspan ="2" >< input name ="Submit" type ="submit" value ="确定提交" >< input onClick ="Validator.Validate(document.getElementById('demo'))" value ="检验模式1" type ="button" >< input onClick ="Validator.Validate(document.getElementById('demo'),2)" value ="检验模式2" type ="button" >< input onClick ="Validator.Validate(document.getElementById('demo'),3)" value ="检验模式3" type ="button" ></ td >
</ tr >
</ form >
</ table >
< script >
/* ************************************************
Validator v1.01
code by 我佛山人
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 : /^[Α-¥]+$/,
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 : ["以下原因导致提交失败: "],
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(" "));
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(" "));
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(/[^