javascript - More efficient way of doing this hide()/show() jQuery - Code Review Stack Exchange
to customize your list.
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. J it only takes a minute:
Here's how it works:
Anybody can ask a question
Anybody can answer
The best answers are voted up and rise to the top
I currently have the following jQuery code, which does work, but I know there is a better way of doing it without having to repeat myself so much:
$(document).ready(function() {
$('.container').hide();
$('#btn-post').click(function() {
$('.container').hide();
$('#btn-game').click(function() {
$('.container').hide();
$('#game_container').show();
$('#btn-video').click(function() {
$('.container').hide();
$('#video_container').show();
$('#btn-giveaway').click(function() {
$('.container').hide();
$('#giveaway_container').show();
Basically, when a button is clicked, I need to show the additional div for that content type and hide the rest. If it's just a Post, then all of the divs are hidden as there is no specific div for the post type.
The HTML looks like this:
&div class="btn-group" data-toggle="buttons-radio"&
&button id="btn-post" class="btn btn btn-primary active" type="button"&Post&/button&
&button id="btn-game" class="btn btn btn-primary" type="button"&Game&/button&
&button id="btn-video" class="btn btn btn-primary" type="button"&Video&/button&
&button id="btn-giveaway" class="btn btn btn-primary" type="button"&Giveaway&/button&
&div class="container" id="game_container"&
game stuff
&div class="container" id="video_container"&
video stuff
&div class="container" id="giveaway_container"&
giveaway stuff
What's the more efficient way of writing that jQuery?
migrated from
This question came from our site for professional and enthusiast programmers.
Change your HTML to (note the data attributes):
&div class="btn-group" data-toggle="buttons-radio"&
&button id="btn-post" class="btn btn btn-primary active" type="button"&Post&/button&
&button id="btn-game" data-target="game_container" class="btn btn btn-primary" type="button"&Game&/button&
&button id="btn-video" data-target="video_container" class="btn btn btn-primary" type="button"&Video&/button&
&button id="btn-giveaway" data-target="giveaway_container" class="btn btn btn-primary" type="button"&Giveaway&/button&
&div class="container" id="game_container"&
game stuff
&div class="container" id="video_container"&
video stuff
&div class="container" id="giveaway_container"&
giveaway stuff
and now your javascript can just be:
$(document).ready(function() {
$('.container').hide();
$('.btn-group button').click(function(){
var target = "#" + $(this).data("target");
$(".container").not(target).hide();
$(target).show();
$('.container').hide();
$('.btn').click(function() {
$('.container').hide();
$('#'+this.id.split('-')[1]+'_container').show();
I'd suggest:
$('button[id^=btn]').click(
function() {
var affects = this.id.split('-')[1];
$('.container').hide();
$('#' + affects + '_container').show();
References:
First off, your model looks a lot like many implementations of a tab-based interface. Using one of the existing frameworks for that will make your life a lot easier and avoid you re-writing boilerplate. Some people are partial to JQuery-UI's tabs, but I much prefer . (Your syntax actually suggests you might be using Bootstrap's Button Groups already...) In addition to the obvious function that fires when you click on a tab, you can also just use $(#id_for_tab_you_want).tab('show') for programmatic access to hide/show the tabs. Much easier than showing and hiding everything manually. (Also, note that you don't need to actually show the tab UI in order to use the logic. You can hide either the whole list of tabs, or just the ones you don't want to see. The functions still work well.)
But if you want a plain-old JQuery option, chaining and the siblings() function can boil it down into one line for you inside your listener function:
$("#" + $(this).data("target")).show().siblings('.container').hide()
What you're doing is locating your target &div&, showing it, then immediately finding any siblings it has with the class .container, and hiding those. Here's an updated .
Better solution with only one line of JS/Jquery, as demoed here:
This leverages the .Toggle functionality, which is perfect for this
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
rev .24662
Code Review Stack Exchange works best with JavaScript enabled114网址导航Lightweight Footprint
Only 32kB minified and gzipped. Can also be included as an AMD module
CSS3 Compliant
Supports CSS3 selectors to find elements as well as in style property manipulation
Cross-Browser
What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It makes
things like HTML document traversal and manipulation, event handling,
animation, and Ajax much simpler with an easy-to-use API that works across
a multitude of browsers. With a combination of versatility and
extensibility, jQuery has changed the way that millions of people write
JavaScript.
Corporate Members
Support from our corporate members makes it possible for the jQuery
Foundation to continue our work on our JavaScript libraries and pushing
the open web forward with events and participation in the standards process.
for a full
list of corporate and individual members.
Other jQuery Foundation Projects
A Brief Look
DOM Traversal and Manipulation
Get the &button& element with the class &continue& and change its HTML to &Next Step...&
$( &button.continue& ).html( &Next Step...& )
Event Handling
Show the #banner-message element that is hidden with
display:none in its CSS when any button in #button-container is
var hiddenBox = $( &#banner-message& );$( &#button-container button& ).on( &click&, function( event ) {
hiddenBox.show();});
Call a local script on the server /api/getWeather
with the query parameter zipcode=97201
and replace the element #weather-temp&s html with the returned text.
url: &/api/getWeather&,
zipcode: 97201
success: function( result ) {
$( &#weather-temp& ).html( &&strong&& + result + &&/strong& degrees& );后使用快捷导航没有帐号？
只需一步，快速开始
查看: 89746|回复: 28
JQuery获取div的display属性
UID546089在线时间 小时积分24帖子离线17179 天注册时间
新手上路, 积分 24, 距离下一级还需 26 积分
RT，JQuery如何获取div的display属性？
UID246112在线时间 小时积分175帖子离线17179 天注册时间
初级会员, 积分 175, 距离下一级还需 25 积分
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&script type=&text/javascript& src=&/ajax/jquery/jquery-1.4.2.min.js&&&/script&
&script type=&text/javascript&&
$(function(){
alert($('#a').css('display'));
alert($('#b').css('display'))
&div id=&a&&a&/div&
&div id=&b& style=&display:none&&b&/div&
&提示：您可以先修改部分代码再运行
参见 /css/
[[i] 本帖最后由 tsdyy 于
10:46 编辑 ]
UID117525在线时间 小时积分12069帖子离线17179 天注册时间
你非得JQuery？
document.getElementById(id).style.display
JQuery让这个行业制造了很多糟糕的代码啊……
UID546089在线时间 小时积分24帖子离线17179 天注册时间
新手上路, 积分 24, 距离下一级还需 26 积分
回复 3# bound0
是这样的，因为我没有为div设置默认的display属性，前台给出的页面隐藏显示层的js是用JQuery写的，所以我用document.getElementById(id).style.display获取的display属性都是&&，
UID546089在线时间 小时积分24帖子离线17179 天注册时间
新手上路, 积分 24, 距离下一级还需 26 积分
UID537309在线时间 小时积分1752帖子离线17179 天注册时间
银牌会员, 积分 1752, 距离下一级还需 1248 积分
我不同意版主的说法。
如果你学会了用jquery你会发现，jquery的无比强大。
让程序变得垃圾的不是类库，而是一个糟糕的程序员。
asp漏洞如此之多，好的程序员依然可以写出防御力强大的程序。
java、php安全性相对较高，但是也架不住垃圾程序员的东拼西凑。
类库是优秀的代码集合，它的诞生是提高我们的开发效率以及开发质量，而不是垃圾代码的根源。
UID117525在线时间 小时积分12069帖子离线17179 天注册时间
回复 6# andydesign
JQuery当然不是垃圾代码的根源，但是很多人因为有了JQuery就可以对付一些他们原本弄不来的任务，最终的效果就是产生了很多糟糕的代码。
所以说如果没有JQuery，就不会有这些糟糕的代码。
UID546089在线时间 小时积分24帖子离线17179 天注册时间
新手上路, 积分 24, 距离下一级还需 26 积分
我是走.net路线的...
UID117525在线时间 小时积分12069帖子离线17179 天注册时间
回复 4# gyl0519 [楼主] 的帖子
获取的display属性是&&是正常的，&&就代表默认状态，根据元素的类型不同，就相当于是inline或block。
UID428331在线时间 小时积分1847帖子离线17179 天注册时间
银牌会员, 积分 1847, 距离下一级还需 1153 积分
反对，版主！如果你这样说，怎么不直接学机器语言算了。框架写出来就是给人家用的撒。这样一来可以节省更多时间和精力去学别的知识。
[[i] 本帖最后由 hemin007 于
11:20 编辑 ]
UID537309在线时间 小时积分1752帖子离线17179 天注册时间
银牌会员, 积分 1752, 距离下一级还需 1248 积分
&&jquery确实简化的javascript&&但是你需要知道的是，没有jquery一个初学者写出来的javascript代码不代表就不是垃圾。
无论还是jquery的初学者、javascript的初学者，都会写出来垃圾代码。
当然，jquery会让一些程序员懒得去学习javascript本身，这确实是存在的，枪可以用来捍卫和平，也可以用来镇压百姓，可是你不能说，“枪”就是一种错误。
& &不过看到版主大大专长里面有个 perl 很羡慕的说。。
UID117525在线时间 小时积分12069帖子离线17179 天注册时间
回复 10# hemin007
谁说没有人学习机器语言了？需要机器语言的地方当然是要用机器语言。
你提这个跟本贴的主题有什么关系吗？
UID117525在线时间 小时积分12069帖子离线17179 天注册时间
回复 11# andydesign
我什么时候说过“JQuery本身是一种错误”了？请不要演义和随便扩展别人的话……
我那句话，和你所反对的内容基本上没有关系。明显地，你已经理解我的意思了。
UID117525在线时间 小时积分12069帖子离线17179 天注册时间
没有JQuery以前，不学者根本就没有办法完成某些任务（连勉强对付都不可能），于是相应的任务就会被交到能做的人手中，所以不会在这个环节里产生垃圾代码。
UID428331在线时间 小时积分1847帖子离线17179 天注册时间
银牌会员, 积分 1847, 距离下一级还需 1153 积分
JS最原生不是由机器语言转化而来的么？建议直接写010.这样你会更牛逼的。
归根到底，学JQ的话，可以应付目前的工作和私单。
JQ熟练了某些人大概有3种方向
1.往后台发展，或者其它，如：AS3发展。
2.转学JS（这样就可以再工作中边学边工作了。）
3.继续学JQ，
[[i] 本帖最后由 hemin007 于
11:47 编辑 ]
UID502502在线时间 小时积分2187帖子离线17179 天注册时间
银牌会员, 积分 2187, 距离下一级还需 813 积分
回复 15# hemin007
对头.JQ只是一种工具.喜欢程序的人不会只局限于这个框架的.
UID117525在线时间 小时积分12069帖子离线17179 天注册时间
回复 15# hemin007
(⊙o⊙)…这个比喻。
机器语言和JS之恋么？它们之间好像不是只隔了一两座山……
我又开始说废话了：如果不懂JS，就光弄弄JQ，不可取。
什么叫学会了JQ，再转学JS？没这种概念。
现在好多人一说JQ就好像它是另一种语言似的，而且还是不要钱的福利救济品。JQ也是JS写的，不是天上掉下来的，你学它也得付出成本。而且写JQ的家伙也是人，也会犯错误的（让我带着羡慕嫉妒恨等一切不良的心态举个渺小的例子吧：你看他写的那本书 Pro Javascript Techniques，全书最精彩的第二章当中最精彩的那个闭包的例子居然就写错了。人民邮电出版社在出中文版的时候用的是我给出的修正版），使用它的人自己必须把握主动才行。
我也用JQ，但通常是拆着用，拆成零件，重新组装。
[[i] 本帖最后由 bound0 于
15:51 编辑 ]
UID523008在线时间 小时积分1699帖子离线17179 天注册时间
提示: 作者被禁止或删除。
UID546312在线时间 小时积分130帖子离线17179 天注册时间
初级会员, 积分 130, 距离下一级还需 70 积分
$('#id').css('display');
div默认是block 的，检查是否是hidden
UID516334在线时间 小时积分1150帖子离线17179 天注册时间
银牌会员, 积分 1150, 距离下一级还需 1850 积分
额…… 算了啦，只要肯学肯研究就是好孩子啊，说到底比那些整天打魔兽的好多啊，你看看我们现在的宿舍啊，人都快成魔兽了。
会jQ不会Js的，他们很幸福的生活在这个js框架集云的时代，就让他们继续幸福下去吧。
会js的稍许对jQ学者极度加悔恨~为什么？因为我们曾经的努力，曾经克服js这种“弱智”语言上的种种问题，而现在jQ的出现打破了原来技术分化的平静，那就让我们继续嫉妒下去吧。
毕竟大家都有一个共同目标，学更多的技术，挣更多的钱，孝敬父母，为国争光！
UID486885在线时间 小时积分399帖子离线17179 天注册时间
中级会员, 积分 399, 距离下一级还需 101 积分
呵呵，jquery的核心代码还是有好多优秀的编程思路的，我这么认为。高手宁愿自己写JS框架吧，我们这些一般人在一边用着jquery一边努力研究其中的奥秘，争取编程高手啊~
UID428331在线时间 小时积分1847帖子离线17179 天注册时间
银牌会员, 积分 1847, 距离下一级还需 1153 积分
回复 17# bound0
什么叫学会了JQ，再转学JS？
大部分出社会的人就是想快点找到工作，稳定生活。进入中小公司而学JQ的。转不转学原生JS得看自己是否专职JS这块，是否更深入的去学习它。
更何况，JQ并不难，想要自己写框架也要知己知彼吧？
先学JS，再了解框架，学习框架。
如果我是学生，我就觉得你说的对的。因为有时间啊，不愁钱啊。
如果我是出社会的人，那我觉得你说的是错的。因为我们没有太多时间的苦恼，反思，测试。（你可能会说这些都是借口，可是恰恰就有那么些人）因为我们要生活，要钱，要面对现实。不得走接近。
最后。学JQ也好，学JS也好。我觉得我们说那么多并不能改变他们什么。凡事看事情的变化而变化。如果你真想改变，去教书吧，从小抓起。
UID126619在线时间 小时积分18386帖子离线17179 天注册时间
学了好几次没学会jq的路过，我想是我没耐心，或者是学了点后就忘了，下次再学学。
另外我还是觉得原生的js比较好玩。
UID291548在线时间 小时积分1935帖子离线17179 天注册时间
银牌会员, 积分 1935, 距离下一级还需 1065 积分
回复 3# bound0
这个方法不一定行吧，有时候可能读不出来
UID539020在线时间 小时积分898帖子离线17179 天注册时间
高级会员, 积分 898, 距离下一级还需 102 积分
版主被群攻了
UID117525在线时间 小时积分12069帖子离线17179 天注册时间
回复 24# xiaobaov2
什么时候？
UID507452在线时间 小时积分430帖子离线17179 天注册时间
中级会员, 积分 430, 距离下一级还需 70 积分
我一直认为回复这样的帖子是毫无意义的。我一直认为简单的问题应该自己google，搜索不到那只能说明是自己“搜索”技术不过关(疑难杂症除外)。蓝色理想这类的帖子多如牛毛，而51js也不思进取，真是悲剧。
什么时候应该出一个专业的前端论坛，我想已经有人在准备了。
UID141151在线时间 小时积分8417帖子离线17179 天注册时间
用JQ的人，无论多小的东西都把JQ引进来，而且洋洋得意的说：“看用JQ的话，只要很短一行代码！”
他们才不管庞大的类库下载起来影响用户的体验，他们只知道完成自己表面的任务，仅此而已，他们不喜欢原生Javascript，从心底里压根就不喜欢，用JQ只是一种无奈罢了！
从尊重和热爱一门语言（JS是种脚本）这点出发，我觉得深入了解一下原生态的Javascript，是大有好处的；免得有一天人家问你什么是原型链你都不知道！
UID627094在线时间 小时积分7帖子离线17179 天注册时间
新手上路, 积分 7, 距离下一级还需 43 积分
你们都答非所问了。人家问肯定是想知道到底怎么实现，问的是jquery的问题人家不一定不会你们说的那些其他方式。好吧 我是来找标准答案的。同问。。。。。。。
Powered by还没有任何记录...
jquery validate强大的jquery表单验证插件
来源：jquery特效
作者： 懒人建站
为什么要用jquery validate这个表单验证插件：自己写一个通用没有bug强大的jquery表单验证插件并不容易。jquery validate这个jquery插件几乎可以轻松应对95%以上的表单验证，
jquery validate表单验
jquery validate的官方演示和文档地址：
官方网站：
官方演示：
官方文档：
为什么要用jquery validate这个表单验证插件：
form表单验证是网站建设中前端必须要做的事情，自己写一个通用没有bug强大的jquery表单验证插件并不容易，特别对新手和建站爱好者，有一个通用好用的表单验证插件式必须的。
jquery validate这个几乎可以轻松应对95%以上的表单验证，
jquery validate表单验证如何调用？
一。引用jquery.min.js和jquery.validate.js
因为jquery.validate.js是jquery插件所以必须要有jquery支持，现在没有使用jquery的网站应该很少。如果你坚持不用jquery，很遗憾这个jquery.validate.js不适合你。
二、js调用代码如下：
$(function(){
//$('.js-form') 是你的表单的类名或者 id，如果是id的话就是 $('#js-form')
//submitHandler 就是表单验证通过的时候执行里面的函数
$('.js-form').validate({
submitHandler: function (form) {
var $form = $(form),
data = $form.serialize();
//序列化表单数据
//这里是jquery表单验证通过的时候执行的操作，比如这里，表单验证通过的时候执行了jquery的ajax的post操作
$.post('js/test.json',{data:data},function(d){
if(d.Flag){
alert(&如果返回为真，将执行这里代码&)
},'json');
jquery validate默认验证规则的提示语中文化：
$.extend($.validator.messages, {
required: &必填&,
remote: &请修正该字段&,
email: &电子邮件格式不正确&,
url: &网址格式不正确&,
date: &日期格式不正确&,
dateISO: &请输入合法的日期 (ISO).&,
number: &请输入数字&,
digits: &只能输入整数&,
creditcard: &请输入合法的信用卡号&,
equalTo: &请再次输入相同的值&,
accept: &请输入拥有合法后缀名的字符&,
maxlength: $.validator.format(&请输入一个 长度最多是 {0} 的字符&),
minlength: $.validator.format(&请输入一个 长度最少是 {0} 的字符&),
rangelength: $.validator.format(&请输入 一个长度介于 {0} 和 {1} 之间的字符&),
range: $.validator.format(&请输入一个介于 {0} 和 {1} 之间的值&),
max: $.validator.format(&请输入一个最大为{0} 的值&),
min: $.validator.format(&请输入一个最小为{0} 的值&)
validate默认的验证规则中文解释：
(1)required:true 必输字段
(2)remote:&check.php& 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：， 只验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:&#field& 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串&)(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
自定义validate表单验证规则：
addMethod(name,method,message)方法：
参数name 是添加的方法的名字
参数method是一个函数,接收三个参数(value,element,param) value 是元素的值,element是元素本身 param是参数
以邮箱验证规则为例：
jQuery.validator.addMethod(&mail&, function (value, element) {
var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/;
return this.optional(element) || (mail.test(value));
}, &邮箱格式不对&);
再多的文字说明都不如看演示来的直接，：
jquery validate中文API，仅供参考：(这个中文API有点老了，但是大部分依然适用)
validate(options)
返回:Validator
验证所选的FORM
返回:Boolean
检查是否验证通过
返回:Options
返回元素的验证规则
rules(&add&,rules)
返回:Options
增加验证规则
rules(&remove&,rules)
返回:Options
删除验证规则
removeAttrs(attributes)
返回:Options
删除特殊属性并且返回他们
Custom selectors
返回:Validator
没有值的筛选器
返回:Array &Element &
有值的筛选器
:unchecked
返回:Array &Element &
没选择的元素的筛选器
jQuery.format
(template,argument ,argumentN...)
返回:String
用参数代替中的 {n}
Validator:
validate方法返回一个Validator对象,它有很多方法, 让你能使用引发校验程序或者改变form的内容. validator对象有很多方法,但下面只是列出常用的
返回:Boolean
验证form返回成功还是失败
element(element)
返回:Boolean
验证单个元素是成功还是失败
resetForm()
返回:undefined
把前面验证的FORM恢复到验证前原来的状态
showErrors(errors)
返回:undefined
显示特定的错误信息
Validator functions:
setDefaults(defaults)
返回:undefined
改变默认的设置
addMethod(name,method,message)
返回:undefined
添加一个新的验证方法. 必须包括一个独一无二的名字,一个JAVASCRIPT的方法和一个默认的信息
addClassRules(name,rules)
返回:undefined
增加组合验证类型 在一个类里面用多种验证方法里比较有用
addClassRules(rules)
返回:undefined
增加组合验证类型 在一个类里面用多种验证方法里比较有用,这个是一下子加多个
内置验证方式：
required()
返回:Boolean
必填验证元素
required(dependency-expression)
返回:Boolean
必填元素依赖于表达式的结果
required(dependency-callback)
返回:Boolean
必填元素依赖于回调函数的结果
remote(url)
返回:Boolean
请求远程校验。url通常是一个远程调用方法
minlength(length)
返回:Boolean
设置最小长度
maxlength(length)
返回:Boolean
设置最大长度
rangelength(range)
返回:Boolean
设置一个长度范围[min,max]
min(value)
返回:Boolean
设置最大值
max(value)
返回:Boolean
设置最小值
返回:Boolean
验证电子邮箱格式
range(range)
返回:Boolean
设置值的范围
返回:Boolean
验证URL格式
返回:Boolean
验证日期格式(类似30/30/2008的格式,不验证日期准确性只验证格式)
返回:Boolean
验证ISO类型的日期格式
返回:Boolean
验证德式的日期格式（29.04.1994 or 1.1.2006）
返回:Boolean
验证十进制数字（包括小数的）
返回:Boolean
creditcard()
返回:Boolean
验证信用卡号
accept(extension)
返回:Boolean
验证相同后缀名的字符串
equalTo(other)
返回:Boolean
验证两个输入框的内容是否相同
返回:Boolean
验证美式的电话号码
validate ()的可选项：
debug:进行调试模式（表单不提交）:
$(&.selector&).validate
&& debug:true
把调试设置为默认:
$.validator.setDefaults({
&& debug:true
submitHandler:
通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交
$(&.selector&).validate({
&& submitHandler:function(form) {
$(form).ajaxSubmit();
对某些元素不进行验证
$(&#myform&).validate({
&& ignore:&.ignore&
自定义规则,key:value的形式,key是要验证的元素,value可以是字符串或对象
$(&.selector&).validate({
&& rules:{
&&&& name:&required&,
&&&& email:{
&&&&&& required:true,
&&&&&& email:true
自定义的提示信息key:value的形式key是要验证的元素,值是字符串或函数
$(&.selector&).validate({
&& rules:{
&&&& name:&required&,
&&&& email:{
&&&&&& required:true,
&&&&&& email:true
&& messages:{
&&&& name:&Name不能为空&,
&&&& email:{
&&&&&& required:&E-mail不能为空&,
&&&&&& email:&E-mail地址不正确&
对一组元素的验证,用一个错误提示,用error Placement控制把出错信息放在哪里
$(&#myform&).validate({
& groups:{
&&& username:&fname lname&
& errorPlacement:function(error,element) {
&&&& if (element.attr(&name&) == &fname& || element.attr(&name&) == &lname&)
&&&&&& error.insertAfter(&#lastname&);
&&&&&& error.insertAfter(element);
&& debug:true
Onubmit Boolean 默认:true
是否提交时验证
$(&.selector&).validate({
&& onsubmit:false
onfocusout Boolean 默认:true&
是否在获取焦点时验证
$(&.selector&).validate({
&& onfocusout:false
onkeyup Boolean 默认:true&
是否在敲击键盘时验证
$(&.selector&).validate({
&& onkeyup:false
onclick Boolean 默认:true
是否在鼠标点击时验证（一般验证checkbox,radiobox）
$(&.selector&).validate({
&& onclick:false
focusInvalid Boolean 默认:true
提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点
$(&.selector&).validate({
&& focusInvalid:false
focusCleanup Boolean 默认:false
当未通过验证的元素获得焦点时,并移除错误提示（避免和 focusInvalid.一起使用）
$(&.selector&).validate({
&& focusCleanup:true
errorClass String默认:&error&
指定错误提示的css类名,可以自定义错误提示的样式
$(&.selector&).validate({
&& errorClass:&invalid&
errorElement String 默认:&label&
使用什么标签标记错误
$(&.selector&).validate
&& errorElement:&em&
wrapper String
使用什么标签再把上边的errorELement包起来
$(&.selector&).validate({
&& wrapper:&li&
errorLabelContainer Selector
把错误信息统一放在一个容器里面
$(&#myform&).validate({
&& errorLabelContainer:&#messageBox&,
&& wrapper:&li&,
&& submitHandler:function() { alert(&Submitted!&) }
showErrors:
跟一个函数,可以显示总共有多少个未通过验证的元素
$(&.selector&).validate({
&& showErrors:function(errorMap,errorList) {
&&&&&&& $(&#summary&).html(&Your form contains & + this.numberOfInvalids() + & errors,see details below.&);
&&&&&&& this.defaultShowErrors();
errorPlacement:
跟一个函数,可以自定义错误放到哪里
$(&#myform&).validate({
& rrorPlacement:function(error,element) {& error.appendTo(element.parent(&td&).next(&td&));
&& debug:true
要验证的元素通过验证后的动作,如果跟一个字符串,会当做一个css类,也可跟一个函数
$(&#myform&).validate({
&&&&&&& success:&valid&,
&&&&&&& submitHandler:function() { alert(&Submitted!&) }
highlight:
可以给未通过验证的元素加效果,闪烁等
addMethod(name,method,message)方法：
参数name是添加的方法的名字
参数method是一个函数,接收三个参数(value,element,param) value是元素的值,element是元素本身 param是参数,我们可以用addMethod来添加除built-in Validation methods之外的验证方法 比如有一个字段,只能输一个字母,范围是a-f,写法如下:
$.validator.addMethod(&af&,function(value,element,params){
&& if(value.length&1){
&& if(value&=params[0] && value&=params[1]){
},&必须是一个字母,且a-f&);
用的时候,比如有个表单字段的id=&username&,则在rules中写
username:{
&& af:[&a&,&f&]
addMethod的第一个参数,就是添加的验证方法的名子,这时是af
addMethod的第三个参数,就是自定义的错误提示,这里的提示为:&必须是一个字母,且a-f&
addMethod的第二个参数,是一个函数,这个比较重要,决定了用这个验证方法时的写法
如果只有一个参数,直接写,如果af:&a&,那么a就是这个唯一的参数,如果多个参数,用在[]里,用逗号分开
meta String方式：
$(&#myform&).validate({
&& meta:&validate&,
&& submitHandler:function() { alert(&Submitted!&) }
&script type=&text/javascript& src=&js/jquery.metadata.js&&&/script&
&script type=&text/javascript& src=&js/jquery.validate.js&&&/script&
&form id=&myform&&
& &input type=&text& name=&email& class=&{validate:{ required:true,email:true }}& /&
& &input type=&submit& value=&Submit& /&
本文链接：/js/jquery/jquery_validate/
(责任编辑：懒人建站)
jquery validate强大的jquery表单验证插件由懒人建站收集整理，您可以自由传播，请主动带上本文链接
就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。
jquery validate强大的jquery表单验证插件-相关文章
来自百度的搜索推荐
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
jquery validate非常不错，项目中一直在使用，用于表单验证非常方便，js里定义好规则，在html中写验证规则和提示即可，大爱
这款插件可以做商业用途吗 比如说做个网站 发布 用到这款插件
$(#jsForm).validate({ submitHandler: function() { //验证通过后 的js代码写在这里 } }) 跳转时你自己 在 submitHandler 这个回调函数中写的，你可以直接提交表单或者采用
跳转不了 ，搞毛啊
为什么 无法跳转？
学习一下·
Jquery特效
jquery validate强大的jquery表单验证插件，有了这个验证插件可以通吃所有的表单验证情况了/js/jquery/jquery_validate/
Jquery特效
jquery validate 确实很强大一直在用