自定义表单验证

liuyuru · 发表于 2013-2-7 22:41:40

自定义表单验证：

代码：
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<!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.name].onfocus=setFocusHandler(getEl(e.tips),e.focusMsg,"onfocus");
this.form[e.name].onblur=setBlurHandler(e);
setText(getEl(e.tips),e.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;
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>
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

		自动登录	找回密码
密码			立即注册