Jquery 标签智能验证

　　一直在寻找最快捷方便的信息验证方法，之前自己编过JS版验证但要写很多辅助代码，经过许多次改进，还是觉得太麻烦代码还多，维护起太费尽。后经过一段对Jquery的学习，Jquery的强大解决了辅助代码过多不易维护的问题。

 

AutoValidate.JS

/// <reference path="../Scripts/jquery-1.4.1-vsdoc.js" />

 

//验证方法 v1.0，创建于2010-12-9   完成2010-12-16 MR.X 制 
//修改2010-12-10、2010-12-12、2010-12-15、2010-12-16添入信息提示动画效果
//支持 type=text      type=checkbox       type=radio          select      标签验证
//vld="***"必填 格式验证   
//vld="n***"选填 格式验证    
//err="***"错误显示内容
//super="y"用<span>追加提示信息，要用y以外字母得修改同级一组验证，同级一组的标签可以在第一个标签进行super="y"属性标识，其它不用
//len="***"长度限制，用于textarea标签
//<input id="***" type="text" vld="***" err="***" span="***" len="***"/>

$(function () {

    //正则匿名对象
    var strRegex = {};
    //错误信息匿名对象
    var strError = {};
    //正确信息匿名对象
    var strRight = {};

    /**   参数配置 start  **/
    //非空
    strRegex.NoNull = /[^\s]+/;
    strError.NoNull = "请填写内容，如123、中国！";
    //邮箱
    strRegex.Email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
    strError.Email = "请核对邮箱格式，如china@163.com！";
    //网址
    strRegex.Url = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^\"\"])*$/;
    strError.Url = "请核对网址格式，如http://www.163.com！";
    //账号
    strRegex.An = /^([a-zA-Z0-9]|[_]){6,16}$/;
    strError.An = "请核对账号格式，如china_56！";

    //数字
    strRegex.Math = /\d+$/;
    strError.Math = "请核对数字格式，如1234！";
    //年龄
    strRegex.Age = /^\d{2}$/;
    strError.Age = "请核对年龄格式，10~99岁之间！";
    //邮编
    strRegex.Post = /^[1-9]\d{5}$/;
    strError.Post = "请核对邮编格式，如150001！";
    //电话
    strRegex.Phone = /^((\d{11})|((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})))$/;
    strError.Phone = "请核对电话格式，如15546503251！";
    //身份证
    strRegex.Card = /^(([1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[X,x]))|([1-9]\d{5}[1-9]\d{1}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])(\d{3})))$/;
    strError.Card = "请核对身份证格式，如230103190001010000！";
    //金钱
    strRegex.Price = /^([1-9]\d*|0)(\.\d+)?$/;
    strError.Price = "请核对金钱格式，如99.98！";

    //日期
    strRegex.Date = /((^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(10|12|0?[13578])([-\/\._])(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(11|0?[469])([-\/\._])(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(0?2)([-\/\._])(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([3579][26]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][13579][26])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][13579][26])([-\/\._])(0?2)([-\/\._])(29)$))/;
    strError.Date = "请核对日期格式，如1999.9.9、1999-9-9、1999.09.09！";
    //时间
    strRegex.Time = /^([0-9]|[0-1][0-9]|[2][0-3])(:|：)([0-5][0-9])$/;
    strError.Time = "请核对时间格式，如23：59！";

    strError.Length = "请核对输入信息长度，长度小于";

    strRight.Info = "格式正确！"; //可以设置为空

    //下拉框
    strRegex.DDL = "请选择";
    strError.DDL = "请选择选项";

    //单个checkbox复选框
    strRegex.Check = "请选择";
    strError.Check = "请选择选项";

    //单个radio复选框
    strRegex.Radio = "请选择";
    strError.Radio = "请选择选项";

    //同级一组checkbox复选框
    strRegex.CheckGroup = "请选择";
    strError.CheckGroup = "请选择选项";

    //同级一组radio复选框
    strRegex.RadioGroup = "请选择";
    strError.RadioGroup = "请选择选项";

    //在标签后面追加信息
    var SpanError = "<span class='vldSpanErr'><img src='" + FilePath() + "images/error.gif' /></span>";

    var SpanOk = "<span class='vldSpanRig'><img src='" + FilePath() + "images/ok.gif' /></span>";

    /**   参数配置 end  **/

    /**  Main   **/
    //文件目录，回返最顶级目录 ../
    function FilePath() {
        var file = "";
        var path = window.location.pathname.split('/');
        $(path).each(function () {
            file = "../" + file;
        });
        return file;
    }

    //页验证自检
    $("#form1 [vld]").blur(function () {
        RegexGether($(this));
    });

    //验证处理集合
    function RegexGether($ctrl) {
        switch ($ctrl.attr("vld")) {
            case "nonull":
                RegexNull($ctrl);
                break;
            case "age":
                RegexInputTextAll($ctrl, strRegex.Age, strError.Age);
                break;
            case "nage":
                RegexInputTextOnly($ctrl, strRegex.Age, strError.Age);
                break;
            case "date":
                RegexInputTextAll($ctrl, strRegex.Date, strError.Date);
                break;
            case "ndate":
                RegexInputTextOnly($ctrl, strRegex.Date, strError.Date);
                break;
            case "price":
                RegexInputTextAll($ctrl, strRegex.Price, strError.Price);
                break;
            case "nprice":
                RegexInputTextOnly($ctrl, strRegex.Price, strError.Price);
                break;
            case "email":
                RegexInputTextAll($ctrl, strRegex.Email, strError.Email);
                break;
            case "nemail":
                RegexInputTextOnly($ctrl, strRegex.Email, strError.Email);
                break;
            case "post":
                RegexInputTextAll($ctrl, strRegex.Post, strError.Post);
                break;
            case "npost":
                RegexInputTextOnly($ctrl, strRegex.Post, strError.Post);
                break;
            case "card":
                RegexInputTextAll($ctrl, strRegex.Card, strError.Card);
                break;
            case "ncard":
                RegexInputTextOnly($ctrl, strRegex.Card, strError.Card);
                break;
            case "time":
                RegexInputTextAll($ctrl, strRegex.Time, strError.Time);
                break;
            case "ntime":
                RegexInputTextOnly($ctrl, strRegex.Time, strError.Time);
                break;
            case "math":
                RegexInputTextAll($ctrl, strRegex.Math, strError.Math);
                break;
            case "nmath":
                RegexInputTextOnly($ctrl, strRegex.Math, strError.Math);
                break;
            case "url":
                RegexInputTextAll($ctrl, strRegex.Url, strError.Url);
                break;
            case "nurl":
                RegexInputTextOnly($ctrl, strRegex.Url, strError.Url);
                break;
            case "an":
                RegexInputTextAll($ctrl, strRegex.An, strError.An);
                break;
            case "nan":
                RegexInputTextOnly($ctrl, strRegex.An, strError.An);
                break;
            case "phone":
                RegexInputTextAll($ctrl, strRegex.Phone, strError.Phone);
                break;
            case "nphone":
                RegexInputTextOnly($ctrl, strRegex.Phone, strError.Phone);
                break;
            case "ddl":
                RegexSelect($ctrl);
                break;
            case "check":
                RegexInputCheckBoxRadioOnly($ctrl, strError.Check);
                break;
            case "radio":
                RegexInputCheckBoxRadioOnly($ctrl, strError.Radio);
                break;
            case "checkgroup":
                RegexInputCheckBoxRadioAll($ctrl, strError.CheckGroup);
                break;
            case "radiogroup":
                RegexInputCheckBoxRadioAll($ctrl, strError.RadioGroup);
                break;
        }
    }

    //标签内容空验证
    function RegexNull($ctrl) {
        if (strRegex.NoNull.test($ctrl.val())) {
            return RegexLen($ctrl);
        }
        else {
            Error($ctrl, strError.NoNull);
            return false;
        }
    }

    //验证多个同级一组input(type=radio)标签 或 input(type=checkbox)标签
    function RegexInputCheckBoxRadioAll($ctrl, error) {
        if ($ctrl.parent().children(":checked").length == 0) {
            if ($ctrl.parent().children().attr("super")) {
                //同级标签中可能会有多个[super='y']存在，只取一个，用return false;控制，执行一次就从循环体中跳出
                $ctrl.parent().children("[super='y']").each(function () {
                    Error($(this), error);
                    return false;
                });
            }
            else {
                //同级一组标签一起报错
                $ctrl.parent().children("[type='" + $ctrl.attr("type") + "']").each(function () {
                    Error($(this), error);
                });
            }
            return false;
        }
        else {
            if ($ctrl.parent().children().attr("super")) {
                $ctrl.parent().children("[super='y']").each(function () {
                    Ok($(this));
                    return false;
                });
            }
            else {
                $ctrl.parent().children().each(function () {
                    Ok($(this));
                });
            }
            return true;
        }
    }

    //验证单个input(type=radio)标签 或 input(type=checkbox)标签
    function RegexInputCheckBoxRadioOnly($ctrl, error) {
        if (!$ctrl.attr("checked")) {
            Error($ctrl, error);
            return false;
        }
        else {
            Ok($ctrl);
            return true;
        }
    }

    //select标签，选项验证
    function RegexSelect($ctrl) {
        if ($ctrl.val() == strRegex.DDL) {
            Error($ctrl, strError.DDL);
            return false;
        }
        else {
            Ok($ctrl);
            return true;
        }
    }

    //标签允许为空内容格式验证，type=text标签验证
    function RegexInputTextOnly($ctrl, Regex, error) {
        //先验证标签是否为空
        if (strRegex.NoNull.test($ctrl.val())) {
            return RegexOtherFormat($ctrl, Regex, error);
        }
        else {
            Ok($ctrl);
            return true;
        }
    }

    //标签不允许为空内容格式验证，type=text标签验证
    function RegexInputTextAll($ctrl, Regex, error) {
        //先验证标签是否为空
        if (strRegex.NoNull.test($ctrl.val())) {
            return RegexOtherFormat($ctrl, Regex, error);
        }
        else {
            Error($ctrl, error);
            return false;
        }
    }

    //标签内容格式验证
    function RegexOtherFormat($ctrl, Regex, error) {
        if (Regex.test($ctrl.val())) {
            return RegexLen($ctrl);
        }
        else {
            Error($ctrl, error);
            return false;
        }
    }

    //textarea标签长度验证
    function RegexLen($ctrl) {
        //标签中是否有len属性
        if ($ctrl.attr("len")) {
            var error = strError.Length + $ctrl.attr("len") + "字！";
            if (parseInt($ctrl.val().length) > parseInt($ctrl.attr("len"))) {
                Error($ctrl, error);
                return false;
            }
        }
        Ok($ctrl);
        return true;
    }

    //格式验证错误显示
    function Error($ctrl, error) {

        //标签中有err属性，根据属性内容填入title中
        if ($ctrl.attr("err")) {
            error = $ctrl.attr("err");
        }
        if ($ctrl.attr("super")) {
            //具有super属性标签追加span
            $ctrl.parent().find("span").remove();
            $ctrl.parent().append(SpanError);
            $ctrl.parent().find("span").append(error);
            $ctrl.parent().find("span").fadeTo("slow", 0.66);
        }
        else {
            //追加到title属性中
            $ctrl.attr("title", error);
            $ctrl.addClass("error");
        }
    }

    //格式验证无误，清除错误样式
    function Ok($ctrl) {
        //去除可以存在的错误样式
        if ($ctrl.attr("super")) {
            $ctrl.parent().find("span").remove();
        }
        else {
            $ctrl.removeClass("error");
        }

        if ($.trim($ctrl.val()).length > 0) {
            var right = strRight.Info;
            //检查标签中是否有rig属性
            if ($ctrl.attr("rig")) {
                right = $ctrl.attr("rig");
            }

            //添加正确提示信息
            if ($ctrl.attr("super")) {
                $ctrl.parent().append(SpanOk);
                $ctrl.parent().find("span").append(right);
                $ctrl.parent().find("span").fadeTo("slow",0.99).fadeTo("slow",0.99).fadeTo("slow",0);
            }
            else {
                $ctrl.attr("title", right);
            }
        }
    }

    //提交自检
    $("#vldBtn").click(function () {
        $("#form1 [vld]").each(function () {
            RegexGether($(this));
        });

        //检查标签中样式是否有error
        if ($("#form1 [vld][class='error']").length > 0) {
            return false;
        }
        else {
            return true;
        }
    });
});

 

 

