Validator就是为解决这个问题而写的,旨在使设计者从纷繁复杂的表单验证中解放出来,把精力集中于网页的设计和功能上的改进上

本文介绍了一款名为 Validator 的表单验证类,该类基于 JavaScript 技术,能够简化网页表单的设计并提高验证效率。Validator 支持多种验证类型,包括但不限于中文、数字、邮箱地址等,并提供了三种错误提示模式。
本文收集自网上 
表单的验证一直是网页设计者头痛的问题,表单验证类 Validator就是为解决这个问题而写的,旨在使设计者从纷繁复杂的表单验证中解放出来,把精力集中于网页的设计和功能上的改进上。 

Validator是基于Javascript技术的伪静态类和对象的自定义属性,可以对网页中的表单项输入进行相应的验证,允许同一页面中同时验证多个表单,熟悉接口之后也可以对特定的表单项甚至仅仅是某个字符串进行验证。因为是伪静态类,所以在调用时不需要实例化,直接以
"类名+.语法+属性或方法名"来调用。此外,Validator还提供3种不同的错误提示模式,以满足不同的需要。 

Validator目前可实现的验证类型有: 
[Javascript] 版
Validator目前可实现的验证类型有: 
1.是否为空;
2.中文字符;
3.双字节字符
4.英文;
5.数字;
6.整数;
7.实数;
8.Email地址;
9.使用HTTP协议的网址;
10.电话号码;
11.货币;
12.手机号码;
13.邮政编码;
14.身份证号码(1.05增强);
15.QQ号码;
16.日期;
17.符合安全规则的密码;
18.某项的重复值;
19.两数的关系比较;
20.判断输入值是否在(n, m)区间;
21.输入字符长度限制(可按字节比较);
22.对于具有相同名称的单选按钮的选中判断;
23.限制具有相同名称的多选按钮的选中数目;
24.自定义的正则表达式验证; 
25.文件上传格式过滤(1.04)
运行环境(客户端): 
在Windows Server 2003下用IE6.
0+SP1和Mozilla Firefox 1.0测试通过;
在Lunix RedHat 9下的Netscape测试通过; 

<title
>表单验证类 Validator v1.05/title>
 <style
