jquery.validate.js 和 layer实现漂亮的表单验证特效

/**
 * 主要用于用户表单校验逻辑 显示on 2017/12/9.
 */
$(function(){
    // 手机号码验证
    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));
    }, "请正确填写您的手机号码");

    // 邮箱验证规则
    jQuery.validator.addMethod("isEmail", function(value, element) {
        var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
        return this.optional(element) || (reg.test(value));
    }, "请正确填写您的邮箱");

    // 下拉框的验证
    jQuery.validator.addMethod("isSelect", function(value, element) {
        return this.optional(element)|| (value!=-1);
    }, "请选择");

});

//校验用户表单逻辑
function checkUserForm(id,operate){
    validator = $("#editUserForm").validate({
        //    onfocusout: false,  //失去焦点
        onkeyup: false, // 键盘是否按下
        //onclick: false,  //是否单击
        rules: {
            userName: {
                required: true,
                //异步验证 开始
                remote: {
                    url:   ctx + "/sys/manager/authc_json/checkRepeatUserName.shtml",//发送请求的url地址
                    type: "post", //请求方式
                    async:false,
                    dataType: "json",//接收的数据类型
                    cache:false,
                    data: {
                        userName: function () {
                            return $("#editUserForm #userName").val();
                        },
                        userID:id?id:0,
                        operate:operate
                    },
                    dataFilter: function (data, type) { //过滤返回结果
                        if(data == "true"){
                            return true;  //true代表用户名称还未存在
                        }else{
                            return false; //false代表用户名称已经存在
                        }
                    }
                }
                //异步验证 结束
            },
            roleID:{
                required:true,
                isSelect:true
            },
            realname:{
                required: true
            },
            phone:{
                required:true,
                isMobile:true
            },
            email:{
                isEmail:true
            }

        },
        messages: {
            userName: {
                required: "请填写您的账号",
                remote:"录入的账号名称重复，请重新输入"
            },
            realname:{
                required: "请填写您的真实姓名"
            },
            roleID:{
                required:"请选择关联角色",
                isSelect:"请选择关联角色"
            },
            phone:{
                required:"请填写您的手机号码",
                isMobile:'手机号码格式不正确'
            },
            email:{
                isEmail:'邮箱格式不正确'
            }
        }
    });

}

 

/**
 * 扩展插件 错误提示用layer 显示on 2017/12/9.
 */
(function ($) {
    "use strict";
    $.fn.extend($.validator.defaults, {
        //重写showErrors
        showErrors: function (errorMap, errorList) {
            $.each(errorList, function (i, v) {
                //在此处用了layer的方法,显示效果更美观
                if($(v.element)[0].tagName.indexOf("SELECT")>-1){ // 针对于select2  控件做了调整
                    layer.tips(v.message, $(v.element).next(), {icon: 2 , time: 2000 });
                }else{
                    layer.tips(v.message, v.element, {icon: 2 , time: 2000 });
                }
                return false;
            });
        }
    });
})(jQuery);-------------大家可以尝试下