jQuery Form插件使用详解_动力节点Java学院整理


Posted in jQuery onJuly 17, 2017

jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能。另外,插件还包括其他的一些方法: formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。

下载地址: http://malsup.com/jquery/form/#download
核心方法 -- ajaxForm() 和 ajaxSubmit()

$('#myForm').ajaxForm(function() {  
 $('#output1').html("提交成功!欢迎下次再来!").show();  
}); 
   
$('#myForm2').submit(function() { 
 $(this).ajaxSubmit(function() {  
  $('#output2').html("提交成功!欢迎下次再来!").show();  
 }); 
 return false; //阻止表单默认提交 
});

通过Form插件的两个核心方法,都可以在不修改表单的HTML代码结构的情况下,轻易地将表单的提交方式升级为Ajax提交方式ajaxForm() 和 ajaxSubmit() 都能接受0个或1个参数,当为单个参数时,该参数既可以是一个回调函数,也可以是一个options对象,上面的例子就是回调函数,下面介绍options对象,使得它们对表单拥有更多的控制权

var options = { 
 target: '#output',   //把服务器返回的内容放入id为output的元素中  
 beforeSubmit: showRequest, //提交前的回调函数 
 success: showResponse,  //提交后的回调函数 
 //url: url,     //默认是form的action, 如果申明,则会覆盖 
 //type: type,    //默认是form的method(get or post),如果申明,则会覆盖 
 //dataType: null,   //html(默认), xml, script, json...接受服务端返回的类型 
 //clearForm: true,   //成功提交后,清除所有表单元素的值 
 //resetForm: true,   //成功提交后,重置所有表单元素的值 
 timeout: 3000    //限制请求的时间,当请求大于3秒后,跳出请求 
} 

function showRequest(formData, jqForm, options){ 
 //formData: 数组对象,提交表单时,Form插件会以Ajax方式自动提交这些数据,格式如:[{name:user,value:val },{name:pwd,value:pwd}] 
 //jqForm: jQuery对象,封装了表单的元素  
 //options: options对象 
 var queryString = $.param(formData); //name=1&address=2 
 var formElement = jqForm[0];    //将jqForm转换为DOM对象 
 var address = formElement.address.value; //访问jqForm的DOM元素 
 return true; //只要不返回false,表单都会提交,在这里可以对表单元素进行验证 
}; 
 
function showResponse(responseText, statusText){ 
 //dataType=xml 
 var name = $('name', responseXML).text(); 
 var address = $('address', responseXML).text(); 
 $("#xmlout").html(name + " " + address); 
 //dataType=json 
 $("#jsonout").html(data.name + " " + data.address); 
}; 

$("#myForm").ajaxForm(options); 
 
$("#myForm2").submit(funtion(){ 
 $(this).ajaxSubmit(options); 
 return false; //阻止表单默认提交 
});

表单提交之前进行验证:  beforeSubmit会在表单提交前被调用,如果beforeSubmit返回false,则会阻止表单提交

beforeSubmit: validate 
function validate(formData, jqForm, options) { //在这里对表单进行验证,如果不符合规则,将返回false来阻止表单提交,直到符合规则为止 
 //方式一:利用formData参数 
 for (var i=0; i < formData.length; i++) { 
  if (!formData[i].value) { 
   alert('用户名,地址和自我介绍都不能为空!'); 
   return false; 
  } 
 } 
 
 //方式二:利用jqForm对象 
 var form = jqForm[0]; //把表单转化为dom对象 
  if (!form.name.value || !form.address.value) { 
   alert('用户名和地址不能为空,自我介绍可以为空!'); 
   return false; 
  } 

 //方式三:利用fieldValue()方法,fieldValue 是表单插件的一个方法,它能找出表单中的元素的值,返回一个集合。 
 var usernameValue = $('input[name=name]').fieldValue(); 
 var addressValue = $('input[name=address]').fieldValue(); 
 if (!usernameValue[0] || !addressValue[0]) { 
  alert('用户名和地址不能为空,自我介绍可以为空!'); 
 return false; 
 } 

 var queryString = $.param(formData); //组装数据 
 //alert(queryString); //类似 : name=1&add=2 
 return true; 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
jquery append与appendTo方法比较
May 24 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery列表检索功能实现代码
Jul 17 #jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 #jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 #jQuery
JQuery EasyUI的一些常用组件
Jul 12 #jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 #jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 #jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 #jQuery
You might like
用PHP将数据导入到Foxmail
2006/10/09 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
Python记录详细调用堆栈日志的方法
2015/05/05 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
python实现学生信息管理系统
2020/04/05 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
Django实现学员管理系统
2019/02/26 Python
python和c语言的主要区别总结
2019/07/07 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
Python os模块常用方法和属性总结
2020/02/20 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
行政管理毕业生自荐信
2014/02/24 职场文书
党支部三会一课计划
2014/09/24 职场文书
公司员工离职证明书
2014/10/04 职场文书