实现效果:
错误信息的默认位置以及标签
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>
268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
