Jquery Validate 自定义验证

因为bootstrap validate表单验证的提交必须是submit类型的button，不能修改，所以选择了Jquery的form表单验证

function validForm(){
        return $("#applyForm").validate({ //这里加上return之后对表单提交没有要求了(不管是submit按钮还是button按钮都可以)
        onfocusout: function(element) { $(element).valid(); },  /*失去焦点时验证*/
            rules: {
                name: {
                    required: true,
                    maxlength: 32
                },
                birth: {
                    required: true,
                    date: true,
                    checkTime: true
                },
                phone: {
                    required: true,
                    isMobile: true
                },
                email: {
                    required: true,
                    email: true
                    /*邮箱验证*/
                }
            },
            messages: {
               name: "请输入您的姓名", 
                birth: "请输入您的出生日期", 
               email: "请输入有效的邮箱",
               arrivalTime: "请输入您的来校时间",
              phone: ""
           }
        });
    }

 

注意：rules里面的每一项对应的是form表单中每一个输入框的name，不是id

可以自定义验证方法

//手机号验证
            jQuery.validator.addMethod("isMobile", function(value, element) {
                var length = value.length;
                var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
                return this.optional(element) || (length == 11 && mobile.test(value));
            }, "请正确填写您的手机号码");

可以对form表单中的某一个input输入框进行验证

$("#phone").valid();验证成功返回true，否则返回false

 

自定义错误显示样式，我用的是toolTip的方式

$.validator.setDefaults({
        submitHandler: function() {
            $("form").submit();
        },
        showErrors: function(map, list) {
            // there's probably a way to simplify this
            var focussed = document.activeElement;
            if (focussed && $(focussed).is("input, textarea")) {
                $(this.currentForm).tooltip("close", {
                    currentTarget: focussed
                }, true)
            }
            this.currentElements.removeAttr("title").removeClass("ui-state-highlight");
            $.each(list, function(index, error) {
                $(error.element).attr("title", error.message).addClass("ui-state-highlight");
            });
            if (focussed && $(focussed).is("input, textarea")) {
                $(this.currentForm).tooltip("open", {
                    target: focussed
                });
            }
        }
    });