客户端表单验证js

现在的位置: 首页 > 综合 > 正文

客户端表单验证js

2013年06月25日 ⁄ 综合 ⁄ 共 5585字 ⁄ 字号小中大 ⁄ 评论关闭

写了个前台表单验证的js，拿来分享一下。
实现的功能：对于注册到验证器中的控件，按照注册类型进行检验，如果输入符

合规则哪么在该控件右侧提示输入正确的信息，否则提示错误信息。Date类型只

是验证形式，有待改进。

【原创】转载请注明出处！

//输入框类型
var inputType={
 email:"email",
 date:"date",
 number:"number",
 phone:"phone",
 password:"password",
 rePassword:"rePassword",
 submit:"submit",
 notEmpty:"notEmpty",
 canEmptyIsEmail:"emptyEmail",
 canEmptyIsPhone:"emptyPhone"
}

var validator=new validatorObj();

function validatorObj(){

 this.inputs=new Array();
 //显示信息span的id后缀：对应空间id+show
 this.suffix="show";
 this.password={};
 this.rePassword={};
 this.submit={};

 //输入框对应的正则表达式
 this.getRegex=function(type){
 var reg=null;
 switch(type)
 {
 case inputType.email:
 reg=/^(\w|\d)+@(\w|\d)+(\.(\w|\d)+)+$/;break;
 case inputType.date:
 reg=/^\d{4}-\d{1,2}-\d{1,2}$/;break;
 case inputType.number:
 reg=/^\d+$/;break;
 case inputType.phone:
 reg=/^(\d{8}|(\d{3,4}-\d{8})|\d{11})$/;break;
 case inputType.password:
 reg=/.+/;break;
 case inputType.notEmpty:
 reg=/.+/;break;
 case inputType.canEmptyIsEmail:
 reg=/^(\s?|((\w|\d)+@(\w|\d)+(\.(\w|\d)+)+))$/;break;
 case inputType.canEmptyIsPhone:
 reg=/^(\s?|((\d{8}|(\d{3,4}-\d{8})|\d{11}){1}))$/;break;
 }
 return reg;
 }
 //输入不符合规则显示的错误信息
 this.getErrorMessage=function(type){
 var em="";
 switch(type)
 {
 case inputType.email:
 em="Email格式不正确！如：xxx@xx.xx";break;
 case inputType.date:
 em="日期格式不正确！如：2008-08-08";break;
 case inputType.number:
 em="必须为数字！";break;
 case inputType.phone:
 em="电话号码格式不正确！";break;
 case inputType.rePassword:
 em="两次输入的密码不一致！请重新输入！";break;
 default:
 em="输入数据不符合要求！";break;
 }
 return ""+em+"";
 }
 //输入框获得焦点的提示信息
 this.getSuggestMessage=function(type){
 var rm="";
 switch(type)
 {
 case inputType.email:
 rm="请输入正确的Email格式！如：xxx@xx.xx";break;
 case inputType.date:
 rm="请输入合法日期！";break;
 case inputType.number:
 rm="请输入内容必须为数字！";break;
 case inputType.phone:
 rm="请输入合法的电话！";break;
 case inputType.password:
 rm="请输入密码！";break;
 case inputType.rePassword:
 rm="请确认密码！";break;
 default:
 rm="请输入合法数据！";break;
 }
 return ""+rm+"";
 }

 //输入正确提示信息
 this.getRightMessage=function(type){
 return "输入信息格式正确！";
 }
 //添加文本框对应的提示信息节点
 this.setShowLabel=function(id){
 var label=document.createElement("");
 label.setAttribute("id",id+this.suffix);
 document.getElementById(id).parentNode.appendChild(label);
 return label;
 }
 //设置提交按钮的状态
 this.setSubmit=function(){
 var disabled=true;
 var type="";
 for(ele in this.inputs)
 {
 if(this.inputs[ele].type==inputType.rePassword)
 {
 disabled=(validator.rePassword.value==validator.password.value)&&disabled;
 }
 else
 {
 if(this.inputs[ele].type!=inputType.submit)
 {
 disabled=validator.getRegex(this.inputs[ele].type).test(document.getElementById(this.inputs[ele]["id"]).value)&&disabled;
 }
 }
 if(!disabled)break;
 }
 this.submit.disabled=!disabled;
 }
 //设置文本框获得焦点响应事件
 this.setFocusFunc=function(id,type,label){
 document.getElementById(id).onfocus=function(){label.innerHTML=validator.getSuggestMessage(type);}
 }
 //设置文本框失去焦点的响应事件
 this.setBlurFunc=function(id,type,label){
 //重复密码文本框onfocus方法
 if(type==inputType.rePassword){
 document.getElementById(id).onblur=function(){
 var ele=validator.password;
 if(ele.value==null||ele.value=="")
 {
 label.innerHTML="在此处确认密码！";
 }
 else
 {
 if(ele.value!=document.getElementById(id).value)
 {
 label.innerHTML="两次输入的密码不一致，请重新输入！";
 }
 else
 {
 label.innerHTML=validator.getRightMessage(type);
 }
 }
 validator.setSubmit();
 }
 return;
 }
 //普通文本框onfocus方法
 document.getElementById(id).onblur=function(){
 if(validator.getRegex(type).test(document.getElementById(id).value))
 {
 label.innerHTML=validator.getRightMessage(type);
 }
 else
 {
 if(this.value==""||this.value==null)
 {
 label.innerHTML="输入内容不能为空！";
 }
 else
 {
 label.innerHTML=validator.getErrorMessage(type);
 }
 }
 if(type==inputType.password)
 {
 validator.rePassword.onblur();
 }
 validator.setSubmit();