表单验证 正则表达式
2013-04-08 23:33
375 查看
正则表达式另一表单验证形式
<!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=gbk" />
<title>登录与注册</title>
<script type="text/javascript">
var check={
/**/
/*定义提示信息*/
e1:"两次输入的密码不一致",
e2:"-请填写此项",
e3:"-请正确填写此项",
e4:"-输入长度不能小于",
e5:"-输入长度不能超过",
/*定义验证正则表达*/
Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
Phone : /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
Mobile : /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/,
Url : /^http:\/\/[A-Za-z0-9]+\.[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]+$/,
Username : /^[a-z]\w{3,}$/i,
UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,
/*获取表单对象*/
$:function(id){return document.getElementById(id);},
/*获取表单值*/
$v:function(id){return (this.$(id)? this.$(id).value:null);},
toL:function(str){return str.toLowerCase();}, //字符串转换成小写
toU:function(str){return str.toUpperCase();}, //字符串转换成大写
/*检查两次输入的密码是否相同，不同的话返回提示信息*/
pwd:function(id1,id2){with(this){if($v(id1)!=$v(id2)){$(id2).value='';return e1;}return ''}},
/*用正则表达式验证表单值是否符合,如f='REmail4-10'表示必须填写格式为Email的长度4-10的字符串*/
reg:function (id,f){
var val=this.$(id);if(val){val=val.value}else{return 'arguments error'};
/*以下判断表单是否必须填写，如果是表单为空时返回错误*/
if(f.indexOf('R')==0){f=f.substring(1);if(!val)return this.e2;}
/*当表单值不为空时判断值的类型是否符合*/
if(val){
var t=/([A-Za-z]*)(\d*)\-*(\d*)/; //取出判断判断字符串中的规则名称，最小长度，最大长度
if(t.test(f)){
t.exec(f);r1=RegExp.$1;r2=RegExp.$2;r3=RegExp.$3;
if(r1){if(this[r1])if(!this[r1].test(val))return this.e3;}//判断类型
if(r2 && val.length<r2){return this.e4+r2;} //判断长度是否小于设定
if(r3 && val.length>r3){return this.e5+r3;} //判断长度是否超过设定
}
}
return '';
},
/*根据参数类型调用判断函数，返回提示信息*/
error:function(id,id2){with(this){return ((toL(id)!=toL(id2) && $(id2))?pwd(id,id2):reg(id,id2));}},
errors:function(){
var args=arguments,e,ers='';
for(i=0;i<(args.length-1);i+=2){e=this.error(args[i],args[i+1]);if(e)ers+=e;}
return ers; //返回多条出错信息
},
/*弹出提示信息*/
alt:function(){
var args=arguments,e,ers='';
for(i=0;i<(args.length-2);i+=3){e=this.error(args[i],args[i+1]);if(e)ers+=args[i+2]+e+"\n";}
if(ers){ers="以下填写有误:\n"+ers;alert(ers);}
return (ers =='');
},
/*将一条提示信息显示到span*/
info:function(id,id2,span){
with(this){if($(span)){ers=error(id,id2);$(span).innerHTML=ers;return (ers=='');}return false;}
},
/*将多条信息显示到span里面如check.infos('spanid','id1','reg1','info1','id2','reg2','info2')*/
infos:function(span){
with(this){
if($(span)){
var args=arguments,e,ers='';
for(i=1;i<(args.length-2);i+=3){e=this.error(args[i],args[i+1]);if(e)ers+=args[i+2]+e+"\n";}
$(span).innerHTML=ers; return (ers =='');
}return false;
}
}
}
</script>
</head>
<body>
<div>
<form action="" method="post" onsubmit="return check.infos('errors','name','RUsername','姓名','eml','REmail','电子邮箱');">
<div id="errors">
<label>注册名称
<input name="name" maxlength="15" type="text"/><span id="forname"></span></label><br />
<label>登录密码
<input name="pwd1" type="text" onblur="return"/></label><br />
<label>重复密码
<input name="pwd2" type="text" onblur="check.info('pwd1','pwd2','pp')"/>
<span id="pp"></span></label><br />
<label>电子邮箱
<input name="eml" type="text" onblur=""/></label><br />
<input name="actions" type="submit" />
</form>
</body>
</html>
<!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=gbk" />
<title>登录与注册</title>
<script type="text/javascript">
var check={
/**/
/*定义提示信息*/
e1:"两次输入的密码不一致",
e2:"-请填写此项",
e3:"-请正确填写此项",
e4:"-输入长度不能小于",
e5:"-输入长度不能超过",
/*定义验证正则表达*/
Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
Phone : /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
Mobile : /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/,
Url : /^http:\/\/[A-Za-z0-9]+\.[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]+$/,
Username : /^[a-z]\w{3,}$/i,
UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,
/*获取表单对象*/
$:function(id){return document.getElementById(id);},
/*获取表单值*/
$v:function(id){return (this.$(id)? this.$(id).value:null);},
toL:function(str){return str.toLowerCase();}, //字符串转换成小写
toU:function(str){return str.toUpperCase();}, //字符串转换成大写
/*检查两次输入的密码是否相同，不同的话返回提示信息*/
pwd:function(id1,id2){with(this){if($v(id1)!=$v(id2)){$(id2).value='';return e1;}return ''}},
/*用正则表达式验证表单值是否符合,如f='REmail4-10'表示必须填写格式为Email的长度4-10的字符串*/
reg:function (id,f){
var val=this.$(id);if(val){val=val.value}else{return 'arguments error'};
/*以下判断表单是否必须填写，如果是表单为空时返回错误*/
if(f.indexOf('R')==0){f=f.substring(1);if(!val)return this.e2;}
/*当表单值不为空时判断值的类型是否符合*/
if(val){
var t=/([A-Za-z]*)(\d*)\-*(\d*)/; //取出判断判断字符串中的规则名称，最小长度，最大长度
if(t.test(f)){
t.exec(f);r1=RegExp.$1;r2=RegExp.$2;r3=RegExp.$3;
if(r1){if(this[r1])if(!this[r1].test(val))return this.e3;}//判断类型
if(r2 && val.length<r2){return this.e4+r2;} //判断长度是否小于设定
if(r3 && val.length>r3){return this.e5+r3;} //判断长度是否超过设定
}
}
return '';
},
/*根据参数类型调用判断函数，返回提示信息*/
error:function(id,id2){with(this){return ((toL(id)!=toL(id2) && $(id2))?pwd(id,id2):reg(id,id2));}},
errors:function(){
var args=arguments,e,ers='';
for(i=0;i<(args.length-1);i+=2){e=this.error(args[i],args[i+1]);if(e)ers+=e;}
return ers; //返回多条出错信息
},
/*弹出提示信息*/
alt:function(){
var args=arguments,e,ers='';
for(i=0;i<(args.length-2);i+=3){e=this.error(args[i],args[i+1]);if(e)ers+=args[i+2]+e+"\n";}
if(ers){ers="以下填写有误:\n"+ers;alert(ers);}
return (ers =='');
},
/*将一条提示信息显示到span*/
info:function(id,id2,span){
with(this){if($(span)){ers=error(id,id2);$(span).innerHTML=ers;return (ers=='');}return false;}
},
/*将多条信息显示到span里面如check.infos('spanid','id1','reg1','info1','id2','reg2','info2')*/
infos:function(span){
with(this){
if($(span)){
var args=arguments,e,ers='';
for(i=1;i<(args.length-2);i+=3){e=this.error(args[i],args[i+1]);if(e)ers+=args[i+2]+e+"\n";}
$(span).innerHTML=ers; return (ers =='');
}return false;
}
}
}
</script>
</head>
<body>
<div>
<form action="" method="post" onsubmit="return check.infos('errors','name','RUsername','姓名','eml','REmail','电子邮箱');">
<div id="errors">
<label>注册名称
<input name="name" maxlength="15" type="text"/><span id="forname"></span></label><br />
<label>登录密码
<input name="pwd1" type="text" onblur="return"/></label><br />
<label>重复密码
<input name="pwd2" type="text" onblur="check.info('pwd1','pwd2','pp')"/>
<span id="pp"></span></label><br />
<label>电子邮箱
<input name="eml" type="text" onblur=""/></label><br />
<input name="actions" type="submit" />
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 正则表达式验证表单
- 表单验证常用正则表达式
- JavaScript表单验证和正则表达式
- 正则表达式表单验证
- javascript 验证表单 正则表达式
- 前端表单验证常用的15个JS正则表达式
- Javascript-网页编程-DHTML-表单验证技术(正则表达式)
- JS通用表单验证函数,基于javascript正则表达式
- 表单验证—正则表达式
- 表单验证-正则表达式
- ASP.NET表单验证之Form
- 自己整理 可用的 表单验证（表单项不能为空）js自定义trim操作
- vue中使用element-ui进行表单验证的实例代码
- 从阿里妈妈发现的几个不错的表单验证函数
- ASP表单验证（一）
- jQuery表单验证插件解析(推荐)
- ASP.NET学习手记:验证用户表单输入
- JavaScript表单即时验证 验证不成功不能提交
- 用ASP动态生成JavaScript的表单验证代码
- 拥有一个属于自己的javascript表单验证插件