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 相关文章推荐
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 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数组交集的优化代码分析
2011/03/06 PHP
php数据库备份还原类分享
2014/03/20 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
python制作一个桌面便签软件
2015/08/09 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
土木工程师岗位职责
2013/11/24 职场文书
校长岗位职责
2013/11/26 职场文书
妇产医师自荐信
2014/01/29 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
一名老师的自我评价
2014/02/07 职场文书
先进集体获奖感言
2014/02/13 职场文书
应届大学生自荐书
2014/06/17 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
事业单位聘任报告
2015/03/02 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android