快速学习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 相关文章推荐
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
去除html代码里面的script正则方法
May 19 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 Javascript
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常用Stream函数集介绍
2013/06/24 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
php生成短网址示例
2014/05/05 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
专业求职信撰写要诀
2014/02/18 职场文书
美术教学感言
2014/02/22 职场文书
预备党员半年考察意见
2015/06/01 职场文书
python基础之错误和异常处理
2021/10/24 Python