AutoValidate.htm

<!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>
    <link href="Css/style01.css" rel="stylesheet" type="text/css" />
    <link href="Css/AutoValidate.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/Jquery.timer.js" type="text/javascript"></script>
    <script src="Js/style.js" type="text/javascript"></script>
    <script src="Js/AutoValidate.js" type="text/javascript"></script>
</head>
<body>
<form id="form1">
<ul class="tab_ul">
    <li>
    <p>姓名：</p>
    <p><input id="name" type="text" vld="nonull" err="okokok!!!" super="y" rig="格式蜚蜚蜚暃蜚暃暃蜚暃暃蜚暃昦" /></p>
    </li>
    <li>
    <p>年龄：</p>
    <p><input id="age" type="text" vld="age" /></p>
    </li>
    <li>
    <p>日期：</p>
    <p><input id="date" type="text" vld="ndate" /></p>
    </li>
    <li>
    <p>金钱：</p>
    <p><input id="price" type="text" vld="nprice" /></p>
    </li>
    <li>
    <p>邮箱：</p>
    <p><input id="email" type="text" vld="email" /></p>
    </li>
    <li>
    <p>邮编：</p>
    <p><input id="post" type="text" vld="post" /></p>
    </li>
    <li>
    <p>电话：</p>
    <p><input id="phone" type="text" vld="phone" len="10" /></p>
    </li>
    <li>
    <p>身份证：</p>
    <p><input id="card" type="text" vld="card" /></p>
    </li>
    <li>
    <p>时间：</p>
    <p><input id="time" type="text" vld="ntime" /></p>
    </li>
    <li>
    <p>数字：</p>
    <p><input id="math" type="text" vld="nmath" /></p>
    </li>
    <li>
    <p>网址：</p>
    <p><input id="url" type="text" vld="url" /></p>
    </li>
    <li>
    <p>账号：</p>
    <p><input id="an" type="text" vld="nan" /></p>
    </li>
    <li style="height:60px">
    <p>文本长度限制：</p>
    <p><textarea id="len" style="width:300px; height:50px;" len="50" vld="nonull"></textarea></p>
    </li>
    <li>
    <p>下拉框：</p>
    <p><select id="ddl" vld="ddl"><option>请选择</option><option value="1">中国</option></select></p>
    </li>
    <li>
    <p>方形复选框：</p>
    <p><input type="checkbox" id="check1" vld="check" value="1" /><label for="check1">是</label></p>
    </li>
    <li>
    <p>圆形复选框：</p>
    <p><input type="radio" id="radio1" vld="radio" value="1" /><label for="radio1">是</label></p>
    </li>
    <li>
    <p>方形复选框：</p>
    <p><input type="checkbox" id="Checkbox1" vld="checkgroup" name="dsa" value="1"  err="必须选一个" super="y"/><label for="Checkbox1">是</label><input type="checkbox" id="Checkbox2" name="dsa" vld="checkgroup" value="1" /><label for="Checkbox2">是</label></p>
    </li>
    <li>
    <p>圆形复选框：</p>
    <p><input type="radio" id="radio2" vld="radiogroup" name="asd" value="1" /><label for="radio2">是</label><input type="radio" id="radio3" name="asd" vld="radiogroup" value="1" /><label for="radio3">是</label></p>
    </li>
    <li>
    <input id="vldBtn" type="button" value="确认" />
    </li>
    </ul>
    </form>
</body>
</html>

 

　　个人拙见，希望大家多提意见！