`

自定义表单验证

CSSCC++C#JavaScript 
阅读更多

自定义表单验证：

 

代码：

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>

<link rel="stylesheet" href="css/validator.css" type="text/css"></link>

<link rel="stylesheet" href="css/style.css" type="text/css"></link>

 

</HEAD>

<script type="text/javascript">

//form表单调用验证的信息

var object={};

object.onready=function(handler){

window.onload=handler;

}

handler=function(){

   alert("提交前调用自己的函数");

   return false;

}

object.onready(function(){

   var v=new Validate(config);

   v.register();

});

//配置验证属性

var config={form:"myForm",submit:handler,elements:[

    {name:"userName",allownull:false,defaultMsg:"用户名不能为空",focusMsg:"请输入用户名",rightMsg:"恭喜你，用户名输入正确！",errorMsg:"抱歉，用户名输入不合法",tips:"userNameTip",regexp:/^\w{6,12}$/},

{name:"password",allownull:false,defaultMsg:"密码不能为空",focusMsg:"请输入密码",rightMsg:"恭喜你，密码输入正确！",errorMsg:"抱歉，密码输入不合法",tips:"passwordTip",regexp:/^\w{6,12}$/}

]};

 

//进行验证信息

Validate=function(config){

   this.config=config;

   this.form=document.getElementById(this.config.form);

   this.register=function(){

 var e=this.config.elements;

 for(var i=0;i<e.length;i++){

    this.form[e[i].name].onfocus=setFocusHandler(getEl(e[i].tips),e[i].focusMsg,"onfocus");

this.form[e[i].name].onblur=setBlurHandler(e[i]);

    setText(getEl(e[i].tips),e[i].defaultMsg,"onshow");

 }

 this.form.onsubmit=submitHandler(this.form);

   }

   //得到Id

   getEl=function(id){

      return document.getElementById(id);

   }

   //设置提示文本

   setText=function(obj,msg,image){

      obj.className=image;

      obj.innerHTML=msg;

 

   }

   //设置得到焦点提示文本

   setFocusHandler=function(obj,msg,image){

      return function(){

    setText(obj,msg,image);

 }

  }

  judgeInfoAllowNull=function(shuxing,value){

    if(!value){         //没有填的情况

setText(getEl(shuxing.tips),shuxing.defaultMsg,"onshow");           //默认信息

}else{          //有填的情况

if(value.match(shuxing.regexp)){

setText(getEl(shuxing.tips),shuxing.rightMsg,"oncorrect");           //填写正确的情况

}else{

setText(getEl(shuxing.tips),shuxing.errorMsg,"onerror");            //填写不正确的情况

}

}

    }

judgeInfoAllowNotNull=function(shuxing,value){

    if(!value){         //没有填的情况

setText(getEl(shuxing.tips),shuxing.errorMsg,"onerror");           //错误信息

}else{          //有填的情况

if(value.match(shuxing.regexp)){

setText(getEl(shuxing.tips),shuxing.rightMsg,"oncorrect");           //填写正确的情况

}else{

setText(getEl(shuxing.tips),shuxing.errorMsg,"onerror");            //填写不正确的情况

}

}

    }

 

   //设置失去焦点时进行判断后提示文本

    setBlurHandler=function(shuxing){

  return function(){

     var v=this.value;

          if(shuxing.allownull){   //允许为null的情况

              judgeInforAllowNull(shuxing,v);

 }else{             //不允许为null的情况

  judgeInfoAllowNotNull(shuxing,v);

 }

  }

}

 

submitHandler=function(f){

   var c=this.config;

var isTrue=true;

return function(){

for(var i=0;i<c.elements.length;i++){

 var shuxing=c.elements[i];

 var value=f[shuxing.name].value;

 if(shuxing.allownull){   //允许为null的情况

judgeInfoAllowNull(shuxing,value);

 }else{             //不允许为null的情况

judgeInfoAllowNotNull(shuxing,value);

 }

  }

  var handler=c.submit;

  isTrue=handler();

  return isTrue;

}

}

}

 

 

</script>

<BODY>

<form action="" method="POST" id="myForm" name="myForm">

<center>

<table>

<tr>

<td>用户名：</td><td><input type="text" name="userName" value="" width=80></input><span id="userNameTip"></span></td>

</tr>

<tr>

<td>密  码：</td><td><input type="text" name="password" value=""  width=80></input><span id="passwordTip"></span></td>

<tr>

<td></td><td><input type="submit" name="submit" value="我要提交"><td>

</tr>

</table>

</center>

</form>

</BODY>

</HTML>

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  • 大小: 4.4 KB
分享到：
| JSP中forward和redirect有什么区别？
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics