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 = '<span class="glyphicon glyphicon-remove"></span>';//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代码:

<body>
<form id="myForm"><div><label for="name">用户名</label></div><div><input type="text" name="name" id="name"></div><div><label for="password">密码</label></div><div><input type="text" name="password" id="password"></div><div><button type="submit">提交</button></div>
</form>
</body>