实现效果:
错误信息的默认位置以及标签
validate插件的默认错误信息插入位置是要验证的元素的后面,所用的标签是
先要知道下面这几个方法
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>
