jquery验证插件

Posted 2020-06-13

　　表单验证，每个管理项目都绕不过去的东西。

　　但是出自名门的jquery validate给人一种很不OK的感觉，这里我只说一点。据说它的基本使用如下：

 $("#myform").validate({
  submitHandler: function(form) {
    // some other code
    // maybe disabling submit button
    // then:
    $(form).submit();
  }
 });

　　单看这里它的表单提交，是写在validate方法里的，validate方法接收的是一个配置对象……那我要使用其它的jquery框架进行纳异步提交怎么办？这里提一下，我页面上使用的是jquery.unobtrusive-ajax.js配合asp.net mvc5的Ajax.BeginForm进行异步提交的。而这里我就没有找到很好的配合方案。

　　实际上EF6+mvc5允许在model里定义页面的校验，这又是另外一种方式，我简单的尝试了一下发现有BUG就没有继续深入尝试了，原因一是因为发现校验的BUG，原因二是页面上的JS验证为什么要耦合到Model层里去？不是一直都说要解耦合吗？我如果把校验规则写到Model里，那页面上的校验还要依赖Model，我看不出哪里解耦合了，一旦出现BUG将会非常难以调试……好，这里只是我一的点想法不作深入探讨，如有不正确之处还请大神们指正。

　　我想着最好能在form的submit事件里进行验证的。

　　好吧，最后在github上找到了一个formvalidate

　　链接：https://github.com/zhuli/formValidate/blob/master/formValidate.js

　　我进行了一些修改……不多说，直接上代码：

var formValidate = window.formValidate || (function (document, $) {

    var that = {};

    that.options = {
        number : {reg : /^[0-9]+$/, str : ‘必须为数字‘},
        decimal : {reg : /^[-]{0,1}(\d+)[\.]+(\d+)$/ , str : ‘必须为DECIMAL格式‘},
        english : {reg : /^[A-Za-z]+$/, str : ‘必须为英文字母‘},
        upper_english : {reg : /^[A-Z]+$/, str : ‘必须为大写英文字母‘},
        lower_english : {reg : /^[a-z]+$/, str : ‘必须为小写英文字母‘},
        email : {reg : /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9][email protected]([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/, str : ‘Email格式不正确‘},
        chinese : {reg : /[\u4E00-\u9FA5\uf900-\ufa2d]/ig, str : ‘必须含有中文‘},
        url : {reg : /^[a-zA-z]+:\/\/[^s]*/, str : ‘URL格式不正确‘},
        mobile: { reg: /^1[345678]\d{9}$/, str: ‘手机号码格式不正确‘ },
        ip : {reg : /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/ , str : ‘IP地址格式不正确‘},
        money : {reg : /^[0-9]+[\.][0-9]{0,3}$/ , str : ‘金额格式不正确‘},
        number_letter : {reg : /^[0-9a-zA-Z\_]+$/ , str : ‘只允许输入英文字母、数字、_‘},
        zip_code : {reg : /^[a-zA-Z0-9 ]{3,12}$/ , str : ‘邮政编码格式不正确‘},
        account : {reg : /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/ , str : ‘账号名不合法，允许5-16字符，字母下划线和数字‘},
        qq : {reg : /[1-9][0-9]{4,}/ , str : ‘QQ账号不正确‘},
        card: { reg: /^(\d{6})(18|19|20)?(\d{2})([01]\d)([0123]\d)(\d{3})(\d|X)?$/, str: ‘身份证号码不正确‘ },
        datetime: { reg: /^([12]\d{3})[-/](\d|[0][1-9]|[1][0-2])[-/](\d|[0-2][0-9]|[3][0-1])\s{1}(\d|[0-1][0-9]|[2][0-3]):(([0-5][0-9])|([0-5][0-9]:\d{1,2}))$/, str: ‘请输入正确的日期格式，如1997-02-15 12:25‘ },
        date: { reg: /^([12]\d{3})-([0][1-9]|[1][0-2])-([0-2][0-9]|[3][0-1])$/, str: ‘请输入正确的日期格式如：1997-02-15‘ },
        time: { reg: /^(\d|[0-1][0-9]|[2][0-3]):([0-5][0-9])$/, str: ‘请输入正确的时间格式，如12:25‘ },
    };

    //设置参数
    that.setOptions = function (options) {
        for (var key in options) {
            if (key in this.options) {
                this.options[key] = options[key];	
            }
        }
    };

    that.validateForm = function (selector) {
        var formChind = $(selector).find("input[validate],textarea[validate]");
        var testResult = true;
        formChind.each(function (i) {
            var child = formChind.eq(i);
            var value = child.val();
            var len = value.length;
            var childSpan = child.siblings("span.ls-msg").first();
            childSpan.html(‘‘);
            child.closest(".control-group").addClass("success").removeClass("error");
            //属性中是否为空的情况
            if (child.attr(‘empty‘)) {
                
                if (child.attr(‘empty‘) == ‘yes‘ && value == ‘‘) {
                    return;
                }
                if (child.attr(‘empty‘) == ‘no‘ && (value == null || value.trim() == ‘‘)) {
                    if (childSpan) {
                        childSpan.text(‘此输入项不能为空‘);
                        child.closest(".control-group").removeClass("success").addClass("error");
                    }
                    testResult = false;
                    return;
                }
            }

            //属性中min 和 max 最大和最小长度
            var min = null;
            var max = null;
            if (child.attr(‘min‘)) min = child.attr(‘min‘);
            if (child.attr(‘max‘)) max = child.attr(‘max‘);
            if (min && max) {
                if (len < min || len > max) {
                    if (childSpan) {
                        childSpan.text(‘此输入项字符长度应该在‘ + min + ‘与‘ + max + ‘之间‘);
                        child.closest(".control-group").removeClass("success").addClass("error");
                        testResult = false;
                        return;
                    }
                }
            } else if (min) {
                if (len < min) {
                    if (childSpan) {
                        childSpan.text(‘此输入项字符长度应大于‘ + min);
                        child.closest(".control-group").removeClass("success").addClass("error");
                        testResult = false;
                        return;
                    }
                }
            } else if (max) {
                if (len > max) {
                    if (childSpan) {
                        childSpan.text(‘此输入项字符长度应小于‘ + max);
                        child.closest(".control-group").removeClass("success").addClass("error");
                        testResult = false;
                        return;
                    }
                }
            }

            //正则校验
            if (child.attr(‘validate‘)) {
                var type = child.attr(‘validate‘);
                var result = that.check(value, type);
                if (childSpan) {
                    if (result != true) {
                        childSpan.text(result);
                        child.closest(".control-group").removeClass("success").addClass("error");
                        testResult = false;
                    }
                }
            }

        });
        return testResult;
    }

    //检测单个正则选项
    that.check = function (value, type) {
        if (this.options[type]) {
            var val = this.options[type][‘reg‘];
            if (!val.test(value)) {
                return this.options[type][‘str‘];
            }
            return true;
        } else {
            return ‘找不到该表单验证正则项‘;
        }
    };
    return that;

}(document, window.jQuery));

window.formValidate = formValidate;

　　其中的正则表达式有几个是自己写的，不敢保证都正确-_-||，如果使用的时候有什么不正常的话还请自己参照修改。

　　使用方式：

html这样：

<input type="text" maxlength="10" name="LoginName" placeholder="登录名" validate min=2 max=10>
            <span class="ls-msg help-inline"></span>

JS这样：

$("form").submit(function () {
        var result = formValidate.validateForm("#"+this.id);
        return result;
    });

　　就可以进行验证了！