(转)jQuery Validation Plugin客户端表单证验插件
jQuery Validation Plugin客户端表单验证插件
官方文档:http://jqueryvalidation.org/documentation/
官方demo:http://jquery.bassistance.de/validate/demo/
下载:http://jquery.bassistance.de/validate/jquery-validation-1.11.1.zip
jQuery Validation Plugin是一款客户端表单校验的插件,功能强大,使用简单。
先看一个简单的demo,例如一个标准的表单
<form class="cmxform" id="commentForm" method="get" action=""><fieldset><legend>Please provide your name, email address (won't be published) and a comment</legend><p><label for="cname">Name (required, at least 2 characters)</label><input id="cname" name="name" minlength="2" type="text" required/></p><p><label for="cemail">E-Mail (required)</label><input id="cemail" type="email" name="email" required/></p><p><label for="curl">URL (optional)</label><input id="curl" type="url" name="url"/></p><p><label for="ccomment">Your comment (required)</label><textarea id="ccomment" name="comment" required></textarea></p><p><input class="submit" type="submit" value="Submit"/></p></fieldset>
</form>
<script>
$("#commentForm").validate();//仅一行js
</script>
上面表单的校验效果是什么呢?
1、当点击submit按钮之后,第一个校验失败的控件会获得焦点;如果按下submit按钮之前,最后一个获取焦点的控件,即不是第一个控件,同时也校验失败,那么此控件将在submit按钮之后获取焦点,而不是第一个控件获取焦点;
2、插件是懒加载的,在没有点击过submit的情况下,用户可以用tab建任意切换输入焦点,而不会获得任何校验失败的提示信息;
3、当一个控件校验失败后,错误信息会提示出来,但是当这个控件的输入合法后,校验信息会马上消失,不需要等待下一次submit;
下面来看看validate( [options ] )方法的参数:
submitHandler (default: native form submit
)
当表单校验通过后回调的方法,有一个form参数。一般情况都是在回调方法中用ajax方式提交表单,如下:
$(".selector").validate({submitHandler: function(form) {$(form).ajaxSubmit();}
});
当然也可以用标准的submit,因为form是一个dom参数,此时的submit()方法,不会再次触发校验
$(".selector").validate({submitHandler: function(form) {// do other things for a valid formform.submit();}
});
invalidHandler参数
当表单校验失败后回调的方法,有2个参数,第一个是event,第二个是validator自身
例如,显示错误信息并提示有多少个错误项
$(".selector").validate({invalidHandler: function(event, validator) {// 'this' refers to the formvar errors = validator.numberOfInvalids();if (errors) {var message = errors == 1? 'You missed 1 field. It has been highlighted': 'You missed ' + errors + ' fields. They have been highlighted';$("div.error span").html(message);$("div.error").show();} else {$("div.error").hide();}}
});
ignore (default: ":hidden"
)参数
设置哪些控件是不需要校验的
例如:过滤所以.ignore的class属性的控件
$("#myform").validate({ignore: ".ignore"
});
rules (default: rules are read from markup (classes, attributes, data)
)参数
描述具体的校验规则,从最上面的例子中可以看出,这个规则默认是从控件的属性中读取的,当然也可以自己设置。
设置方式是key/value键值对,其中key是控件的name,而value就是规则,此规则可以是字符串的值,也可以是某个json对象值
每个规则都可以有一个depends属性来设置依赖规则,例如一些条件必输项(当1选择,则2必输;当1未选择,则2非必输)
例如:
$(".selector").validate({rules: {// simple rule, converted to {required:true}name: "required",// compound ruleemail: {required: true,email: true}}
});
下面的例子,将contract设置成必输和email格式,但email格式的规则,必须依赖#contactform_email:checked
$(".selector").validate({rules: {contact: {required: true,email: {depends: function(element) {return $("#contactform_email:checked")}}}}
});
messages (default: the default message for the method used
)参数
设置错误信息,与规则1对1,每个错误信息可以是字符串,也可以是回调函数
如果是回调函数,则第一个参数是规则,第二个参数是输入控件本身,回调函数必须返回字符串
例如:
$(".selector").validate({rules: {name: {required: true,minlength: 2}},messages: {name: {required: "We need your email address to contact you",minlength: jQuery.format("At least {0} characters required!")}}
});
groups参数
groups参数可以把多个错误信息绑定成一个组,再利用errorPlacement 方法来设置错误信息显示的具体位置
如下列所示,将fname和lname绑定成一个组,组id是username,其中fname和lname是2个控件的name,而username是自定义的组id
绑定后,fname和lname的错误信息就会显示在一个位置上,而且不会同时显示;具体效果描述起来比较麻烦,自己尝试一下就可以明白
$("#myform").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);}}
});
onsubmit (default: true
)
设置是否在submit的时候做校验,如果设置成false,则不作任何校验
$(".selector").validate({onsubmit: false
});
onfocusout参数
设置控件(除checkboxes/radio buttons)在失去焦点的时候,是否进行校验
$(".selector").validate({onfocusout: false
});
也可以设置一个回调函数,自己决定是否进行校验,回调函数有2个参数,event和element
onkeyup参数
设置控件在按键放开时,是否进行校验;同样接受boolean值,可以设置回调函数
onclick参数
设置checkboxes/radio buttons在按下时,是否进行校验;同样接受boolean值,可以设置回调函数
focusInvalid (default: true
)参数
设置在submit后,是否自动把焦点设置到第一个控件或最后一个失去焦点的未校验通过控件
$(".selector").validate({focusInvalid: false
});
focusCleanup (default: false
)参数
设置当控件获取焦点后,是否清除错误信息;注意,要避免与focusInvalid一起使用,不然感觉就像没错误提示一样
$(".selector").validate({focusCleanup: true
});
errorClass (default: "error"
)参数
使用这个class来创建错误信息label
$(".selector").validate({errorClass: "invalid"
});
validClass (default: "valid"
)参数
当控件校验通过时,设置此class
$(".selector").validate({validClass: "success"
});
errorElement (default: "label"
)参数
设置错误信息控件
$(".selector").validate({errorElement: "em"
});
wrapper (default: window
)参数
设置错误信息label的分割,例如错误信息:<label for="firstname" class="error" style="display: inline;">Please enter your firstname</label>
当设置如下分割后:
$(".selector").validate({wrapper: "li"
});
错误信息变成:
<li style=""><label for="firstname" class="error" style="display: inline;">Please enter your firstname</label></li>
errorLabelContainer参数
将错误信息统一起来
$("#myform").validate({errorLabelContainer: "#messageBox ul",wrapper: "li",submitHandler: function() { alert("Submitted!") }
});
如上设置后,错误信息将全部显示在#messageBox ul中,以li分割
errorContainer参数
设置一个额外的错误信息容器,但是这个容器中不会加入错误信息,但是这个容器本身,会随着错误信息的显示而显示,当错误信息全部消失,即校验全部通过时,这个容器也会消失;可以配合errorLabelContainer一起使用
$("#myform").validate({errorContainer: "#messageBox1, #messageBox2",errorLabelContainer: "#messageBox1 ul",wrapper: "li", debug:true,submitHandler: function() { alert("Submitted!") }
});
showErrors参数
这应该是个高级的参数,设置具体显示错误信息的方式,先看例子
$(".selector").validate({showErrors: function(errorMap, errorList) {$("#summary").html("Your form contains "+ this.numberOfInvalids()+ " errors, see details below.");this.defaultShowErrors();}
});
从例子中可以看出,是validator对象本身调用此回调函数,如果不处理具体的错误显示方式,可以调用this.defaultShowErrors()
errorMap参数是一个对象,errorList是一个数组,记录的都是错误信息,从下图中来直观的了解其存储的具体值,是chrome的变量查看
errorPlacement (default: Places the error label after the invalid element
)参数
这个前面遇到过,就是设置错误信息的显示位置,例如在一个table布局的form中,将错误信息显示到下一个td中
$("#myform").validate({errorPlacement: function(error, element) {error.appendTo( element.parent("td").next("td") );}
});
success参数
设置字符串时,表示校验通过的错误信息设置的class属性
$("#myform").validate({success: "valid",submitHandler: function() { alert("Submitted!") }
});
设置成回调函数,有2个参数,第一个label表示错误信息对象,第二个element表示对应的输入控件对象
如下面例子,在校验通过时,给错误信息label设置class并且将信息改成OK!
$("#myform").validate({success: function(label) {label.addClass("valid").text("Ok!")},submitHandler: function() { alert("Submitted!") }
});
highlight (default: Adds errorClass (see the option) to the element
)参数
设置如何高亮显示校验失败的控件,回调函数有3个参数,element表示当前控件,errorClass和validClass就不用解释了
例如,将校验失败的控件消退再显示:
$(".selector").validate({highlight: function(element, errorClass) {$(element).fadeOut(function() {$(element).fadeIn();});}
});
或者设置errorClass,其实默认就是这么操作
$(".selector").validate({highlight: function(element, errorClass, validClass) {$(element).addClass(errorClass).removeClass(validClass);$(element.form).find("label[for=" + element.id + "]").addClass(errorClass);},unhighlight: function(element, errorClass, validClass) {$(element).removeClass(errorClass).addClass(validClass);$(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);}
});
unhighlight (default: Removes the errorClass
)参数
同上的设置方式,只是在控件校验通过时,取消高亮
ignoreTitle (default: false
)参数
是否取消从title属性中读取值,好像在Google Toolbar中会有一些问题,需要设置成true;默认是false,这个笔者也没具体研究过,有研究清楚的欢迎留言。
到此,插件的构造方法和参数就全部翻译完了,但是还有很多没有翻译,待下一篇博文吧!
转载于:https://www.cnblogs.com/wanshutao/p/3655896.html
(转)jQuery Validation Plugin客户端表单证验插件相关推荐
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
- 客户端验证:JQuery Validation Plugin
jQuery Validate验证框架详解 jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导 ...
- JQuery 表单验证--jquery validation
jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 1 &l ...
- 12个方便易用的jquery表单验证插件
绝大部分网站都是开放注册的,而注册就需要使用表单验证,因为网站都需要对注册用户的信息安全性和合理性做出判断,表单的注册都应该具备完善的验证方式,比如注册使用的手机号是否是真实的?用户填写的验证码是否正 ...
- jquery validation纪要,我们的好伴侣
首先明确一点,jquery validation框架是为form标签使用的,其它不在form标签里的使用无效.被他吸引是因为框架可以做到自动做参数验证,而且有提示,提示还是动态的,省去了我们在页面里加 ...
- (转)强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...
- 强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...
- JavaScript/jQuery 表单美化插件小结
Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://w ...
- jQuery iCheck Plugin 下处理单选按钮值切换
先来看段html代码,如下: <li style="width:560px;"><i class="imc"></i>< ...
最新文章
- 二分图 ---- 树的二分图性质 2020icpc 济南 J Tree Constructer(构造)
- ENAS加载自己的数据集之路
- 36氪研究院:机器人行业产业图谱
- java Object解析
- java logging api_Java Logging API - Tutorial
- .NET下如何拦截鼠标、键盘消息?Win32NET来帮你
- java.lang.reflect.InvocationTargetException 的惨痛教训
- rvm 安装后的补充工作:source $HOME/.profile
- 2018年香港访港旅客超6500万人次 创16年新高
- QQ客服代码(支持临时会话设置)
- c语言温度转换作业帮,C++摄氏度和华氏度互相转化
- 待支付模板html,待支付.html
- 小程序UnionID是什么?以及UnionID获取途径
- 不允许对不可访问的基类 类型强制转换 c++
- 修改Avaya IP-Office电话交换机出厂自带的提示语音内容
- MarkdownNote
- Excel批量合并相同内容单元格操作——WPS太秀了
- 智能路由器市场份额增长态势不减 线下渠道或将成为下一个爆发点
- iMatrix平台核心功能—Portal 介绍
- 什么是持续集成的自动化测试