Jquery Validata表单验证和Jquery Form异步表单的结合使用(Jquery Validata和Form)
概述
作为一名web开发,页面的表单处理是常见的,尤其是表单的验证和异步提交表单往往携手并进,对于表单数据有效性验证确实是棘手的问题,每次异步提交前都是 if ( !$('#name‘).val() ) { alert('请输入姓名'); }等等一大堆这种最low的写法,并且异步提交还在使用Jquery原始的$.ajax()方式,虽然不过时可是有更好的代替者。今天告诉大家Jquery的两款插件Jquery Validata和Jquery Form。有了它俩便可以安心的用面向对象的思想解决“表单验证同时异步提交”的问题了。
一、介绍
Jquery Validata官网(英文):https://jqueryvalidation.org/
中文教程推荐:“菜鸟教程”:https://www.runoob.com/jquery/jquery-plugin-validate.html
Jquery Form官网(英文):https://plugins.jquery.com/form/
两款插件可以去官网自行下载。
最后一节将两个插件结合起来使用。
二、表单验证Jquery Validata
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。
你可以将该本地化信息文件 dist/localization/messages_zh.js 引入到页面:
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
验证规则
属性 | 默认值 | 类型 | 说明 |
---|---|---|---|
required | false | boolean | 是否必填 |
remote | - | string | 使用 ajax 方法调用 check.php 验证输入值。 |
- | boolean | 电子邮箱格式校验。 | |
url | - | boolean | 网址格式校验。 |
date | - | boolean | 日期格式校验 ie6 出错,慎用。 |
dateISO | - | boolean | 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。 |
number | - | boolean | 校验数字(负数,小数)。 |
digits | - | boolean | 校验整数。 |
creditcard | - | boolean | 校验信用卡号。 |
equalTo | - | string | 如:"#password"。输入值必须和 #password 相同,通常用于密码验证。 |
accept | - | string | 输入拥有合法后缀名的字符串(常用来校验上传的文件格式)。 |
min | - | number | 如:10,输入值不能小于 10。 |
minlength | - | number | 如:10,输入长度最小是 10 的字符串(汉字算一个字符)。 |
max | - | number | 如:5,输入值不能大于 5。 |
maxlength | - | number | 如:5,输入长度最多是 5 的字符串(汉字算一个字符)。 |
range | - | array | 如:[5,10],输入值必须介于 5 和 10 之间。 |
rangelength | - | array | 如:[5,10],输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。 |
还有大量的API建议去官网或者菜鸟教程的地址先去学习,由于菜鸟教程上已经很详细了,此处省略(其实是偷懒了)。
三、异步提交表单Jquery Form
插件优点
- 简简单单几句代码,我们就可以实现表单的提交,并且可灵活通过ajaxSubmit()函数基于任何事件的触发实现表单异步提交。
- 支持文件上传功能,并在新浏览器中支持进度条更新。
- 与jQuery库完美结合,支持jQuery.ajax()函数触发的各种事件,支持jQuery.ajax()中所传递的参数。
使用方法
插件提供ajaxSubmit()和ajaxForm()两种表单提交的方式,注意:不要对同一个表单同时使用两种方式。
$("form").ajaxSubmit(options) 是表单的提交动作
ajaxSubmit是jQuery表单插件核心函数。非常灵活,因为它依赖于事件机制,只要有事件触发就能使用ajaxSubmit()提交表单,eg:超链接、图片、按钮的click事件。
$("form").ajaxSubmit(options) 内部直接或模拟jQuery.ajax(options)异步提交,所以也直接支持jQuery.ajax(options)所能处理的参数,并且支持jQuery.ajax(options)过程中所触发的5个局部事件及6个全局事件。
options相关参数:ajaxSubmit和ajaxForm都适用
键名 | 描述 |
type | (默认为表单的method属性值,若未设置取GET)请求的类型,例如:POST、GET、PUT及PROPFIND。大小写不敏感。 |
url | (默认取表单的action属性值,若未设置默认取window.location.href)请求的URL地址,可以为绝对地址也可以为相对地址。 |
data | (对象成员必须包含name和value属性)提供额外数据对象,通过$.param()函数返回序列化后的字符串,稍后会拼接到表单元素序列化的字符串之后。 |
error | 如果提交错误的回调函数 |
dataType | 期望服务器返回对象的类型:‘xml’, 'json', 'script'。 |
seccess | 表单成功提交后调用的回调函数,函数签名:function (data, statusText, xhr, jquery-wrapped), 第一个参数是服务器返回的结果,第二个参数是异步提交是否成功(success/error) |
delegation | (适用于ajaxForm)ajaxForm支持Jquery插件的委托方式(需要Jqueryv1.7+),所以当你调用ajaxForm的时候其表单form不一定存在,但动态构建的form会在适当的时候调用ajaxSubmit。 |
replaceTarget | (默认:false)与target参数共同起作用,True则执行replaceWirh()函数,false则执行html()函数 |
target | 提供一个Html元素,在请求“成功”并且未设置dataType参数,则将返回的数据replaceWith()或html()掉对象原来的内容,再遍历对象调用success回调函数。 |
includeHidden | 在请求成功后,若设置执行clearForm()函数清空表单元素则会根据includeHidden设置决定如何清空隐藏域元素。
|
clearForm | 请求成功时触发(同success),并用options. includeHidden做为回调函数参数。 回调函数:$form.clearForm(options.includeHidden); |
resetForm | 请求成功时触发(同success)。 回调函数:$form.resetForm() |
semantic | 布尔值,指示表单元素序列化时是否严格按照表单元素定义顺序。 在序列化只有<input type="image" />元素会放在序列化字符串的最后,若semantic=true,则会按照它的定义顺序进行序列化。 若你服务器严格要求表单序列化字符串的顺序,则使用此参数进行控制。 |
iframe | (默认:false)若有文件上传'input[type=file]:enabled[value!=""]',指示是否应该使用<iframe>标签(在支持html5文件上传新特性的浏览器中不会使用iframe模式) |
iframeTarget | 指定一个现有的<iframe>元素,否则将自动生成一个<iframe>元素以及name属性值。若现有的<iframe>元素没有设置name属性,则会自动生成一个name值 |
iframeSrc | 为<iframe>元素设定src属性值 |
提交前回调函数 | |
beforeSerialize |
提供在将表单元素序列化为字符串之前,处理表单元素的回调函数。签名:function(form,options)函数说明:当前表单对象、options参数集合返回值:返回false,表示终止表单提交操作。 |
beforeSubmit | 提供在执行表单提交之前,处理数据的回调函数。 签名:function(arr, $ form, options) 函数说明:通过formToArray(options.semantic, elements)返回的表单元素数组、当前表单对象、options参数集合 返回值:返回false,表示终止表单提交操作。 |
$("form").ajaxSubmit(options) 内部将内部直接调用jQuery.ajax(options)返回的jqxhr对象或模拟的jqxhr对象进行了缓存,所以我们可以通过$(“#form”).data(‘jqxhr’)获取到本次提交生成的jqxhr对象。
ajaxSubmit函数处理流程:
- 根据<form action="" method="">处理url、type参数以及success、iframeSrc等参数。
- 触发beforeSerialize()回调函数
- 序列化data参数和表单元素
- 触发beforeSubmit()回调函数
- 根据type参数处理options.data和options.url参数
- 注册resetForm()和clearForm()回调函数
- 注册将返回数据加载到options.target指定的元素上的回调函数
- 注册success回调函数,若有options.target则循环该元素,并为每个子元素注册success回调函数
- 处理<input type="file" />文件上传元素
- 不包含文件元素,直接调用jQuery.ajax()函数。
- 包含文件元素,并且不支持XMLHttpRequest Level 2提供的文件上传新特性window.FormData。则通过IFrame模拟表单异步提交。
- 调用fileUploadIframe()函数。
- 根据options. iframeTarget设置决定是创建一个<iframe>元素还是使用现有的<iframe>元素
- 模拟xhr对象以及jQuery.ajax()过程,以支持xhr对象返回和ajax事件触发
- 设置<form>的target指向<iframe>元素、encoding和enctype为"multipart/form-data"、method为"post"值等
- 处理options.extraData为<input type="hidden" />元素并添加到<form>元素中。
- 调用<form>的submit()事件。(同步提交,但因为<form>的target指向<iframe>标签,所以刷新的是<iframe>中的内容,以此模拟异步提交)
- 包含文件元素,并且支持XMLHttpRequest Level 2提供的新特性,则调用fileUploadXhr()函数,通过FormData()对象将数据传递给options.data参数,再调用jQuery.ajax(options)函数异步提交表单。并且XMLHttpRequest Level 2的新特性还支持进度条提示功能。
- 将内部jqxhr缓存起来,以供访问。$form.removeData('jqxhr').data('jqxhr', jqxhr);
- 返回表单元素本身,以便符合jQuery的链式操作模式。
$("form").ajaxForm(options) 是对原始表单进行接管
是对$(“any”).ajaxSubmit(options)函数的一个封装,适用于表单提交的方式(注意,主体对象是<form>),会帮你管理表单的submit和提交元素([type=submit],[type=image])的click事件。在出发表单的submit事件时:阻止submit()事件的默认行为(同步提交的行为)并且内部调用$(this).ajaxSubmit(options)函数。
ajaxForm支持Jquery插件的委托方式(需要Jquery v1.7+),所以当你调用ajaxForm的时候其表单form不一定存在,ajaxSubmit将在适当的时候调用。
另外:如果你翻看原来码你可能会发现这样的绑定代码:.bind('submit.form-plugin', options, doAjaxSubmit),即submit事件名后面有个”. form-plugin”。这是jQuery事件命名空间语法,作用是方便事件的管理。
文件上传示例
<form id="form1" action="ajaxOperation.ashx?Action=formUpload" method="post" enctype="multipart/form-data">
<div>附件名字: <input type="text" name="fileName"></div>
<div>附件: <input type="file" name="document"></div>
<div><input type="submit" value="模拟iframe提交表单" /></div>
</form>
<script>
$("#form1").ajaxForm({
success : function () {
alert("成功");
}
});
</script>
其他静态方法
$("form1").ajaxFormUnbind()
取消$("").ajaxForm(options)函数对指定表单绑定的submit和click事件。
$("form1").formToArray(semantic,elements)
序列化当前表单元素到一个数组中,每个数组元素都是包含name和value属性的对象。返回值是内部构件的一个数组元素,而elements参数将包含除<input type=”image”>以外的所有表单元素。
$("form1").formSerialize(semantic)
将表当前单元素序列化为字符串形式。
$("form1").fieldSerialize(successful)
序列化包含name属性的表单元素为一个字符串。Successful参数标识是否获取type为reset、button、checkbox、radio、submit、image值得元素以及<select>的值。返回$(el).val()。
$("form1").fieldValue(successful) 或 $.fieldValue(element, successful)
获取指定表单中的表单元素或指定表单元素的值。Successful参数标识是否获取type为reset、button、checkbox、radio、submit、image值得元素以及<select>的值。返回$(el).val()。
$("form1").clearForm(includeHidden)
清空当前表单中input、select、textarea元素的值。includeHidden设置决定如何清空隐藏域元素。
- a) 传递true,表示清空表单的所有隐藏域元素。
- b) 传递字符串,表示清空特殊匹配的隐藏域表单元素,eg: $('#myForm').clearForm('.special:hidden'),清空class属性包含special值的隐藏域
$.("form1").clearFields(includeHidden) 和 $.("form1").clearInputs(includeHidden)
作用相同,清空当前表单中所有表单元素的指。includeHidden设置决定如何清空隐藏域元素。
- a)传递true,表示清空表单的所有隐藏域元素。
- b)传递字符串,表示清空特殊匹配的隐藏域表单元素,eg: $('#myForm').clearForm('.special:hidden'),清空class属性包含special值的隐藏域
$("form1").resetForm()
重置当前表单元素,导致所有表单元素重置到它的初始值,如果初始有值,则会为初始化的值,如果没有初始值,效果同cleanForm()。
$("form1").selected(select)
将当前表单元素中所有checkbox、radio设置为select。select参数为布尔值。
四、两款插件结合使用(重点)
需求:页面有三个控件分别为id, name, age点击提交,请求后台“data”接口,并将三个值再返回前台,异步成功后在控制台打印name的值。
在实际开发中验证和异步是需要同时进行的,这里介绍两种方法将两款插件结合使用
4.1 (推荐)在验证通过的处理器中执行异步提交动作
$("#myForm").validate({
// 提交处理器 -> 验证通过时处理器(默认是执行form.submit()方法)
submitHandler : function(form){
$(form).ajaxSubmit({
success:function (data) {
console.log(data.name);
}
});
}
});
注意!
- 异步提交的选择器使用submitHandler方法中的参数“form”:$(form)作为异步方法的选择器。
- 一定要使用ajaxSubmit()提交异步表单,不能使用ajaxForm()提交。
效果:直接点击“登录”,验证不通过,不做异步提交(控制台无输出)
验证通过,则控制台输出
因为这种写法比较符合顺序逻辑:先验证表单 -> 验证通过的话在提交处理器(submitHandler)中写异步的逻辑。
4.2 验证是验证,异步是异步,分而治之
$("#myForm").validate();
$("#myForm").ajaxForm({
beforeSubmit: function(arr, $form) {
return $form.valid();
},
success:function (data) {
console.log(data.name);
}
});
这种写法将验证与异步提交分开来写,关键是异步提交前(beforeSubmit)通过返回验证判断的结果,来确定是否需要异步提交。
注意!
- 异步提交一定要使用ajaxForm(),不能使用ajaxSubmit(),因为如果使用ajaxSubmit方法页面加载就会发送异步请求。
- beforeSubmit方法中的第二个参数$form,本身就是jqery对象,可以直接调用是否验证通过$form.valid()的方法。
效果:验证通过则异步提交
全部前台代码,为了美观引入了Bootstrap.css:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>Jquery</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script src="/form.js"></script>
</head>
<body>
<form id="myForm" class="form-horizontal" role="form" action="data" method="post">
<div class="form-group">
<label for="id" class="col-sm-2 control-label">id</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="id" name="id" required
placeholder="请输入id">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" required minlength="2"
placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="digits" class="form-control" id="age" name="age" required maxlength="3"
placeholder="请输入年龄">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
<script>
$("#myForm").validate({
submitHandler:function(form){
$(form).ajaxSubmit({
success:function (data) {
console.log(data.name);
}
});
}
});
</script>
</body>
</html>
总结:
其实对于验证有很多框架都是类似的处理方式如:Bootstrap Validata等,只要掌握了其使用技巧,对于其他的框架一样可以手到渠成;而ajaxForm()只是jquery对表单提交和ajax()的高度封装,让异步提交表单如此简单。怎么样还不赶快来实际用一下?
(完)