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

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

一、引入依赖js

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

二、初始化回调函数。

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

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

三、校验规则

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

四、详细代码：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <title>jQuery form插件的使用--用 formData 参数校验表单</title>
  5.      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.  
  7.    <script src="jquery-1.3.1.js" type="text/javascript"></script>
  8.    <script src="jquery.form.js" type="text/javascript"></script>
  9.  
  10.    <script type="text/javascript">
  11.             $(document).ready(function() {
  12.                 $('#myForm').ajaxForm({
  13.                          target:        '#output1', // 用服务器返回的数据 更新 id为output1的内容.
  14.                          beforeSubmit:  validate    // 提交前，验证
  15.                 });
  16.             });
  17.  
  18.             function validate(formData, jqForm, options) {
  19.                     // formdata是数组对象,每个对象拥有名称和值.
  20.                     // 数据如下面的格式：
  21.                     // [
  22.                     //     { name:  username , value: usernameValue },
  23.                     //     { name:  password , value: passwordValue }
  24.                     // ]
  25.                     for (var i=0; i < formData.length; i++) {
  26.                         if (!formData[i].value) {
  27.                             alert('用户名,地址和自我介绍都不能为空!');
  28.                             return false;
  29.                         }
  30.                     }
  31.                   var queryString = $.param(formData); //组装数据
  32.                   //alert(queryString); //类似 ： name=1&add=2
  33.                   return true;
  34.             }
  35.  
  36.    </script>
  37.   </head>
  38.  
  39.   <body>
  40.     <h3> Demo 5 :jQuery form插件的使用--用 formData 参数校验表单，验证后提交（简单验证）. </h3>
  41.  
  42.     <form id="myForm" action="ajax2.jsp" method="post">
  43.                  名称： <input type="text" name="name" id="name" /> <br/>
  44.         地址： <input type="text" name="address" id="address"/><br/>
  45.                  自我介绍： <textarea name="comment" id="comment" ></textarea> <br/>
  46.         <input type="submit" id="test" value="提交" /> <br/>
  47.         <div id="output1" ></div>
  48.     </form>
  49.  
  50.   </body>
  51. </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. 44个 Javascript 变态题解析 (上\下)

    第1题 ["1", "2", "3"].map(parseInt) 知识点: Array/map Number/parseInt JavaS ...

  2. Eclipse启动报错：A java runtime Environment(JRE) or java Development……的解决办法

    第一种: 解决方法: 系统变量里设置下面: 变量名:JAVA_HOME 变量值:D:\Java\jdk1.8.0_31 变量名:CLASSPATH 变量值:.;%JAVA_HOME%\lib; 变量名 ...

  3. 常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解

    什么是浏览器兼容问题?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们 ...

  4. MVC显示详细记录Without Entity Framework

    看过此篇<MVC用非Entity Framework将数据显示于视图(二)>http://www.cnblogs.com/insus/p/3364482.html 了解到把数据库中数据表的 ...

  5. （三）XmlHelper

    [转]http://blog.csdn.net/u011866450/article/details/50373222 using System.Xml; using System.Data; nam ...

  6. WebApi传参总动员(二)

    上篇,从最简单的string入手.本篇演示了从请求的输入流中获取实体.api: public class ValuesController : ApiController { [HttpPost] p ...

  7. windows远程控制

    windows+r  输入 mstsc 打开远程控制 首先,确定目标机器支持远程控制 问题解决: Win7远程桌面提示您的凭据不工作: http://jingyan.baidu.com/article ...

  8. 【BZOJ 4551】【TJOI2016】【HEOI2016】树

    http://www.lydsy.com/JudgeOnline/problem.php?id=4551 题目描述 给定一棵有根树(根为 1),有以下两种操作:1. 标记操作:对某个结点打上标记(在最 ...

  9. spring jdbcTemplate query

    1. spring jdbcTemplate query需要实现mapRow方法 package com.cdv.apolloagent.jdbc.dao.impl; import java.sql. ...

  10. <s:iterator>各种遍历用法

    struts2<S:iterator>遍历map小结 1.MapAction.java import java.util.ArrayList;   import java.util.Has ...