基于jQuery的表单验证

 

基于jQuery的表单验证插件 

参考了http://www.cnblogs.com/wzmaodong/archive/2008/01/11/1034901.html的一些东西，根据实际项目需要写的一个验证插件

API 调用说明
在页面加载完成之后使用下面语句绑定
        $("#test1").FV({

            group : "1",

            msg   : "用户名只能为字母，长度为6-10位",

            empty : true,

            valid : [ {T:"I",P:{min:6,max:10}},

                      {T:"R",P:"^[A-Za-z]+$"}

                    ]

        });

group: 表示分组，可以省略.

      可以简写为 G

msg: 表示错误提示信息,可以省略，默认为””

     可以简写为 M

empty: 表示可否为空，可以省略，默认为false

     可以简写为 E

valid : 表示要执行的验证方式，可以为了一个对象，如果要执行多种方式的验证，则为一个数组对象。

     可以简写为 V

 

valid 介绍

验证方式有四种

“I”输入验证

{T:"I",P:{T:"N",min:1,max:120}}

T 表示验证类型

P 表示验证的参数

T 表示验证的方式数字范围或字符串长度验证(N/S) ，可以省略，默认为”S” 字符串长度验证

    min 默认为0

    max 默认为1000

“C”相等验证

    {T:"C",P:"password1"}

    P 表单控件的ID

“R”正则表达式验证

    {T:"R",P:{R: "^[A-Za-z]+$",I:flase}}

    {T:"R",P:/^[A-Za-z]+$/}

    P 一个正则表达式对象，如果是一个字符串正则表达式，如："^-?[1-9]\\d*$" 请注意里面的 \ 应该换为 \\

    I 表示是否区分大小写，默认为 flase

    第一种方式与第二种方式功能一样。

“F”自字义函数验证

    {T:"F",P:isDate}

    P 函数的名称，函数接收的第一个参数为当前input的值

原码：

 

/*
基于jQuery的表单验证插件
author : Snryang
Date   : 2008-10-24 10:28:00
blog   : http://snryang.cnblogs.com
*/


jQuery.formValidator = {
    ids:[],
    init: function (o){
        if (!o) return ;
        return this.each(
            function (){                
                var el = this;
                var jel = jQuery(this);
                this.fvCfg = {
                    jel:    jel,
                    imgId:  el.id + "error",
                    group:  (o.group || o.G) ? o.group : "",
                    msg:    o.msg || o.M || "",
                    empty:  o.empty || o.E || false,
                    V:      o.V || o.valid || null
                };
                jel.after("<img src='reg3.gif' id='"+el.fvCfg.imgId+"' title='"+el.fvCfg.msg+"' style='display:none'/>");
                jel.bind('blur', jQuery.formValidator.start);
                jQuery.formValidator.ids.push(el);
            }
        );
    },
    start: function(){
        if(this.fvCfg.V == null) return;
        var flag = true;        
        if(this.fvCfg.V.constructor == Object){
            this.fvCfg.P = this.fvCfg.V.P;
            flag = eval("jQuery.formValidator." + this.fvCfg.V.T + ".apply(this)");
        }
        else if(this.fvCfg.V.constructor == Array){
            for(var i in this.fvCfg.V){
                this.fvCfg.P = this.fvCfg.V[i].P
                flag = eval("jQuery.formValidator." + this.fvCfg.V[i].T + ".apply(this)");
                if (!flag) break;
            }
        }
        flag = !flag ? (this.fvCfg.empty ? (this.fvCfg.jel.val() == "" ? true : false) :false ) : true;
        flag ? jQuery("#" + this.fvCfg.imgId).hide() : jQuery("#" + this.fvCfg.imgId).show();
        return flag;
    },
    I: function(){
        var P   = this.fvCfg.P;
        var T   = P.type || P.T || "S";
        var min = P.min || 0;
        var max = P.max || 1000;
        var value = this.fvCfg.jel.val();
        if(T.toUpperCase() == "N") {
            if( this.fvCfg.msg == "" ) jQuery("#" + this.fvCfg.imgId).attr("title","数字应当大于等于[ "+min+" ]并且小于等于[ "+max+" ]");
            return (Number(value) >= min && Number(value) <= max) ? true : false;
        }
        else {
            if( this.fvCfg.msg == "" ) jQuery("#" + this.fvCfg.imgId).attr("title","字符串长度应当大于等于[ "+min+" ]并且小于等于[ "+max+" ]");
            return (value.length >= min && value.length <= max) ? true : false;
        }
    },
    C: function(){
        var id    = this.fvCfg.P;
        var value = this.fvCfg.jel.val();
        return jQuery("#" + id).val() == value ? true : false;        
    },
    R: function(){
        var P = this.fvCfg.P;
        var regexp = (P.constructor != Object) ? P : P.regexp || P.R;
        var I = P.I || false;
        var value = this.fvCfg.jel.val();
        var re = I ? new RegExp(regexp) : new RegExp(regexp,"i") ;
        return re.test(value);
    },
    F: function(){
        return (this.fvCfg.P.constructor == Function) ? this.fvCfg.P.apply(this,[this.fvCfg.jel.val()]) : false;
    },    
    PageIsValid: function(group){
        var valid = true;
        var G = group || "";
        var flag;
        jQuery.each(jQuery.formValidator.ids,function(i,e){
            if(G == e.fvCfg.group || G =="") {
                flag = jQuery.formValidator.start.apply(e);
                if(!flag) valid = false;
            }
        });
        return valid;
    }   
};

