mwValidate.js验证插件

这段时间在公司一直做项目的同时，也学了下js，感觉有必要做一些什么东西出来。思来想去就做了最简单的一个验证插件。我很清楚这个东西市面上已经很多了，但我的目的也很清楚，检验我的学习成果。所以也就无所谓了。

因为我并没有看别人的插件是如何写的，所以对于插件里面的东西要遵循什么原则或是有什么潜在的规则至少目前是没有遵循的。先上代码吧。

; (function () {
    //插件开始
    $.fn.mwValidat = function () {
        var $all_v = this.find("[data-validate]");

        var $self = this;//保存当前jq对象

        var haveNoError = true;;//没有错误
        $all_v.each(function (index, item) {
            var $target = $(item);
            var validateFlag = $target.data("validate");
            var cType = $target[0].localName;
            var name = $target.attr("name");
            var v = $target.val().trim();
            var tipEl = "[data-validate-tip='" + name + "']";
            //解析验证表达式
            var res = JeamyValidate.InitStr(validateFlag);
            //非空判断
            if (res.express == "notnull") {
                if (cType == "input" || cType == "textarea") {
                    var s = JeamyValidate.CheckNull(v);
                    $self.find(tipEl).html(s);
                    if (s) haveNoError = false;
                }
                //select 默认值处理
                if (cType == "select") {
                    var s = JeamyValidate.IsDefualt(v, -1);
                    $self.find(tipEl).html(s);
                    if (s) haveNoError = false;
                }
            }
            //长度判断
            if (res.express == "strlen") {
                var s = JeamyValidate.CheckLen(v, res.first, res.second);
                $self.find(tipEl).html(s);
                if (s) haveNoError = false;
            }
            //大小范围判断
            if (res.express == "int") {
                var s = JeamyValidate.CheckRang(v, res.first, res.second);
                $self.find(tipEl).html(s);
                if (s) haveNoError = false;
            }
            //正则验证
            if (res.express == "strreg") {

                if (res.first == "email") {
                    var s = JeamyValidate.IsEmail(v);
                    $self.find(tipEl).html(s);
                    if (s) haveNoError = false;
                }
                if (res.first == "idcard") {
                    var s = JeamyValidate.IsIDCard(v);
                    $self.find(tipEl).html(s);
                    if (s) haveNoError = false;
                }
                if (res.first == "phone") {
                    var s = JeamyValidate.IsPhone(v);
                    $self.find(tipEl).html(s);
                    if (s) haveNoError = false;
                }
            }

        })
        return haveNoError;
    };

    //定义一个链式调用验证的类
    var Methods = function () { };
    Methods.prototype.addMethod = function (fn_name, fn) {
        this[fn_name] = fn;
        return this;
    }

    //实现验证类
    var JeamyValidate = new Methods();
    JeamyValidate.addMethod("CheckNull", function (value) {
        if (value == null || value.trim() === "") {
            return JeamyValidate_Info.Null;
        }
        return "";
    }).addMethod("IsEmail", function (value) {
        var re = /^\w+@\w+\.\w{2,3}/;
        var r = value.match(re);
        if (r == null)
            return JeamyValidate_Info.Email;
        return "";
    }).addMethod("IsPhone", function (value) {
        var re = /^(([0-9]+)-)?\d{7,11}$/;
        var r = value.match(re);
        if (r == null)
            return JeamyValidate_Info.Phone;
        return "";
    }).addMethod("IsIDCard", function (value) {
        var _re15 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/; // 15位
        var _re18 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/; // 18位
        var r = value.match(_re15);
        var r1 = value.match(_re18);
        if (r == null && r1 == null)
            return JeamyValidate_Info.IDCard;
        return "";
    }).addMethod("IsDefualt", function (value, defval) {
        if (value == defval) {
            return JeamyValidate_Info.DefaultErr;
        }
        return "";
    }).addMethod("CheckLen", function (value, min, max) {
        //字符串长度验证
        if (value.length < min) {
            return JeamyValidate_Info.StrShort;
        }
        if (value.length > max) {
            return JeamyValidate_Info.StrLong;
        }
        return "";
    }).addMethod("CheckRang", function (value, start, end) {
        if (!value.match(/^\d+$/)) {
            return JeamyValidate_Info.LegalInteger;
        }
        if (parseInt(value) < parseInt(start)) {
            return JeamyValidate_Info.IntegerSmall;
        }
        if (parseInt(value) > parseInt(end)) {
            return JeamyValidate_Info.IntegerBigger;
        }
        return "";
    }).addMethod("InitStr", function (str) {
        var splitArr = str.split(',');
        if (splitArr.length == 1) {
            splitArr[1] = "";
            splitArr[2] = "";
        }
        if (splitArr.length == 2) {
            splitArr[2] = "";
        }
        return {
            express: splitArr[0],
            first: splitArr[1],
            second: splitArr[2]
        };

    });

    //提示信息
    var JeamyValidate_Info = {
        Null: "<span style='color:red;font-size:12px;'>不能为空!<span>",
        Email: "<span style='color:red;font-size:12px;'>电子邮件格式不正确!<span>",
        Phone: "<span style='color:red;font-size:12px;'>不是合法的手机号码!<span>",
        IDCard: "<span style='color:red;font-size:12px;'>不是合法的身份证号码!<span>",
        DefaultErr: "<span style='color:red;font-size:12px;'>请选择!<span>",
        StrShort: "<span style='color:red;font-size:12px;'>字符串长度太小!<span>",
        StrLong: "<span style='color:red;font-size:12px;'>字符串太长!<span>",
        IntegerSmall: "<span style='color:red;font-size:12px;'>数字太小!<span>",
        IntegerBigger: "<span style='color:red;font-size:12px;'>数字太大!<span>",
        LegalInteger: "<span style='color:red;font-size:12px;'>请输入合法数字!<span>",
    }
})();

