jquery validate使用攻略 第四步


Posted in Javascript onJuly 01, 2010

默认情况下,验证提示信息用label元素来显示, 并且会添加css class, 通过css可以很方便设置出错控件以及错误信息的显示方式。

/* 输入控件验证出错*/
form input.error { border:solid 1px red;}

/* 验证错误提示信息*/
form label.error{width: 200px;margin-left: 10px; color: Red;}

如果想自定义显示方式,可以修改jquery.validate的默认显示方式

默认用label显示错误消息,可以通过errorElement属性来修改
errorElement: 错误消息的html标签

$(".selector").validate
errorElement: "em"
})

可以在出错信息外用其他的元素包装一层。
wrapper: 错误消息的外层封装html标签

$(".selector").validate({
wrapper: "li"
})

验证出错的css class默认是error,通过errorClass可以修改
errorClass: 验证出错时使用的css class

$(".selector").validate({
errorClass: "invalid"
})

还自定义验证成功时的动作
success: 如果值是字符串,会当做一个css类,如果是一个函数,则执行该函数

$(".selector").validate({
success: "valid"
})

或者

success: function(label) {
label.html(" ").addClass("checked");
}

还可以把错误消息统一到一个容器显示
errorLabelContainer: 将错误消息统一到一个容器显示

$("#myform").validate({
errorLabelContainer: "#messageBox"
})

默认情况下,错误消息是放在验证元素后面的,可以自定义错误消息的显示位置

$(".selector").validate({
errorPlacement: function(error, element) {
error.appendTo( element.parent("td").next("td") );
}
})

更进一步可以定义一个组,把几个地方的出错信息统一放在一个地方,用error Placement控制把出错信息放在哪里
groups:定义一个组

$(".selector").validate({
groups: {
username: "fname lname"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "fname" || element.attr("name") == "lname" )
error.insertAfter("#lastname");
else
error.insertAfter(element);
}
})

高亮显示
highlight: 高亮显示,默认是添加errorClass
unhighlight: 和highlight对应,反高亮显示

$(".selector").validate({
highlight: function(element, errorClass) {
$(element).addClass(errorClass);
$(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorClass);
$(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
}
});

或者可以完全自定义错误显示
showErrors: 得到错误的显示句柄

$(".selector").validate({
showErrors: function(errorMap, errorList) {
$("#summary").html("Your form contains " + this.numberOfInvalids()
+ " errors, see details below.");
this.defaultShowErrors();
}
})

Javascript 相关文章推荐
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
常用jQuery选择器总结
Jul 11 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
angular-cli修改端口号【angular2】
Apr 19 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 Javascript
jquery.validate使用攻略 第三部
Jul 01 #Javascript
jquery.validate使用攻略 第二部
Jul 01 #Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 #Javascript
jquery.validate使用攻略 第一部
Jul 01 #Javascript
jquery 新浪网易的评论块制作
Jul 01 #Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 #Javascript
jQuery ajax cache缓存问题
Jul 01 #Javascript
You might like
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
PHP线程的内存回收问题
2016/07/08 PHP
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
Python中作用域的深入讲解
2018/12/10 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
python中的数据结构比较
2019/05/13 Python
python实现邮件自动发送
2019/08/10 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
18岁生日感言
2014/01/12 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
nginx 配置缓存
2022/05/11 Servers