>
 body,td{font:normal 12px Verdana;color:#
333333}
 input,textarea,select,td{font:normal 12px Verdana;color:#
333333;border:1px solid #999999;background:#ffffff}
 table{border
-collapse:collapse;}
 td{padding:3px}
 input{height:
20;}
 textarea{width:
80%;height:50px;overflow:auto;}
 form{display:inline}
 <
/style>
 <table align
="center">
  <form name
="theForm" id="demo" method="get" onSubmit="return Validator.Validate(this,2)">
  <tr
>
   <td
>身份证号:</td><td><input name="Card" dataType="IdCard" msg="身份证号错误">/td>
  <
/tr>
    <tr
>
   <td
>真实姓名:</td><td><input name="Name" dataType="Chinese" msg="真实姓名只允许中文">/td>
  <
/tr>
  <tr
>
   <td
>ID:</td><td><input name="username" dataType="Username" msg="ID名不符合规定">/td>
  <
/tr>
  <tr
>
   <td
>英文名:</td><td><input name="Nick" dataType="English" require="false" msg="英文名只允许英文字母">/td>
  <
/tr>
    <tr
>
   <td
>主页:</td><td><input name="Homepage" require="false" dataType="Url"   msg="非法的Url">/td>
  <
/tr>
  <tr
>
   <td
>密码:</td><td><input name="Password" dataType="SafeString"   msg="密码不符合安全规则" type="password">/td>
  <
/tr>
  <tr
>
   <td
>重复:</td><td><input name="Repeat" dataType="Repeat" to="Password" msg="两次输入的密码不一致" type="password">/td>
  <
/tr>
  <tr
>
   <td
>信箱:</td><td><input name="Email" dataType="Email" msg="信箱格式不正确">/td>
  <
/tr>
    <tr
>
   <td
>信箱:</td><td><input name="Email" dataType="Repeat" to="Email" msg="两次输入的信箱不一致">/td>
  <
/tr>
  <tr
>
   <td
>QQ:</td><td><input name="QQ" require="false" dataType="QQ" msg="QQ号码不存在">/td>
  <
/tr>
    <tr
>
   <td
>身份证:</td><td><input name="Card" dataType="IdCard" msg="身份证号码不正确">/td>
  <
/tr>
  <tr
>
   <td
>年龄:</td><td><input name="Year" dataType="Range" msg="年龄必须在18~28之间" min="18" max="28">/td>
  <
/tr>
   <tr
>
   <td
>年龄1:</td><td><input name="Year1" require="false" dataType="Compare" msg="年龄必须在18以上" to="18" operator="GreaterThanEqual">/td>
  <
/tr>
   <tr
>
   <td
>电话:</td><td><input name="Phone" require="false" dataType="Phone" msg="电话号码不正确">/td>
  <
/tr>
   <tr
>
   <td
>手机:</td><td><input name="Mobile" require="false" dataType="Mobile" msg="手机号码不正确">/td>
  <
/tr>
     <tr
>
   <td
>生日:</td><td><input name="Birthday" dataType="Date" format="ymd" msg="生日日期不存在">/td>
  <
/tr>
   <tr
>
   <td
>邮政编码:</td><td><input name="Zip" dataType="Custom" regexp="^[1-9]d{5}$" msg="邮政编码不存在">/td>
  <
/tr>
  <tr
>
   <td
>邮政编码:</td><td><input name="Zip1" dataType="Zip" msg="邮政编码不存在">/td>
  <
/tr>
  <tr
>
   <td
>操作系统:</td><td><select name="Operation" dataType="Require"  msg="未选择所用操作系统" ><option value="">选择您所用的操作系统</option><option value="Win98">Win98</option><option value="Win2k">Win2k</option><option value="WinXP">WinXP</option>/select>/td>
  <
/tr>
  <tr
>
   <td
>所在省份:</td><td>广东<input name="Province" value="1" type="radio">陕西<input name="Province" value="2" type="radio">浙江<input name="Province" value="3" type="radio">江西<input name="Province" value="4" type="radio" dataType="Group"  msg="必须选定一个省份" >/td>
  <
/tr>
  <tr
>
   <td
>爱好:</td><td>运动<input name="Favorite" value="1" type="checkbox">上网<input name="Favorite" value="2" type="checkbox">听音乐<input name="Favorite" value="3" type="checkbox">看书<input name="Favorite" value="4" type="checkbox"" dataType="Group" min="2" max="3"  msg="必须选择2~3种爱好"></td>
  </tr>
   <td>自我介绍:</td><td><textarea name=
"Description" dataType="Limit" max="10"  msg="自我介绍内容必须在10个字之内">中文是一个字</textarea></td>
  </tr>
     <td>自传:</td><td><textarea name=
"History" dataType="LimitB" min="3" max="10"  msg="自传内容必须在[3,10]个字节之内">中文是两个字节t</textarea></td>
  </tr>
    <tr>
   <td>相片上传:</td><td><input name=
"up" dataType="Filter" msg="非法的文件格式" type="file" accept="jpg, gif, png"></td>
  </tr>
  <tr>
   <td colspan=
"2"><input name="Submit" type="submit" value="确定提交"><input onClick="Validator.Validate(document.getElementById('demo'))" value="检验模式1" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),2)" value="检验模式2" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),3)" value="检验模式3" type="button"></td>
  </tr>
  </form>
 </table>
