jQuery form插件之formDdata参数校验表单及验证后提交


Posted in Javascript onJanuary 23, 2016

Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程。

测试环境:部署到Tomcat中的web项目。

一、引入依赖js

<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>

二、初始化回调函数。

首先,我们初始化这个表单,给它一个 beforeSubmit 回调函数 - 这是一个用来校验的函数。

$(document).ready(function() { 
$('#myForm').ajaxForm({ 
target:'#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit: validate // 提交前,验证
}); 
});

三、校验规则

function validate(formData, jqForm, options) { 
// formdata是数组对象,每个对象拥有名称和值.
// 数据如下面的格式:
// [ 
// { name: username , value: usernameValue }, 
// { name: password , value: passwordValue } 
// ] 
for (var i=0; i < formData.length; i++) { 
if (!formData[i].value) { 
alert('用户名,地址和自我介绍都不能为空!'); 
return false; 
} 
} 
var queryString = $.param(formData); //组装数据
//alert(queryString); //类似 : name=1&add=2 
return true; 
}

四、详细代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery form插件的使用--用 formData 参数校验表单</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function() { 
$('#myForm').ajaxForm({ 
target: '#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit: validate // 提交前,验证
}); 
});
function validate(formData, jqForm, options) { 
// formdata是数组对象,每个对象拥有名称和值.
// 数据如下面的格式:
// [ 
// { name: username , value: usernameValue }, 
// { name: password , value: passwordValue } 
// ] 
for (var i=0; i < formData.length; i++) { 
if (!formData[i].value) { 
alert('用户名,地址和自我介绍都不能为空!'); 
return false; 
} 
} 
var queryString = $.param(formData); //组装数据
//alert(queryString); //类似 : name=1&add=2 
return true; 
}
</script> 
</head>
<body>
<h3> Demo 5 :jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证). </h3>
<form id="myForm" action="ajax2.jsp" method="post"> 
名称: <input type="text" name="name" id="name" /> <br/>
地址: <input type="text" name="address" id="address"/><br/> 
自我介绍: <textarea name="comment" id="comment" ></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" ></div>
</form>
</body>
</html>

以上所述是小编给大家分享的jQuery form插件之formDdata参数校验表单及验证后提交的全部内容,希望对大家有所帮助。

Javascript 相关文章推荐
jquery 指南/入门基础
Nov 30 Javascript
DOM下的节点属性和操作小结
May 14 Javascript
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
TypeScript入门-接口
Mar 30 Javascript
javascript随机变色实例代码
Oct 15 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 #Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 #Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 #Javascript
javascript实现全角转半角的方法
Jan 23 #Javascript
jQuery操作Table技巧大汇总
Jan 23 #Javascript
jquery采用oop模式class类的使用示例
Jan 22 #Javascript
jquery日历插件datepicker用法分析
Jan 22 #Javascript
You might like
PHP下10件你也许并不了解的事情
2008/09/11 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
JS控制表格隔行变色
2006/06/26 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
分享一个常用的javascript静态类
2014/12/31 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
JS实现随机点名器
2020/04/12 Javascript
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
python实现电子词典
2020/03/03 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
幼师自我鉴定范文
2013/10/01 职场文书
电大学习个人自我评价范文
2013/10/04 职场文书
行政专员岗位职责
2014/01/02 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
绍兴鲁迅故居导游词
2015/02/09 职场文书
护理专业自我评价
2015/03/11 职场文书
监护人证明
2015/06/19 职场文书
公司周年庆寄语
2019/06/21 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技