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之浮动窗口实现代码(两种方法)
Sep 08 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
vue实现登录拦截
Jun 29 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 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去除HTML标签实例
2013/11/06 PHP
php生成短网址示例
2014/05/05 PHP
php中adodbzip类实例
2014/12/08 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
PHP反射API示例分享
2016/10/08 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
JavaScript 高效运行代码分析
2010/03/18 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
vue如何判断dom的class
2018/04/26 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
Python语言的12个基础知识点小结
2014/07/10 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
python内存动态分配过程详解
2019/07/15 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
Python正则表达式学习小例子
2020/03/03 Python
Linux文件系统类型
2012/09/16 面试题
mysql有关权限的表都有哪几个
2015/04/22 面试题
我的教育故事演讲稿
2014/05/04 职场文书
党员承诺书范文
2014/05/19 职场文书
营销与策划专业求职信
2014/06/20 职场文书
护理学专业求职信
2014/06/29 职场文书
夫妻分居协议书范文
2014/11/26 职场文书