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 相关文章推荐
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
VUE中使用MUI方法
Feb 12 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 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 将excel导入mysql
2009/11/09 PHP
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
JavaScript 布尔操作符解析  && || !
2012/08/10 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
javascript实现连续赋值
2015/08/10 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python中强大的命令行库click入门教程
2016/12/26 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
体育老师的教学自我评价分享
2013/11/19 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
股份转让协议书范本
2015/01/27 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
公司董事任命书
2015/09/21 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书