快速学习jQuery插件 Form表单插件使用方法


Posted in Javascript onDecember 01, 2015

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

文章详细的介绍了Form表单插件的使用方法,希望大家认真学习,从中得到收获。

Javascript 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
JavaScript 动态生成方法的例子
Jul 22 Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
JS 修改URL参数(实现代码)
Jul 08 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jQuery学习笔记之Ajax用法实例详解
Dec 01 #Javascript
易操作的jQuery表单提示插件
Dec 01 #Javascript
JavaScript保留关键字汇总
Dec 01 #Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 #Javascript
整理Javascript函数学习笔记
Dec 01 #Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 #Javascript
js获取及判断键盘按键的方法
Dec 01 #Javascript
You might like
洪恩在线成语词典小偷程序php版
2012/04/20 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
javascript new fun的执行过程
2010/08/05 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
简单的通用表达式求10乘阶示例
2014/03/03 Python
Python 异常处理实例详解
2014/03/12 Python
Python之str操作方法(详解)
2017/06/19 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
应用化学专业本科生求职信
2013/09/29 职场文书
秋季开学典礼主持词
2014/03/19 职场文书
应聘护士求职信
2014/07/21 职场文书
园林技术专业求职信
2014/07/28 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
优秀班组申报材料
2014/12/25 职场文书
护士辞职信怎么写
2015/02/27 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
PHP解决高并发问题
2021/04/01 PHP