以上是插件代码。如何使用呢？

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-1.8.3.min.js"></script>
    <script src="Manage/Scripts/jeamy.validate-1.0.js?v=21"></script>
</head>
<body>
    <div id="box">
    <input data-validate="notnull" name="username" type="text" value="123" /><label data-validate-tip="username"></label>
        <br/>
    <input data-validate="notnull" type="text" name="password" value="" /><span data-validate-tip="password"></span> <br/>
        <select data-validate="notnull" name="choose">
            <option value="-1">请选择</option>
            <option value="1">A</option>
            <option value="2">B</option>
        </select><label data-validate-tip="choose"></label> <br/>
        <input data-validate="strlen,3,10" type="text" name="title" /><span data-validate-tip="title" ></span> <br/>
        <input data-validate="strreg,email" type="text" name="email" /><span data-validate-tip="email"></span> <br/>
        <input data-validate="strreg,phone" type="text" name="phone" /><span data-validate-tip="phone"></span> <br/>
        <input data-validate="strreg,idcard" type="text" name="idcard" /><span data-validate-tip="idcard"></span> <br/>
        <input data-validate="int,200,99999" type="text" name="money" /><span data-validate-tip="money"></span> <br/>
        <input data-validate="int,200,99999" type="text" name="money1" /><span data-validate-tip="money1"></span> <br/>
        <input data-validate="int,200,99999" type="text" name="money2" /><span data-validate-tip="money2"></span> <br/>
        <input type="button" value="验证" onclick="validate()" /><br/>
    </div>

   <script type="text/javascript">
       function validate() {
           console.log($('#box').mwValidat());
       }
   </script>
</body>

</html>

这里需要解释下插件的支持：插件使用HTML5的新特性，寻找的是带有 data-validate的标签。标签的内容是需要验证的表达式。

如：

  <input data-validate="strlen,3,10" type="text" name="title" /><span data-validate-tip="title" ></span> 

此时 data-validate的值是 strlen,3,10 此时代表，需要验证 input输入的内容的字符串长度为 必须大于3 小于10 （注意这里没有等于，其实代码在上面，可以自己改的）。如果用户输入的内容与我们的规则不相符，则系统会返回一个string。此时这个string是在插件内部的，并没有返回出来。所以，插件用了一个 data-validate-tip 这个标签来表示需要显示的提示信息。而这个tip的值对应的就是 这个表单控件的name属性。

支持的验证模式

notnull	不为空验证
strlen,3,10	字符串长度验证，字符串长度必须大于3小于10
strreg,email	正则验证，后面的email代表，用email的正则去匹配输入
strreg,phone	正则验证，后面的phonel代表，用手机号的正则去匹配输入
strreg,idcard	正则验证，后面的idcard代表，用身份证（支持15和18位的身份证）的正则去匹配输入
int,200,99999	int范围验证，输入的值必须大于200，小于99999.具体使用可以自定义。

注：1、如果是select 标签加上notnul验证，则需要添加默认选择项-1，当select的value=-1 的时候，插件认为用户没有做出选择。

2、如果使用notnull以外的其他验证方式，插件会自动加上非空验证。

如何调用？

在上述HTML中只需要

$('#box').mwValidat();

即可调用，插件返回 true，false。如果全部的验证通过则返回true，否则为false。

上述HTML的使用效果如下：

最后：

这个插件还存在一些问题，或许还有一些BUG，但目前使用上来说够用了。但是，有个弊端就是，验证的提示不能根据业务来自定义。第二个版本，我会对这个问题进行解决。