<script>
  /*************************************************
    Validator v1.05
    code by 我佛山人
    wfsr@msn.com
*************************************************/
 Validator = {
    Require : /.+/,
    Email : /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/,
    Phone : /^(((d{2,3}))|(d{3}-))?((0d{2,3})|0d{2,3}-)?[1-9]d{6,7}(-d{1,4})?$/,
    Mobile : /^(((d{2,3}))|(d{3}-))?13d{9}$/,
    Url : /^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/,
    IdCard : 
"this.IsIdCard(value)",
    Currency : /^d+(.d+)?$/,
    Number : /^d+$/,
    Zip : /^[1-9]d{5}$/,
    QQ : /^[1-9]d{4,8}$/,
    Integer : /^[-+]?d+$/,
    Double : /^[-+]?d+(.d+)?$/,
    English : /^[A-Za-z]+$/,
    Chinese :  /^[Α-¥]+$/,
    Username : /^[a-z]w{3,}$/i,
    UnSafe : /^(([A-Z]*|[a-z]*|d*|[-_~!@#$%^&*.()[]{}<>?//'"]*)|.{0,5})$|s/,
    IsSafe : function(str){return !this.UnSafe.test(str);},
    SafeString : 
"this.IsSafe(value)",
    Filter : 
"this.DoFilter(value, getAttribute('accept'))",
    Limit : 
"this.limit(value.length,getAttribute('min'),  getAttribute('max'))",
    LimitB : 
"this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",
    Date : 
"this.IsDate(value, getAttribute('min'), getAttribute('format'))",
    Repeat : 
"value == document.getElementsByName(getAttribute('to'))[0].value",
    Range : 
"getAttribute('min') < (value|0&& (value|0) < getAttribute('max')",
    Compare : 
"this.compare(value,getAttribute('operator'),getAttribute('to'))",
    Custom : 
"this.Exec(value, getAttribute('regexp'))",
    Group : 
"this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",
    ErrorItem : [document.forms[0]],
    ErrorMessage : [
"以下原因导致提交失败: "],
    Validate : function(theForm, mode){
        var obj = theForm || event.srcElement;
        var count = obj.elements.length;
        this.ErrorMessage.length = 1;
        this.ErrorItem.length = 1;
        this.ErrorItem[0] = obj;
        for(var i=0;i<count;i++){
            with(obj.elements[i]){
                var _dataType = getAttribute(
"dataType");
                if(typeof(_dataType) == 
"object" || typeof(this[_dataType]) == "undefined")  continue;
                this.ClearState(obj.elements[i]);
                if(getAttribute(
"require") == "false" && value == "") continue;
                switch(_dataType){
                    case 
"IdCard" :
                    case 
"Date" :
                    case 
"Repeat" :
                    case 
"Range" :
                    case 
"Compare" :
                    case 
"Custom" :
                    case 
"Group" : 
                    case 
"Limit" :
                    case 
"LimitB" :
                    case 
"SafeString" :
                    case 
"Filter" :
                        if(!eval(this[_dataType]))    {
                            this.AddError(i, getAttribute(
"msg"));
                        }
                        break;
                    default :
                        if(!this[_dataType].test(value)){
                            this.AddError(i, getAttribute(
"msg"));
                        }
                        break;
                }
            }
        }
        if(this.ErrorMessage.length > 1){
            mode = mode || 1;
            var errCount = this.ErrorItem.length;
            switch(mode){
            case 2 :
                for(var i=1;i<errCount;i++)
                    this.ErrorItem[i].style.color = 
"red";
            case 1 :
                alert(this.ErrorMessage.join(
" "));
                this.ErrorItem[1].focus();
                break;
            case 3 :
                for(var i=1;i<errCount;i++){
                try{
                    var span = document.createElement(
"SPAN");
                    span.id = 
"__ErrorMessagePanel";
                    span.style.color = 
"red";
                    this.ErrorItem[i].parentNode.appendChild(span);
                    span.innerHTML = this.ErrorMessage[i].replace(/d+:/,
"*");
                    }
                    catch(e){alert(e.description);}
                }
                this.ErrorItem[1].focus();
                break;
            default :
                alert(this.ErrorMessage.join(
" "));
                break;
            }
            return false;
        }
        return true;
    },
    limit : function(len,min, max){
        min = min || 0;
        max = max || Number.MAX_VALUE;
        return min <= len && len <= max;
    },
    LenB : function(str){
        return str.replace(/[^
 
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值