jquery.validate.js 详解
jquery下载地址:https://jquery.com/download/
jquery.validate.js下载地址:https://cdnjs.com/libraries/jquery-validate
jquery.validate.js是我们经常用到的form表单验证插件,可以很方便的帮我们进行表单验证。这里来学习一下他的用法,觉得不够详细的同学,可以去官网继续学习。
1.jquery.validate.js依赖于jquery,在页面引入jquery.validate.js前一定要先引入jquery。
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
2.使用jquery.validate.js进行验证,需要先对form表单进行规则添加,添加的方法为 .validate( [options ] ) ,可以调用.valid() 来获取验证结果。
1.validate( [options ] ) 制定规则
1.1options
options | 类型 | 默认值 | 参数 | 解释 |
debug |
boolean |
false
|
启用调试模式。如果为true,则不提交表单,并在控制台上显示某些错误(检查Windows是否存在控制台属性)。如果要启用调式模式,需要在提交表单时将该属性置为false,而不是在验证完以后。 |
|
submitHandler | function() | native form submit |
event:提交事件 form:当前被验证的form,作为一个元素返回。 |
用于在表单有效时处理实际提交的回调。设置该属性后,验证通过后将不会默认提交请求,而是执行该属性定义的方法。这里可以做一些请求预处理或者请求回调。 |
invalidHandler | function() |
event:自定义事件对象 validator:当前表单的验证结果 |
提交无效表单时的自定义代码回调。 |
|
ignore | Selector | hidden | 验证时要忽略的元素 | |
rules | object | 从标记(类、属性、数据)读取规则 | 定义自定义规则的键/值对。键是元素的名称(或一组复选框/单选按钮),值是由规则/参数对或纯字符串组成的对象。可以与类/属性/数据规则组合。每个规则都可以指定为具有依赖属性,以便仅在特定条件下应用该规则。 | |
messages | object | 定义自定义消息的键/值对。键是一个元素的名称,值是要为该元素显示的消息。可以使用另一个映射,其中包含每个规则的特定消息,而不是普通消息。重写元素的title属性或方法的默认消息(按该顺序)。每个消息可以是字符串或回调。回调在验证器的作用域中调用。 | ||
groups | object | 指定错误消息的分组。一个组由一个任意的组名作为键和一个以空格分隔的元素名列表作为值组成。使用errorPlacement控制组消息的放置位置。 | ||
normalizer | function() | 准备/转换要验证的元素值,这个方法只会将元素的值在验证前进行转换,并不会转换元素的初始值。eg:一个元素的值为a,该方法会将其转换为b进行验证,但最终请求时传的参数值仍然是a。该属性也可以作用在单个元素上,作用域取决于他的位置。 | ||
onsubmit | boolean | true |
event element |
是否在提交前验证,默认为true。如果改为false,那么可以去除提交前的验证,想什么时候验证什么时候验证。 |
onfocusout | boolean/function() |
event element |
失去焦点验证。可以将该值设置为false或者一个function。true无效。 | |
onkeyup | boolean/function() |
event element |
是否在敲击键盘时验证。可以将该值设置为false或者一个function。true无效。 | |
onclick | boolean/function() |
event element |
是否在点击时验证。可以将该值设置为false或者一个function。true无效。 | |
focusInvalid | boolean | true | 当该值为true时,提交表单后,如果有一个元素拥有焦点,那么焦点仍然处于该元素;否则,第一个未通过验证的元素将获得焦点。 | |
focusCleanup | boolean | false | 当一个错误的元素获取到焦点时,移除他的错误属性,避免与focusInvalid组合使用。 | |
errorClass | String | error | 使用此类创建错误标签,查找现有错误标签并将其添加到无效元素中。 | |
validClass | String | valid | 为验证成功的元素添加属性 | |
errorElement | String | label | 指定创建错误信息的元素,默认时label。label的好处在于清晰的展示错误信息和错误元素的关系。 | |
wrapper | String | window | 用指定的元素包装错误标签。与errorLabelContainer结合使用可创建错误消息列表 | |
errorLabelContainer | Selector | 指定展示wrapper过的错误信息的元素。 | ||
errorContainer | Selector | 指定需要展示的errorLabelContainer。 | ||
showErrors | function() |
errorMap errorList |
自定义消息显示处理程序。参数只包含当前已验证的那些元素,在对focusout或keyup进行验证时,这些元素可以是单个元素。通过调用this.defaultShowErrors()来触发(除了您自己的消息之外)默认行为。 | |
errorPlacement | function() | 默认追加在验证的元素后面 |
error:错误的label element:验证的元素 |
自定义错误信息的添加位置 |
success | String/function() | 为成功的元素添加class,或者指定成功的label | ||
highlight | function() | 将errorClass添加到错误的元素上 |
element errorClass validClass |
为错误的元素添加errorClass |
unhighlight | function() | 将错误的元素上的errorClass移除 | 将错误的元素上的errorClass移除 | |
ignoreTitle | boolean | false | 设置为跳过从title属性读取消息,有助于避免Google工具栏出现问题;默认值为false表示兼容性,title中的消息很可能在将来的版本中被完全删除。 |
1.2 rules 默认可用的规则(additional-methods.js 提供了更多的方法)
options | 类型 | 注释 |
required | boolean | 是否必填 |
boolean | 是否输入正确的email格式 | |
url | boolean | 是否输入正确的url格式 |
date | boolean | 是否输入正确的日期格式 |
dateISO | boolean | 是否输入正确的ISO日期格式 |
number | boolean | 是否输入正确的数字 |
digits | boolean | 是否输入正确的自然数(0,1,2,3,4....) |
equalTo | selector | 是否和selector的值相同 |
accept | String | 是否输入合法后缀名的字符串 |
maxlength | number | 最大长度 |
minlength | number | 最小长度 |
rangelength | [0,5] | 长度在[0,5]内 |
max | number | 最大值 |
min | number | 最小值 |
range | [0,5] | 大小在[0,5]内 |
remote | object return:boolean | 异步检查输入的值是否符合要求 |
step | number | 是否输入给定的数字step |
1.3 使用示例:
1.debug
$("#myform").validate({debug: true
});
2.submitHandler
改为ajax提交:
$("#myform").validate({submitHandler: function(form) {$(form).ajaxSubmit();}
});默认提交预处理:
$("#myform").validate({submitHandler: function(form) {//在这里添加请求预处理form.submit();}
});
3.invalidHandler
$("#myform").validate({invalidHandler: function(event, validator) {// 'this' 代表当前的formvar errors = validator.numberOfInvalids();if (errors) {$("div.error span").html("失效字段有"+errors +"个");$("div.error").show();} else {$("div.error").hide();}}
});
4.ignore
忽略所有被class ‘ignore修修饰的元素$("#myform").validate({ignore: ".ignore"
});
5.rules
1.简单的规则:
$("#myform").validate({rules: {// 这里可以使用字符串"required",也可以使用{required:true}name: "required",// 组合规则。email: {required: true,//符合email规则email: true}}
});2.依赖规则
$("#myform").validate({rules: {contact: {required: true,//是否是email地址决定于元素contactform_email是否被选择email: {depends: function(element) {return $("#contactform_email").is(":checked");}}}}
});3.当元素bonus-material被选择时,那么元素pay_what_you_want的值最小为15
$("#myform").validate({rules: {pay_what_you_want: {required: truemin: {param: 15,depends: function(element) {return $("#bonus-material").is(":checked");}}}}
});
6.messages
1.简单的message
$("#myform").validate({rules: {name: "required",email: {required: true,email: true}},messages: {//name没有填时展示的信息name: "Please specify your name",email: {//email没有填时展示的信息required: "We need your email address to contact you",//email违规时展示的信息email: "Your email address must be in the format of name@domain.com"}}
});2.带参的message
$("#myform").validate({rules: {name: {required: true,minlength: 2}},messages: {name: {required: "We need your email address to contact you",//name长度不够时展示的消息,这里的{0}代表rules中的minlength的值minlength: jQuery.validator.format("At least {0} characters required!")}}
});
7.groups
对表单使用表布局,在输入后的下一个单元格中放置错误消息。
$("#myform").validate({groups: {//创建一个组名为username的组,该组可以控制元素名为fname,lname的元素username: "fname lname"},errorPlacement: function(error, element) {//一旦元素名称为fname或者lname,那么将错误信息添加到元素id为lastname的元素后面if (element.attr("name") == "fname" || element.attr("name") == "lname" ) {error.insertAfter("#lastname");} else {//否则添加到错误元素后面error.insertAfter(element);}}
});
8.normalizer
1.将值进行trim处理<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and use a normalizer to trim its value before validating</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css"></head>
<body>
<form id="myform">
<label for="field">Required: </label>
<input class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({debug: true,success: "valid"
});
$( "#myform" ).validate( {submitHandler :function(form){var d = {};alert(JSON.stringify($(form).serializeArray()));},rules: {field: {required: true,normalizer: function( value ) {// Trim the value of the `field` element before// validating. this trims only the value passed// to the attached validators, not the value of// the element itself.return $.trim( value );}}}
} );
</script>
</body>
</html>2.
9.errorClass
使用invalid作为错误的class
$("#myform").validate({errorClass: "invalid"
});
10.validClass
为所有通过验证的元素添加success属性
$("#myform").validate({validClass: "success"
});
11.wrapper,errorLabelContainer
将错误的信息用li封装成一个无序的列表,并展示在id为messageBox的元素中。
$("#myform").validate({errorLabelContainer: "#messageBox",wrapper: "li",submitHandler: function() { alert("Submitted!") }
});
12.errorContainer
将错误的信息用li封装成一个无序的列表,并展示在id为messageBox的元素中。
展示messageBox1和messageBox2的错误内容
$("#myform").validate({errorContainer: "#messageBox1, #messageBox2",errorLabelContainer: "#messageBox1 ul",wrapper: "li", debug:true,submitHandler: function() { alert("Submitted!") }
});
13.showErrors
$("#myform").validate({showErrors: function(errorMap, errorList) {$("#summary").html("Your form contains "+ this.numberOfInvalids()+ " errors, see details below.");this.defaultShowErrors();}
});
14.errorPlacement
$("#myform").validate({errorPlacement: function(error, element) {//将封装错误信息的label追加到元素父节点中的第一个td后面的td中error.appendTo( element.parent("td").next("td") );}
});
15.success
1.将验证通过的元素的class添加valid
$("#myform").validate({success: "valid",submitHandler: function() { alert("Submitted!") }
});2.创建一个class为valid的label,并且将内容设置位"ok!"
$("#myform").validate({success: function(label) {label.addClass("valid").text("Ok!")},submitHandler: function() { alert("Submitted!") }
});
16.highlight,unhighlight
1.将错误的元素添加闪烁效果
$("#myform").validate({highlight: function(element, errorClass) {$(element).fadeOut(function() {$(element).fadeIn();});}
});2.当验证错误时将错误的元素添加errorClass,移除validClass,并将form下该元素ID的label添加errorClass;当验证成功时,将元素移除errorClass,添加validClass,并将form下该元素ID的label移除errorClass。$("#myform").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);}
});
17.ignoreTitle
配置插件以在查找消息时忽略已验证元素的标题属性。
$("#myform").validate({ignoreTitle: true
});
18.remote
1.从地址check-email.php来检查是否通过
$( "#myform" ).validate({rules: {email: {required: true,email: true,remote: "check-email.php"}}
});2.通过post方法从check-email.php检查是否通过,参数为data
$( "#myform" ).validate({rules: {email: {required: true,email: true,remote: {url: "check-email.php",type: "post",data: {username: function() {return $( "#username" ).val();}}}}}
});
2.valid() 验证规则
$("#myForm").valid()。返回boolean,表示验证是否通过。
3.rules() 对一个元素查看,添加,移除规则。
1.查看规则
console.log($("#field").rules().toString());控制台:{"required":true}
2.添加规则
$( "#myinput" ).rules( "add", {minlength: 2
});$( "#myinput" ).rules( "add", {required: true,minlength: 2,messages: {required: "Required input",minlength: jQuery.validator.format("Please, at least {0} characters are necessary")}
});
3.移除规则
$( "#myinput" ).rules( "remove" );$( "#myinput" ).rules( "remove", "min max" );
4.Validator
validate方法返回一个Validator对象,这个对象提供了一些方法供我们使用,学会这些方法可以更灵活的使用这个插件。
4.1 私有方法
方法 | 参数 | 返回值 | 描述 |
Validator.form() |
boolean | 验证表单元素并返回true/false。 | |
Validator.element(element ) |
element | boolean | 验证某个元素是否符合规则 |
Validator.resetForm() |
重置表单 | ||
Validator.showErrors(errors ) |
object:包含键值对的json。键代表元素名称,值代表自定义的信息。 |
展示自定义的错误信息 | |
Validator.numberOfInvalids() | number | 返回未通过验证的元素个数 | |
Validator.destroy() | 销毁这个Validator实例,释放资源,并且移除已注册的事件。 |
用法:
添加并展示自定义的错误信息。
var validator = $( "#myshowErrors" ).validate();
validator.showErrors({"firstname": "I know that your firstname is Pete, Pete!"
});展示未通过的fields
var validator = $( "#myform" ).validate({invalidHandler: function() {$( "#summary" ).text( validator.numberOfInvalids() + " field(s) are invalid" );}
});
4.2 静态方法
方法 |
参数 |
返回值 |
描述 |
jQuery.validator.addMethod( name,function(value, element, params), message ) |
name 方法名 function 方法 value 待验证的值 element 待验证的元素 params 方法的参数 message 展示的错误信息 |
添加一个自定义的方法 |
|
jQuery.validator.format(template,param...) |
template 模板 param...参数 |
创建一个模板,并将参数依次替换进模板中的{0},{1}...位置 |
|
jQuery.validator.setDefaults(options) |
options: validate方法的options |
修改默认设置 |
|
jQuery.validator.addClassRules(name, rules) |
name 添加的class名称 rules 触发的规则 |
设置一种class,将参数中的rules绑定到这个class上。将这个class修饰在某个元素上时,同时会为该元素设置对应的规则。 |
用法:
1.jQuery.validator.addMethod( name,function(value, element, params), message )
1.添加一个domain方法,用来验证元素的值是否以http://mycorporatedomain.com开头,未通过验证的响应信息为Please specify the correct domain for your documents
jQuery.validator.addMethod("domain", function(value, element) {return this.optional(element) || /^http:\/\/mycorporatedomain.com/.test(value);
}, "Please specify the correct domain for your documents");2.添加一个math方法,该方法接受两个参数,用来检查给定的值是否等于两个参数的和,未通过验证的响应信息为jQuery.validator.format("Please enter the correct value for {0} + {1}")
jQuery.validator.addMethod("math", function(value, element, params) {return this.optional(element) || value == params[0] + params[1];
}, jQuery.validator.format("Please enter the correct value for {0} + {1}"));3.添加一个laxEmail方法,用来验证是否符合emal规则,未通过验证的响应信息为Please enter a valid email address.
jQuery.validator.addMethod("laxEmail", function(value, element) {// allow any non-whitespace characters as the host partreturn this.optional( element ) || /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@(?:\S{1,63})$/.test( value );
}, 'Please enter a valid email address.');
2.jQuery.validator.format(template,param...)
var template = jQuery.validator.format("{0} is not a valid value");
// later, results in 'abc is not a valid value'
alert(template("abc"));
3.jQuery.validator.addClassRules(name, rules)
1.设置一个绑定了规则{required: true, minlength: 2}的class,定义为name。
jQuery.validator.addClassRules("name", {required: true,minlength: 2
});2.定义两个class
jQuery.validator.addClassRules({name: {required: true,minlength: 2},zip: {required: true,digits: true,minlength: 5,maxlength: 5}
});
jquery.validate.js 详解相关推荐
- jquery.lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点: 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
- html鼠标滚轮监听,jQuery - 鼠标滚轮插件jquery.mousewheel.js详解(上下、左右滚动监听)...
1,插件介绍 jquery.mousewheel.js是一个用于添加跨浏览器的鼠标滚轮支持的 jQuery插件. 2,使用说明 (1)使用该插件,只需将 mousewheel事件绑定到一个元素上即可. ...
- jQuery数组处理详解(含实例演示)
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档 中对数组的 ...
- jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
原文:http://www.codeceo.com/article/jquery-plugin-develop.html 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我 ...
- jquery方法属性详解
jquery方法属性详解! 1.jquery简介 jquery是什么,作用是什么? jquery用来简化js操作DOM元素 jquery不能用DOM的方法,DOM不能用jquery的方法 各种选择器的 ...
- jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- jQuery.validate.js API
为什么80%的码农都做不了架构师?>>> jQuery.validate.js API 转载于:https://my.oschina.net/azheng/blog/10281
- [zz]jQuery.extend 函数详解
JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.Jquery的扩 ...
- jQuery表单校验jquery.validate.js的使用
jQuery是一个快速.简洁的js库,为网站的快速开发简化了HTML文档遍历,事件处理,动画,以及Ajax交互.使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅 ...
最新文章
- 翻译介绍15个经典的MDX查询-02and03
- WinDbg !locks 不可用的问题
- 【Netty】使用 Netty 开发 HTTP 服务器
- 倾斜模型精细化处理_广州智迅诚单体化实景三维模型为智慧城市提供了平台数据基础...
- php 如何实现全选,如何用thinkphp框架实现全选,反选,全不选功能?
- POJ 2676 Sudoku【DancingLinks,数独】
- BZOJ 4310 二分+SA+RMQ
- 当你没有能力的时候,所有的友善都是廉价的
- Java基础:如何读取控制台输入?如何读取字符?
- iOS底层探索之多线程(十五)—@synchronized源码分析
- 笔记本计算机外壳的制作过程,笔记本电脑外壳选材不可小视
- word生成html目录树,word将自定义目录做成模板
- 怎样通过其他下载工具下载某盘文件
- ps调整图片大小,像素大小
- 最常见的卸载Mac应用软件方法,彻底清除,果断收藏!
- 《OSPF和IS-IS详解》一1.2 ARPANET
- 吾爱破解160个crackme之008 009 0010 0011
- linux ata4 serror,linux系统救援模式解决开机引导失败问题
- c语言三元组求矩阵加法,矩阵相加的算法(存储结构为三元组表)
- php javascript分页,纯javascript实现分页(两种方法)
热门文章
- 什么是内存溢出(Out Of Memory---OOM)和内存泄露 (Memory Leak)
- JavaScript每日一练经典小案例(一)
- 一个完整利用InternetOpen等系列函数进行下载的测试例子
- 教女朋友学会用win10+yolov3+python训练自己的模型
- wcf部署,通过IIS寄宿服务(net.tcp),免svc文件。
- 腾创秒会达Webrtc视频语音系统,支持BS,CS架构操作灵活简单,免费测试满意再谈购买
- Javta GUI 按键移动熊熊
- FBEC2020 | 智线科技合伙人高丽贞:2020全球游戏市场买量洞察
- 牛客21477 御坂美琴
- 爆料!极度未知游戏耳机有什么竞争力产品?