动态应验表单

动态验证表单
<link rel="stylesheet" href="css/validator.css" type="text/css"></link>
   <link rel="stylesheet" href="css/style.css" type="text/css"></link>
<SCRIPT LANGUAGE="JavaScript">
var ready={};
ready.onReady=function(handler){
window.onload=handler;
}
// 客户端是否提交表单
function handler(){
alert("调用自己的函数");
//
return true;
}
//配置属性
var config = {form:'myform',submit:handler,Elements:[
{name:'username',allowNull:false,defaultMsg:'用户名不能为空',focusMsg:'请输入用户名',tips:'userTip',
rightMsg:'用户名输入合法！',errorMsg:'用户名输入错误！',regxp:/^\w{6,12}$/},
{name:'mail',allowNull:false,defaultMsg:'邮件不能为空',focusMsg:'电子邮件如：xxx@xxx.com',tips:'mailTip',
rightMsg:'邮件输入合法！',errorMsg:'邮件输入错误！',regxp:'mail'},
{name:'sex',allowNull:false,defaultMsg:'性别不能不选',focusMsg:'请选择正确的性别',tips:'sexTip',
rightMsg:'成功选择！',errorMsg:'性别必须要选择！'},
{name:'likes',allowNull:false,number:1,defaultMsg:'请选择爱好',focusMsg:'请选择自己喜好',tips:'likeTip',
rightMsg:'成功选择！',errorMsg:'你还没有选择爱好，必须选择一项！'},
{name:'age',allowNull:false,defaultMsg:'请选择年龄',focusMsg:'请选择自己年龄',tips:'ageTip',
rightMsg:'成功选择！',errorMsg:'你还没有选择年龄！'}
]};
//样式配置
Cls=function(){
this.focusCls = "onfocus";
this.defaultCls = "onshow";
this.rightCls = "oncorrect";
this.errorCls = "onerror";
this.setClass=function(o,className){
o.className=this[className]
}
}
//正则配置
Reg=function(){
this.user=/^\w{6,12}$/;
this.mail=/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
}
// 验证方法
validate=function(config){
this.config=config;//获取配置
this.cls = new Cls(); // 初始化样式
this.regexp = new Reg(); // 初始化正则表达式
this.register=function(){
this.form=document[this.config.form];
this.reg(this.config.Elements);
this.form.onsubmit=this.submit(this.form);
}
// 给表单注册信息
this.reg=function(e){
if(e.length > 0){
var o,k;
for(var i=0; i<e.length; i++){
k=e[i];
o=this.form[k.name];
//添加默认表单信息
k.defaultMsg?addMsg(this.cls.defaultCls,k.defaultMsg,k.tips):"";
//给组件添加获取焦点事件函数
k.focusMsg?this.addFocusEvent(o,{cls:this.cls.focusCls,msg:k.focusMsg,tips:k.tips}):"";
//给组件添加失去焦点事件函数
this.addBlurEvent(o,k);
//this.form[e[i].name].onfocus=setFocusHandler(getEl(e[i].tips),e[i].focusMsg);
//this.form[e[i].name].onblur=setBlurHandler(e[i]);
//setText(getEl(e[i].tips),e[i].defaultMsg,"onshow");
}
}
}
//给表单组件添加失去焦点事件
this.addBlurEvent=function(o,k){
var arr=(!o.length || o.nodeName=='SELECT')?[o]:o;
//获取组件类型
var t=this.getType(o);
for(var i=0;i<arr.length;i++){
//更具表单表单组件类型来添加事件
arr[i].onblur=(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);
//如果配置对象中的regxp 是个正则表达式，那么就用配置对象的。
// 没有必须要配置要regxp 等于this.regexp 中的属性名字符串，或不配置
var r=(typeof(k.regxp)=="string")?this.regexp[k.regxp]:k.regxp;
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;
}
}
addMsg(clazz,msg,k.tips);
//setMsg(t,clazz,msg);
}
}
//获取表单组件的 type
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.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;
}
}
}
addMsg(cls,msg,k.tips);
//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;
}
}
addMsg(cls,msg,k.tips);
//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;
}
addMsg(cls,msg?msg:'',k.tips);
//setMsg(tip,cls,msg?msg:'');
}

}
//添加得到焦点 o 对性，m 信息对象
this.addFocusEvent=function(o,m){
var arr = (!o.length || o.nodeName=='SELECT')?[o]:o;
for(var i=0; i<arr.length; i++){
arr[i].onfocus = this.addEvMsg(m.cls,m.msg,m.tips);
}
}
//配置组件信息
addMsg=function(c,m,t){
var o = getEl(t);
o.className = c;
o.innerHTML = m;
}
this.addEvMsg=function(c,m,t){
return function(){
addMsg(c,m,t);
}
}

//获取显示<span>对象
function getEl(id){
return document.getElementById(id);
}

this.submit=function(){//由于事件监听函数不能有参数，所以这里用一个闭包
var f=this.form;//f为his.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.Elements;
for(var i=0;i<vf.length;i++){//循环验证表单组件是否通过
c=vf[i];
o=f[c.name];
//tip=Tool.getEl(c.msgTip);
var r=(typeof(c.regxp)=="string")?re[c.regxp]:c.regxp;
if(isPassed(o,c,r)){
cla=style.errorCls;
msg=c.errorMsg;
result=false;
addMsg(cla,msg,c.tips);
//setMsg(tip,cla,msg);
}
}
var r=config['submit']?(config['submit'])():true;
alert(result);
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;
}

//判断下拉列表是否选中
isSelected=function(o,n){
var c=0;
for(var i=0;i<o.length;i++){
if(o[i].checked) c++;
}
return c>=n;
}

//得到选中的个数
isChecked=function(o,n){
var c=0;
for(var i=0;i<o.length;i++){
if(o[i].checked) c++;
}
return c>=n;
}
ready.onReady(function(){
var v = new validate(config);
v.register();
});

</SCRIPT>
<BODY>
<form name="myform" id="idform" method="post" >
<center>
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="username" /></td>
<td><span id='userTip'></span></td>
</tr>
<tr>
<td>电子邮件：</td>
<td><input type="text" name="mail" /></td>
<td><span id='mailTip'></span></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" value="男"/>男&nbsp;&nbsp;<input type="radio" name="sex" value="女"/>女</td>
<td><span id='sexTip'></span></td>
</tr>
<tr>
<td>爱好：</td>
<td><input type="checkbox" name="likes" value="体育" >体育&nbsp;&nbsp;<input type="checkbox" name="likes" value="蓝球" >蓝球</td>
<td><span id='likeTip'></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>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name='Submit' value="提交"/></td>
</tr>
</table>
</center>
</form>
</BODY>