jQuery.fn.extend(
    {
        FV : jQuery.formValidator.init,
        PageIsValid : jQuery.formValidator.PageIsValid
    }
);

 

测试html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
    <script src="jquery-1.2.3-intellisense.js" type="text/javascript"></script>    
    <script src="Snryang.js" type="text/javascript"></script>
    <script type="text/javascript">

    $(document).ready(function(){             
        $("#test1").FV({
            group : "1",
            M     : "用户名只能为字母，长度为6-10位",
            V     : [ {T:"I",P:{min:6,max:10}},
                      {T:"R",P:"^[A-Za-z]+$"}
                    ]
        });
        
        $("#password1").FV({
            V   : {T:"I",P:{min:6,max:10}}
        });
        
        $("#password2").FV({
            msg : "重复密码长度为6-10位，只能为字母，必须与密码一致",
            V   : [ {T:"I",P:{min:6,max:10}},
                    {T:"C",P:"password1"},
                    {T:"R",P: regexEnum.letter}
                  ]
        });
        
        $("#nl").FV({
            V   : {T:"I",P:{T:"N",min:1,max:120}}
        });
        
        $("#csny").FV({
            G     : "1",
            M     : "出生日期格式：yyyy-MM-dd",
            E     : true,
            V     : {T:"F",P:isDate}
        });
        
        $("#dxzm").FV({
            msg : "这只能输入大写字母，可以为空",
            empty : true,
            V   : {T:"R",P:{R:regexEnum.letter_u,I:true}}
        });
    });
    
    function pageValid(){        
        alert($().PageIsValid());
        alert($().PageIsValid("1"));
    }

    function isDate(str)
    {
        var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/); 
        if(r==null)return false; 
        var d= new Date(r[1], r[3]-1, r[4]); 
        return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
    }
    </script>
</head>
<body>
<table >
    <tr> 
      <td align="right">用户名:</td>
      <td><input type="text" id="test1"   /></td>
    </tr>
    <tr> 
      <td align="right">密码:</td>
      <td><input type="password" id="password1"   /></td>
    </tr>
    <tr> 
      <td align="right">重复密码:</td>
      <td><input type="password" id="password2"   /></td>
    </tr>
    <tr> 
      <td align="right">你的性别:</td>
      <td><input type="radio" id="sex" value="1" name="sex" />
        男&nbsp;&nbsp;&nbsp;&nbsp; <input type="radio" id="sex1" value="2" name="sex" />
        女</td>
    </tr>
    <tr> 
      <td align="right">你的年龄:</td>
      <td><input type="text" id="nl"  value="26" /></td>
    </tr>
    <tr> 
      <td align="right">出生日期:</td>
      <td><input type="text" id="csny"  /></td>
    </tr>
    <tr> 
      <td align="right">大写字母：</td>
      <td><input type="text" id="dxzm"  /></td>
    </tr>
    <tr> 
      <td colspan="2">  
    <input type="submit" name="button" id="button" onclick="pageValid()" value="提交" /></td>
    </tr>
  </table>
</body>
</html>

打包下载：https://files.cnblogs.com/snryang/FV.rar