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插件的使用--用 formData 参数校验表单，验证后提交（简单验证）.的更多相关文章

  1. jQuery form插件的使用--使用 fieldValue 方法校验表单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  2. jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象

    一.前提说明 Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 二.简单介绍 本文演示的是:jQue ...

  3. [转载]Jquery Form插件表单参数

    表单插件API提供了几个方法,让你轻松管理表单数据和进行表单提交. ajaxForm增 加所有需要的事件监听器,为AJAX提交表单做好准备.ajaxForm不能提交表单.在document的ready ...

  4. 使用jQuery.form插件，实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  5. jQuery form插件使用详解

    点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用 自定义jq ...

  6. jQuery学习笔记（jquery.form插件）

    官网: http://malsup.com/jquery/form/ jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Fo ...

  7. jQuery.Form插件介绍

    一.前言  jQuery From插件是一个优秀的Ajax表单插件,使用它可以让你非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery From有两个主要方法:ajaxForm和ajaxS ...

  8. jquery.form插件中动态修改表单数据

    jquery.form jquery.form插件(http://malsup.com/jquery/form/)是大家经常会用到的一个jQuery插件,它可以很方便将表单转换为ajax的方式进行提交 ...

  9. jQuery Form插件详解

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

随机推荐

  1. idea上实现github代码同步

    1.先将github远程仓库clone到本地 2.将本地仓库中的项目导入到idea中 3.如果你的项目代码不是放在仓库的根目录下,idea会识别到你的项目是在git仓库目录下,必须点击add root ...

  2. 使用VS2010开发Qt程序的一点经验

    导读 相比于Qt Creator,我更喜欢用VS2010来进行开发.虽然启动时间相对较慢,但是VS下强大的快捷键和丰富的插件,以及使用多年的经验,都让我觉得在开发过程中得心应手.其中最重要的一点是,有 ...

  3. 组合数学 - 置换群的幂运算 --- poj CARDS (洗牌机)

    CARDS Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 1448   Accepted: 773 Description ...

  4. Unity Shader入门基础（一）

    渲染流水线   一.渲染流水线 渲染流水线的工作任务在于由一个三维场景出发.生存(或者说渲染)一张二维图像.换句话说,计算机需要从一系列的顶点数据.纹理等信息出发,把这些信息最终转换成一张人眼可以看到 ...

  5. 动态生成RDLC报表

    前段时间,做了RDLC报表,主要是三块功能: 1.从DataGrid提取(包括最新的增删改)的数据,自动生成对应的RDLC报表文件(以流的形式驻存在内存中),用ReportViewer类来展示.打印. ...

  6. 【Bootstrap基础学习】00 序

    其实这样的东西很多了,但是我就是要写. 我写这种鬼东西只是为了监督自己,如果能顺便帮一下别人就更好了. 这个系列的基础学习,不会去看实体书,主要是去看网上的资料和官网. Bootstrap就是对jQu ...

  7. C#根据CPU+磁盘标号来注册软件

    很多私人软件都需要自己的作品出售给别人只能一台电脑使用,不可以随便一个电脑都可以运行自己的软件,所以就有了软件注册限制的控制,收集了一个注册软件的帮助类,分享记录一下. 功能介绍:    根据CPU+ ...

  8. YEdit

    YEdit YEdit is a YAML editor for Eclipse. See the wiki for more details Installation Use the Eclipse ...

  9. kfreebsd不适用于实际环境

    debian搞的kfreebsd,其中有很多常用的软件包处于依赖破损的状态,个人觉得是无法用作日常开发或生产环境的. 当然,对于只使用其中几项完整可用功能的场景,基本上还是可以的. 当时看个这个东东的 ...

  10. 【学习整理】NOIP涉及的数论 [updating]

    扩展欧几里得 求二元一次不定式方程 的一组解. int exgcd(int a,int b,int &x,int &y) { int t; ;y=;return a;} t=exgcd ...