http://www.laohucheng.com/index.php zh-cn http://www.laohucheng.com/post// noel <babysir@qq.com> Mon, 06 Apr 2009 02:48:55 +0000 http://www.laohucheng.com/post// 表单校验,相信是许多人的头疼事,尤其对于大表单,几十个项目,校验更是问题
本函数只内置了9种常用的校验
略懂正则的朋友可以自行添加,扩展,数量不限.....
基本可以代替绝大部分的表单校验....

<SCRIPT LANGUAGE="JavaScript">
<!--
function check(form1)
{
//通用化表单校验函数!
var re=new Array();
re[1] = /^\w{3,20}$/;                                           //ID,不允许中文
re[2] = /^\d+$/ ;                                              //数值
re[3] = /^.+@\w+(.\w+)+$/                                     //Email
re[4] = /^.{2,30}$/                                           //普通,允许中文
re[5] = /^\d{6}$/                                              //邮政编码
re[6] = /^(00\d{1,3}-){0,1}0\d{3}-\d{7,8}$/                   //电话号码
re[7] = /^\d{4}$/                                        //4位验证码
re[8] = /(^\d{15}$)|(^\d{18}$)|(^\d{17}[Xx]$)/          //身份证
re[9] = /^(.|\n){1,}$/                                     //普通无最大限制,允许中文
var tem=0,i,j,x,y;    
for(i=0;i<form1.length;i++)
{
      var x = form1[i].getAttribute("DType");
      if (x != null){
            x = form1[i].getAttribute("DType").toUpperCase();
            y = parseInt(form1[i].getAttribute("DType").substr(1));
            switch(form1[i].type){
            case "text":
            case "textarea":
            case "password":
                  if(x.charAt(0)!='N'||form1[i].value.length>0){                      
                        if(y!=0){
                              if(form1[i].value.search(re[y])==-1){
                                    alert('条件不符\n'+form1[i].title);
                                    form1[i].focus();
                                    return false;
                                    }
                              if(form1[i].type=="password"&&form1[i+1].type=="password"&&form1[i].value!=form1[i+1].value){
                                    alert('两次输入的密码不一致,请重新输入');
                                    form1[i].focus();
                                    return false;
                                    }
                              }
                        }
                        break;
            case "select-one":if(y>1)y=1;
            case "select-multiple":
                  if(x.charAt(0)!='N'){
                        if(y!=0){tem=0;
                              for(j=0;j<form1[i].length;j++)
                                    {
                                    if(form1[i].options[j].selected)tem++;
                                    }
                              if(tem<y){
                                    alert(form1[i].title+'条件不符\n你应该至少选择'+y+'项.');
                                                form1[i].focus();
                                                return false;
                                    }
                        }
                  }
                  break;
            case "radio":if(y>1)y=1;
            case "checkbox":
                  if(x.charAt(0)!='N'){
                        if(y!=0){tem=0;
                              var radiotem=eval("form1."+form1[i].name);
                              for(j=0;j<radiotem.length;j++)
                                    if(radiotem[j].checked)tem++;
                                    }
                              if(tem<y){
                                    alert(form1[i].title+'条件不符\n你应该至少选择'+y+'项.');
                                                form1[i].focus();
                                                return false;
                                    }
                        }
                  break;
            }
      }
}
return true;
}
//-->
</SCRIPT>

使用说明

使用说明

为每个需要验证的表单项新加一个一个属性 DType
DType属性的赋值为
一个字母+一个数字组成
字母的取值只有y 和 n

y表示该项不允许为空
n表示该项允许为空但要做值合法性检测

数字的取值与表单域的type有关

对于
"text":"textarea":"password":
      该数值为校验的模式,比如Email校验,此处就为3
      函数内置了几种校验模式,当然懂正则的可以自行扩展,随意发挥
对于
select 和 radio
   此处为一大于0的数值即可

对于
checkbox和select-multiple
   此处为必须选择的最小项数

还利用表单域的另一属性title
title的内容为该域的取值说明.title可以不填.......

好了,各元素都设置好了之后

在表单的 onsubmit事件中加上 return check(表单名)即可....





对密码域的特别说明

对密码域的特别说明

本函数可对相邻的两个密码域自动做相等比较

所以对于重复输入密码的应用
您只需让两个密码域相邻(即中间再没有别的表单控件),并设置第一个的DType属性即可

但是对于修改密码的应用,可能出现三个密码域相邻的情况,即第一个为输入旧密码,第二个和第三个为密码与重复密码

该函数会将第一个与第二个自动进行相等匹配...这不是我们希望的

解决办法就是在第一个后插入一个隐藏域()使第一个与第二个密码域不相邻即可..

对checkbox与radio的说明

对checkbox和radio的要求是必须成组(name相同),最少选择个数是指该组中的选择个数
一组checkbox与radio控件中,只需设置其中的一个控件DType属性即可


简单示例.

简单示例.


<FORM METHOD=POST ACTION="" name=form1 onsubmit="return check(form1)"><BR>
文本型举例<BR>
<INPUT TYPE="text" NAME="Email" DType="y3" title="Email格式" value="y0h@163.com">          E-mail检测
<BR><INPUT TYPE="text" NAME="Email" DType="n6" title="电话号码">          电话号码,可以为空<BR>
密码校验<BR>
<INPUT TYPE="password" DType="y01" title="不为空大于3位"><INPUT TYPE="password" >
<BR>
文本区域<BR>
<textarea name="textarea" DType="y9" Title="文本区域"></textarea>
<BR>checkbox举例<BR>
<INPUT TYPE="checkbox" name="a" title="aaa"><INPUT TYPE="checkbox" name="a" title="y01"><INPUT TYPE="checkbox" name="a" title="y1"><INPUT TYPE="checkbox" DType="y2" name="a" title="checkbox">最少选择两项<BR>radio举例<BR>
<INPUT TYPE="radio" name="b" title="aaa"><INPUT TYPE="radio" name="b" title="y01"><INPUT TYPE="radio" name="b" title="y1"><INPUT TYPE="radio" DType="y2" name="b" title="radio"><BR>
多选列表<BR><select name="select" size="4" DType="y2" multiple title="多选列表">
<option value="111">111</option>
<option value="222">222</option>
<option value="333">333</option>
<option value="444">444</option>
</select>最少选择两项<BR>
<INPUT TYPE="submit" value="检测"></FORM>

..........校验函数部分



Tags - 通用表单校验函数 ]]> http://www.laohucheng.com/post//#blogcomment <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 http://www.laohucheng.com/post//#blogcomment