jquery validate 添加自定义样式

实现效果:

错误信息的默认位置以及标签

validate插件的默认错误信息插入位置是 要验证的元素的后面,所用的标签是 ,验证不通过时,会给label以及所验证的元素添加 class=error, 验证通过后,label会被隐藏.

先要知道下面这几个方法

1.errorElement:标签名
表示错误信息所用的标签,默认是label
2.errorPlacement:function(error,element) { 修改错误信息的位置 }
error指的是错误信息,如用户名有误,element指的是校验的元素,如用户名输入框,方法体内可以写错误信息出现在校验元素,如:
errorPlacement: function (error, element) { $(element).after(error); },
3.success:function(参数名) { }
参数指的是错误信息的标签,方法体可以写对这个标签的样式的操作.
4.showErrors:function (errorMap, errorList) {}
这里只用到errorMap,errorMap是出错元素的一个键值对的集合, 其中的键是元素name属性的值,值是元素的value.

直接上代码

css代码:

em {font-size:10px; color:red}
em.success {
    color:green;
}

js代码:

$(function () {
    var pic = '';
    //bootstrap的字体图标,这是上面图片中的×
    $("#myForm").validate({
        rules: {
            name: "required",
            password: "required"
        },
        messages: {
            name: pic + "用户名不能为空",
            password:pic + "密码不能为空"
        },

        errorElement: "em", //可以用其他标签，记住把样式也对应修改
        success: function(em) {
            //em指向上面那个错误提示信息标签em
            $(em).text("").addClass("glyphicon glyphicon-ok-circle success");
            //先清空em元素里的内容,然后添加一个成功的√的字体图标样式,success是一个样式,让这个字体图标变成绿色
        },

        showErrors:function (errorMap, errorList) {
            for (var element in errorMap) {
                $("#" + element).next("em").removeClass();
                //去除success样式和字体图标,不去除会跟错误信息一起出现
            }
            this.defaultShowErrors();
            //默认的错误信息显示样式
        }
    })
});

html代码:

    

        用户名
    
    

        
    
    

        密码
    

        
    
    

        提交