动态验证表单

<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:'电子邮件如：[e-mail]',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>

评论

2 楼 2011ITtalents 2010-11-11  

.onshow
{
    background:url(../images/onShow.gif) no-repeat 4px;
    padding-left:25px;
font-size: 12px;
line-height:22px;
vertical-align:middle;
}
.onfocus
{
    background:#E9F0FF url(../images/onFocus.gif) no-repeat 4px;
    padding-left:25px;
font-size: 12px;
line-height:22px;
vertical-align:middle;
}
.onerror
{
    background:#FFF2E9 url(../images/onError.gif) no-repeat 4px;
    padding-left:25px;
font-size: 12px;
line-height:22px;
vertical-align:middle;
}
.oncorrect
{
    background:#E9FFEB url(../images/onCorrect.gif) no-repeat 4px;
    padding-left:25px;
font-size: 12px;
line-height:22px;
vertical-align:middle;
}
.onload
{
    background:#E9FFEB url(../images/onLoad.gif) no-repeat 4px;
    padding-left:25px;
font-size: 12px;
line-height:22px;
vertical-align:middle;
}

1 楼 2011ITtalents 2010-11-11  

body,td,input,select,textarea {
font-size: 12px;
color: #333333;
}

body {
margin: 0px;
}

a {
color: #003048;
}

a:hover {
color: #0052c2;
}

a:active {
color: #787878;
text-decoration: underline;
}
.td_optbar,.tb_optbar td {
padding: 2px 10px 2px 0px;
text-align: right;
}

.btnopt {
color: #003048;
background: #C4E5FA;
height: 16px;
padding: 0px 1px 0px 1px;
border: 1px #0066CC solid;
letter-spacing: 1px;
cursor: pointer;
}

/*Firefox使用，样式同上*/
.tb_optbar input[type=button],.tb_optbar input[type=submit],.tb_optbar input[type=reset]
{
color: #003048;
background: #C4E5FA;
height: 16px;
padding: 0px 1px 0px 1px;
border: 1px #0066CC solid;
letter-spacing: 1px;
cursor: pointer;
}

.btnoptmouseover {
color: #003048;
background: #62B6F0;
height: 16px;
padding: 0px 1px;
border: 1px #0066CC solid;
letter-spacing: 1px;
cursor: pointer;
}

.txtstrong {
color: #FF0000;
font-weight: bold;
}

.txttitle {
font-size: 18px;
font-weight: bold;
text-align: center;
}

.inputread {
border: 0px;
}

input[readonly] {
border: 0px;
}

/**.inputsgl {
color: #0066FF;
border-color: #999999;
border-style: solid;
border-width: 0px 0px 1px 0px;
}*/

.inputsgl {
margin: 0;;
font: normal 12px tahoma, arial, helvetica, sans-serif;;
padding: 1px 1px;;
background: #fff url(../images/form/text-bg.gif) repeat-x 0 0;;
border: 1px solid #B5B8C8;
}
.x-form-radio{margin-bottom:3px;}

.x-form-check,.ext-ie .x-form-radio{margin-bottom:2px;}

.x-form-check-wrap-inner,.x-form-radio-wrap-inner{display:inline;padding:3px 0 0 0;}

.x-form-check{background:url('/sms/images/css/checkbox.gif') no-repeat 0 0;}

.x-form-radio{background:url('/sms/images/css/radio.gif') no-repeat 0 0;}

.x-form-check-focus .x-form-radio, .x-form-check-over .x-form-radio {
background-position: -13px 0;
}
input[type=text],input[type=password] {
color: #0066FF;
border-color: #999999;
border-style: solid;
border-width: 0px 0px 1px 0px;
}

.inputmul,textarea {
color: #0066FF;
border: 1px solid #999999;
height: 60px;
}

.selectmul {
color: #0000FF;
background-color: #E6E6E6;
border: 1px #006699 solid;
}

.selectsgl,select {
color: #0000FF;
background-color: #E6E6E6;
border: 1px #999999 solid;
}

.upload {
color: #0066FF;
background-color: #F0F0F0;
border: 1px #999999 solid;
font-weight: normal;
padding: 0px 1px 1px 0px;
height: 18px;
clip: rect();
}

input[type=file] {
color: #0066FF;
background-color: #F0F0F0;
border: 1px #999999 solid;
font-weight: normal;
padding: 0px 1px 1px 0px;
height: 18px;
clip: rect();
}

.tb_normal {
border-collapse: collapse;
border: 1px #C0C0C0 solid;
background-color: #FFFFFF;
}

.td_normal,.tb_normal td {
border-collapse: collapse;
border: 1px #C0C0C0 solid;
padding: 3px;
}

.tr_normal_title {
background-color: #F0F0F0;
border-collapse: collapse;
border: 1px #C0C0C0 solid;
padding: 3px;
text-align: center
}

.td_normal_title {
background-color: #F0F0F0;
border-collapse: collapse;
border: 1px #C0C0C0 solid;
padding: 3px;
text-align: right;
filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=#DEE9FE,endColorStr=#ffffff);
}

.tb_noborder,.td_noborder,.tb_noborder td {
border: 0px;
padding: 0px;
}

.tb_label {
border-collapse: collapse;
}

.td_label {
background-color: #FFFFFF;
border-letf-style: none;
border-left-width: 0px;
border-left: 1px solid #C0C0C0;
border-top-width: 0px;
border-right: 5px inset #bbbbbb;
border-bottom: 5px inset #aaaaaa;
padding: 10px;
}

.td_label0 {
vertical-align: baseline;
font-size: 2px;
padding: 0px 0px;
}

.btnlabel1 {
height: 20px;
font-size: 12px;
border: 0px;
padding: 4px 2px 0px 2px;
cursor: pointer;
}

.btnlabel2 {
height: 20px;
font-size: 12px;
border: 0px;
padding: 6px 2px 0px 2px;
color: #AAAAAA;
cursor: pointer;
}

.maxwinicon {
position: absolute;
left: 10px;
width: 23px;
height: 23px;
}