自定义表单验证框架
/** * */ var Tool = {}; Tool.onReady=function(handler){ window.οnlοad=handler; } Tool.createSpan=function(style,msg){ return "<span class="+style+">"+msg+"</span>" } Tool.getEl=function(id){ return document.getElementById(id); } //为消息提供样式选择 Cls=function(){ this.input="inputsgl"; this.radio=""; this.check=""; this.textarea=""; this.select=""; this.defaultCls="onshow"; this.blurCls=""; this.focusCls="onfocus"; this.errorCls="onerror"; this.rightCls="oncorrect"; this.setClass=function(o,className){ o.className=this[className] } } //此类定义了一些正则表达式 Reg=function(){ this.user=/^\w{6,12}$/;//用户名 一般是 6-12位 this.email=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//电子邮件 this.phone=/^\d{3}-\d{8}|\d{4}-\d{7}$/;//国内电话号码 //this.html=/^<(\S*?)[^>]*>.*?</\1>|<.*? />$/; this.blank=/^$/; this.postcode=/^[1-9]\d{5}(?!\d)$/;//邮编 this.card=/^\d{15}|\d{18}$/;//身份证号码 this.tinteger=/^[1-9]\d*$/;//正整数 this.tinteger=/^-[1-9]\d*$/;//负整数 } //表单组件验证类 Fv=function(c){ this.config=c; this.form; //设置当前注册的表单 this.cls= new Cls;//初使化消息样式 this.regexp=new Reg;//初使化正则表达式 //注册当前form表单对象 this.register=function(){ this.form=document.forms[c.form]; this.form.οnsubmit=this.submit(c);//设置当前表单的提交监听函数 this.reg(this.config.fields); } setMsg=function(o,c,m){//设置消息方法,局部方法,当一个内部类来用 o.className=c; o.innerText=m; } this.reg=function(cf){//注册表单,主要是将配置信息注册到表单中 if(cf.length<1) return; var o,k; for(var i=0;i<cf.length;i++){ k=cf[i]; o=this.form[k.name]; //添加默认表单组件信息 k.defaultMsg?this.addMsg(this.cls.defaultCls,k.defaultMsg,k.msgTip):""; //添加得到焦点时的信息 k.focusMsg?this.addFocusListener(o,{cls:this.cls.focusCls,msg:k.focusMsg,tip:k.msgTip}):""; //为组件添加失去焦点监听函数 this.addBlurListener(o,k); } } //添加得到焦点事件 o 表单对象,m消息对象 this.addFocusListener=function(o,m){ var arr=(!o.length || o.nodeName=='SELECT')?[o]:o; for(var i=0;i<arr.length;i++){ arr[i].οnfοcus=this.addEvMsg(m.cls,m.msg,m.tip); } } //添加表单组件失去焦点 this.addBlurListener=function(o,k){ //var arr=o.length?o:[o]; var arr=(!o.length || o.nodeName=='SELECT')?[o]:o; var t=this.getType(o); for(var i=0;i<arr.length;i++){ arr[i].οnblur=(this[t+"OnBlur"])(o,k); } } //文本框推动焦点时触发的事件 this.textOnBlur=function(o,k){ var cl=this.cls.defaultCls; var el=this.cls.errorCls; var rl=this.cls.rightCls; var t=Tool.getEl(k.msgTip); var r=(typeof(k.regExp)=="string")?this.regexp[k.regExp]:k.regExp; return function(){ var clazz,msg; if(o.value==""){ clazz=cl; msg=k.defaultMsg; }else{ if(r && !r.test(o.value)){ clazz=el; msg=k.errorMsg; }else{ clazz=rl; msg=k.rightMsg; } } setMsg(t,clazz,msg); } } //多选框失去焦点时触发的事件 this.checkOnBlur=function(o,k){ var dc=this.cls.defaultCls; var rc=this.cls.rightCls; return function(){ var cls=dc,msg=k.defaultMsg; var tip=Tool.getEl(k.msgTip); var c=0; for(var j=0;j<o.length;j++){ if(o[j].checked){ c++; if(c>=k.number){ cls=rc; msg=k.rightMsg; break; } } } setMsg(tip,cls,msg); } } //单选框失去焦点时触发的事件 this.radioOnBlur=function(o,k){ var dc=this.cls.defualtCls; var rc=this.cls.rightCls; return function(){ var cls=dc,msg=k.defaultMsg; var tip=Tool.getEl(k.msgTip); for(var j=0;j<o.length;j++){ if(o[j].checked){ cls=rc; msg=k.rightMsg; break; } } setMsg(tip,cls,msg); } } //下拉列表失去焦点时触发的事件 this.selectOnBlur=function(o,k){ var dc=this.cls.defaultCls; var rc=this.cls.rightCls; return function(){ var cls=dc,msg=k.defaultMsg; var tip=Tool.getEl(k.msgTip); if(o.selectedIndex>0){ cls=rc; msg=k.rightMsg; } setMsg(tip,cls,msg?msg:''); } } this.submit=function(){//由于事件监听函数不能有参数,所以这里用一个闭包 var f=this.form;//f为this.form 的一个引用,当在闭包函数中的时候,this 指向的是window,而不是当前的那个对象了 var re=this.regexp; var style=this.cls; var config=this.config; return function(){ var result=true; var c,r,o,cla,msg,tip; var vf=config.fields; for(var i=0;i<vf.length;i++){//循环验证表单是否验证通过 c=vf[i]; o=f[c.name]; tip=Tool.getEl(c.msgTip); var r=(typeof(c.regExp)=="string")?re[c.regExp]:c.regExp; if(isPassed(o,c,r)){ cla=style.errorCls; msg=c.errorMsg; result=false; setMsg(tip,cla,msg); } } var r=config['submit']?(config['submit'])():true; return result && r; } } isPassed=function(o,c,r){//是否通过验证 var type=o.type || (o.length && o[0].type); switch(type){ case 'text' : case 'password'://判断文本控件,这样的控件是可以有正则表达式的 return (!c.allownull && !r.test(o.value)) || (c.allownull && o.value!='' && !r.test(o.value)); case 'radio': return !(c.allownull || isChecked(o,1)); case 'checkbox': return !(c.allownull || isChecked(o,c.number)); case 'select-one': return !(c.allownull || o.selectedIndex>1); default: return true; } return false; } //判断选中个数是 isChecked=function(o,n){ var c=0; for(var i=0;i<o.length;i++){ if(o[i].checked) c++; } return c>=n; } //判断下拉列表是否被选择了 isSelected=function(o,n){ var c=0; for(var i=0;i<o.length;i++){ if(o[i].checked) c++; } return c>=n; } //失去焦点时显示的信息 this.onblurMsg=function(o,c){ var cl=this.cls.defaultCls; var el=this.cls.errorCls; var rl=this.cls.rightCls; var t=Tool.getEl(c.msgTip); var r=(typeof(c.regExp)=="string")?this.regexp[c.regExp]:c.regExp; return function(){ var clazz,msg; if(o.value==""){ clazz=cl; msg=c.defaultMsg; }else{ if(r && !r.test(o.value)){ clazz=el; msg=c.errorMsg; }else{ clazz=rl; msg=c.rightMsg; } } setMsg(t,clazz,msg); } } this.addMsg=function(c,m,i){ var o = Tool.getEl(i); o.className=c; o.innerText=m; } this.addEvMsg=function(c,m,i){ return function(){ var s = Tool.getEl(i); s.className=c; s.innerText=m; } } this.getType=function(o){ var type=o.type || (o.length && o[0].type); switch(type){ case 'text' : case 'password': return "text"; case 'radio': return "radio"; case 'checkbox': return "check"; case 'select-one': return "select"; default: return ''; } } this.getEl=function(name){ return this.form[name]; } this.addClass=function(f){ var cn=this.getType(f); this.cls.setClass(f,cn); } }
调用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" href="css/validator.css" type="text/css"></link>
<link rel="stylesheet" href="css/style.css" type="text/css"></link>
<script type="text/javascript" src="Fv.js"></script></head>
<script type="text/javascript">
//var config=[{id:'username',isnull:true}];
function handler(){
alert("调用了自己的提交");
alert("就算验证通过我也不让表单提交,我返回一个false");
return false;
}
var config={form:"myform",submit:handler,
fields:[{name:'username',allownull:false,regExp:'user',defaultMsg:'用户名不能为空,6-12位,如:zhangsan',focusMsg:'请输入你的用户名',errorMsg:'用户名不能为空,且不能有非法字符',rightMsg:'用户名输入合法',msgTip:'usertip'},
{name:'pwd',allownull:false ,regExp:'user',defaultMsg:'密码不能为空,6-12位,如:******',focusMsg:'请输入你的密码',errorMsg:'密码不能为空,且不能有非法字符',rightMsg:'用户密码输入合法',msgTip:'pwdtip'},
{name:'email',allownull:true,regExp:/^\w{3,12}@\w{1,10}.\w{2,10}$/,defaultMsg:'电子邮箱如:kefu@sina.com',focusMsg:'请输入你的电子邮箱',errorMsg:'非法的电子邮箱帐号',rightMsg:'电子邮箱输入正确',msgTip:'emailtip'},
{name:'sex',allownull:false,defaultMsg:'请选择用户性别',focusMsg:'没有第三种性别可选了',errorMsg:'用户性别必须选择',rightMsg:'你确认这个性别的吗?',msgTip:'sextip'},
{name:'likes',allownull:false,number:2,defaultMsg:'请选择用户爱好',focusMsg:'认真选择你的爱好吧',errorMsg:'用户爱好必须选择两项',rightMsg:'这些都是不错的爱好!',msgTip:'likestip'},
{name:'age',allownull:false,defaultMsg:'请选择您的年龄',focusMsg:'年龄必须要选择',errorMsg:'你还没有选择你的年龄!',rightMsg:'年龄选择正确!',msgTip:'agetip'}
]}
Tool.onReady(function(){
var f = new Fv(config);
f.register();
});
</script>
<body>
<form action="" id="myform" id="myform" method="POST">
<center>
<table>
<tr><td>用 户 名:</td><td><input type="text" name="username" width=80/></td><td><span id="usertip"></span></td></tr>
<tr><td>密 码:</td><td><input type="text" name="pwd" width=80/></td><td><span id="pwdtip"></span></td></tr>
<tr><td>电子邮箱:</td><td><input type="text" name="email" width=80/></td><td><span id="emailtip"></span></td></tr>
<tr><td>性 别:</td><td><input type="radio" name="sex" value="男" >男 <input type="radio" name="sex" value="女" >女</td><td><span id="sextip"></span></td></tr>
<tr><td>爱 好:</td><td><input type="checkbox" name="likes" value="体育" >体育 <input type="checkbox" name="likes" value="蓝球" >蓝球</td><td><span id="likestip"></span></td></tr>
<tr><td>年 龄:</td><td><select name="age"><option>请选择</option><option>18</option><option>20</option><option>19</option></select></td><td><span id="agetip"></span></td></tr>
<tr><td colspan=3 align="center"><input type="submit" value="提交表单"></td></tr>
</table>
</center>
</form>
</body>
</html>