jquery.validate使用 - 4
自定义错误消息的显示方式
默认情况下,验证提示信息用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();
}
})
jquery.validate使用 - 4的更多相关文章
- jQuery Validate 表单验证 — 用户注册简单应用
相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 修改 jquery.validate.js 支持非form标签
尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- Jquery客户端校验——jquery.validate.js
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
- jquery.validate不用submit而用js提交的例子
$("#form").validate(); $("#btn).click(function(){ if($("#form").valid()){ $ ...
- ASP.NET MVC 5 Jquery Validate
ClientValidationEnabled 在asp.net mvc 5中ClientValidationEnabled默认为TRUE,所以也不需要刻意去设置 应用ValidationAttrib ...
- jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
- JS验证控件jQuery Validate
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
- 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
随机推荐
- apache2 重启、停止、优雅重启、优雅停止
停止或者重新启动Apache有两种发送信号的方法 第一种方法: 直接使用linux的kill命令向运行中的进程发送信号.你也许你会注意到你的系统里运行着很多httpd进程.但你不应该直接对它们中的任何 ...
- 《metasploit渗透测试魔鬼训练营》学习笔记第七章--社会工程学
五.社工工程学 5.1社会工程系框架 5.1.1信息搜集 maltego是一个高度自动化的信息搜集工具,集成在BT5中,如果国内网络环境使用时 ...
- map详解<一>
首先了解下pair工具类: 这个类在头文件<utility>,功能:将俩个类型可能不一样的值组合在一起.,通过first和second来访问这两个值.还定义了operator == 和op ...
- textarea多行文本框自适应高度
<script src="https://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script> <scr ...
- Beta Distribution
首先思考一个问题: 熟悉棒球运动的都知道有一个指标就是棒球击球率(batting average),就是用一个运动员击中的球数除以击球的总数,我们一般认为0.266是正常水平的击球率,正常范围在0.2 ...
- LWIP network interface 即 LWIP 的 硬件 数据 接口 移植 首先 详解 STM32 以太网数据 到达 的第一站: ETH DMA 中断函数
要 运行 LWIP 不光 要实现 OS 的 一些 接口 ,还要 有 硬件 数据 接口 移植 ,即 网线上 来的 数据 怎么个形式 传递给 LWIP ,去解析 做出相应的 应答 ,2017 ...
- SpringMVC找不到对应的页面
确认springmvc配置文件视图解析器配置正确. <!-- 视图解析器 --> <bean class="org.springframework.web.servlet. ...
- objc中类方法里的self指的是什么
所有转出“博客园”,请您注明出处:http://www.cnblogs.com/xiaobajiu/p/4121431.html objc中类方法里的self指的是什么 在objc中是可以在类方法中使 ...
- jQuery左侧菜单实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- iOS下ajax回调函数里不能播放audio
iOS下audio必须监测到事件才可播放, ajax回调函数里不能播放 解决办法 在点击方法里先播放然后立即暂停,在回调函数里重新播放 onclick(function(){ $("#_wx ...