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

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参数校验表单及验证后提交的全部内容，希望对大家有所帮助。

赞 (0)

相关推荐

  • Jquery判断form表单数据是否变化

    本文实例为大家分享了Jquery判断form表单数据是否变化的三大步骤,供大家参考,具体内容如下 1.思路为:修改时点击一行datagrid,并进行页面跳转数据绑定,在提交form时,序列号form表单,并重新获取datagrid选中的行数据,进行数据比较.</span> /** * 判断form内属性值是否被修改 * * @param jsonForm 对应修改的form序列化后的json数据 * @param row 对应datagrid选中的数据源 * * @Return true 存在

  • jQuery Form表单取值的方法

    之前js取form表单的值都是一个一个的取,数量一多之后容易出错而且烦透了.感谢那些愿意分享的人. 页面定义form,并给form指定id值,里面的元素只要是需要键值对应的都赋予name属性,并且name值等于后台能识别的参数名. <form method='post' id="punishformID"> <input hidden="hidden" name="Stu" value=@Model.Stu> <in

  • Jquery表单验证插件formValidator使用方法

    Jquery表单验证插件formValidator使用方法

    使用步骤: 1.首先在项目中添加必备js与css 2.代码中添加引用(必备引用) <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="formValidator1/formValidator-4.0.1.min.js" type="text

  • jquery的ajax提交form表单的两种方法小结(推荐)

    jquery的ajax提交form表单的两种方法小结(推荐) 方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx"; alert($('#formAddHandlingFee').serialize()); $.ajax({ type: "POST", dataType: "html", url:

  • jQuery改变form表单的action,并进行提交的实现代码

    jQuery改变form表单的action,并进行提交的实现代码 <s:form action="/student/traScore.action?method=list" id="queryForm" name="queryForm"> </s:form> //导出学生实训成绩 function exportScore(){ var path = "${ctx}/student/traScore.action?

  • jquery form表单获取内容以及绑定数据

    在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使用起来也很简单: 获取表单的数据:$("#formid").serializeJson(); 绑定数据到表单:$("#formid").setForm(json); jquery.formHelp.js插件 /** * 将form里面的内容序列化成json * 相同的c

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

    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"&g

  • jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码

    jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码

    本文实例讲述了jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码.分享给大家供大家参考.具体如下: 这里实现圆角表单,圆角输入框,无刷新验证,漂亮唯美,是对这款基于HTML5/CSS3/jQuery来实现的表单效果的简要概括,用HTML5可以实现很多超乎寻常的效果,从此你会喜欢上HTML5,会骂一下万恶的IE,到现在IE8还不支持HTML5,正悲哀着呢. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-htm

  • jQuery.form插件的使用及跨域异步上传文件

    jQuery.form插件的使用及跨域异步上传文件

    先说明白 这个跨域异步上传功能我们借助了Jquery.form插件,它在异步表单方面很有成效,而跨域我们会在HTTP响应头上添加 access-control-allow-method,当然这个头标记只有IE10,火狐和谷歌上支持,对于IE10以下的浏览器来说,我们就不能用这种方式了,我们需要换个思路去干这事,让服务端去重写向我们的客户端,由客户端(与文件上传页面在同域下)来返回相关数据即可. 再做事 1 Jquery.form的使用 <form method="post" ac

  • vue+elementUI 复杂表单的验证、数据提交方案问题

    当我们在做后台管理系统时,经常会遇到非常复杂的表单: 表单项非常多 在各种表单类型下,显示不同的表单项 在某些条件下,某些表单项会关闭验证 每个表单项还会有其他自定义逻辑,比如 输入框可以插入模板变量.输入字符数量显示.图片上传并显示.富文本 ... 在这种错综复杂的情况下,完成表单的验证和提交 可以查看具体例子:例子中省略了很多琐碎的功能,只保留整体的复杂表单框架,用于展示解决方案 方案1: 在一个 vue 文件中 所有的表单项显示隐藏.验证.数据获取.提交.自定义等逻辑放在一起 v-if/v

  • jQuery form 表单验证插件(fieldValue)校验表单

    jQuery form表单验证相关知识,在做项目中经常会用到,其实也不算复杂,下面通过一段代码给大家介绍jQuery form 表单验证插件(fieldValue)校验表单的相关知识,感兴趣的朋友一起学习吧 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery form插件的使用--使用 fieldValue

  • jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象

    jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 本文演示的是:jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象 ajaxForm()和ajaxSubmit()的可选参数项对象 ajaxForm 和 ajaxSubmit 都支持大量的可选参数,它们通过可选参数项对象传入.可选参数项对象只是一个简单的 JavaScript对象,里边包含了一些属性和一些值:

  • jquery validate和jquery form 插件组合实现验证表单后AJAX提交

    要实现表单验证和无刷新提交表单我们可以使用jQuery的两个很好用的插件--jquery validate.js 和 jquery form.js.具体详细说明情况下文. 1.jQuery validate.js,它说白了就是一个很高尚的人为我们写好了各种表单的验证,不用我们这些童鞋去现写了,一天天的多累啊,呵呵. 2.jQuery form.js,"这个插件能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单. 插件里面主要的方法, ajaxForm 和 ajaxSubmi

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

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

  • 妙用Bootstrap的 popover插件实现校验表单提示功能

    妙用Bootstrap的 popover插件实现校验表单提示功能

    最近的项目,用Bootstrap比较多.浏览Bootstrap文档,发现 popover 插件特别适合做表单校验出错的提示. 因为使的非常频繁,最近把它封住下,做成 jQuery的插件. 通过 本插件,在 html标签中 定义好 data-vaild="校验正则" data-errmsg="错误信息即可".为什么 要把 校验规则 写到 html 标签中呢?因为 我还用它做了 后台 的校验规则(后台没用Node,现在用的ASP,忙完专门再发文写下原理). <in

  • jQuery轻量级表单模型验证插件

    JQuery插件,轻量级表单模型验证,供大家参考,具体内容如下 附上源码和Demo段 var validataForm = (function(model) { model.Key = "[data-required='true']"; model.ElementList = new Array(); model.FunctionDictionary = new Dictionary(); model.ToastrCustom = function (msg) { alert(msg)

随机推荐