注：经过验证，formValidator只适合一个页面不超过一个表单的情况。

本例实现功能：通过ajax提交表单，并在提交表单前对表单的数据进行验证。
主要通过两个插件实现：
第一个：
jQuery Form Plugin
http://jquery.malsup.com/form 主要功能是ajax提交表单

第二个：jQuery formValidator 国产强大的表单验证插件。
http://www.cnblogs.com/wzmaodong

最简单的例子如下：

  1. <html>
  2. <head>
  3. <title>Form</title>
  4. <!-- 引入jQuery -->
  5. <script src="<?php echo base_url()?>style/jquery.js" type="text/javascript"></script>
  6. <!-- 引入jQuery formValidator -->
  7. <link type="text/css" rel="stylesheet" href="<?php echo base_url()?>style/form_valide/style/validator.css"></link>
  8. <script src="<?php echo base_url()?>style/form_valide/formValidator.js" type="text/javascript" charset="UTF-8"></script>
  9. <script src="<?php echo base_url()?>style/form_valide/formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
  10. <!-- 引入jQuery Form Plugin -->
  11. <script type="text/javascript" src="<?php echo base_url()?>style/ajax_form/jquery.form.js"></script>
  12. <script type="text/javascript">
  13. $(document).ready(function(){
  14. //提供回调函数，提供提交返回结果的处理
  15. var options = {
  16. success:function(data) {
  17. alert(data);
  18. }};
  19. //初始化验证插件，如果提交出错，则弹出对话框，如果正确，则通过ajax提交表单请求。
  20. $.formValidator.initConfig({
  21. formid:"form1",
  22. onerror:function(msg){alert(msg)},
  23. onsuccess:function(){$('#form1').ajaxSubmit(options); return false;}
  24. });
  25. //表单验证
  26. $("#test1").formValidator({
  27. onshow:"请输入用户名,只有输入\"maodong\"才是对的",
  28. onfocus:"用户名至少6个字符,最多10个字符",
  29. oncorrect:"该用户名可以注册"})
  30. .inputValidator({min:6,max:10,onerror:"你输入的用户名非法,请确认"})
  31. .regexValidator({regexp:"username",datatype:"enum",onerror:"用户名格式不正确"});
  32. });
  33. </script>
  34. </head>
  35. <body>
  36. <form action="<?php echo site_url("welcome/post")?>" method="post" name="form1" id="form1">
  37. <td align="right">用户名:</td>
  38. <td><input type="text" name="test1"id="test1" style="width:120px" value="maodong" /></td>
  39. <td><div id="test1Tip" style="width:250px"></div></td>
  40. <input type="submit" name="button" id="button" value="提交" />
  41. </form>
  42. </body>
  43. </html>

success回调函数不执行，可能是请求时候
出错了。调用success方法之前尝试着把服务器返回的数据解析成dataType格式，试一下
error:function(XMLResponse){alert(XMLResponse.responseText)}。

如：

var options={
target:'#output1',  //把服务器返回内容放入id为output1的元素中
beforeSubmit:showRequest, //提交前的回调函数
success:showResponse,  //提交后的回调函数

error:function(XMLResponse){alert(XMLResponse.responseText)},
//url:url,   //默认是form的action,如果申明，则会覆盖
//type:type,   //默认是form的method('get' or 'post'),如果申明，则会覆盖
//dateType:null,  //'xml','script',or 'json'(接受服务端返回的类型)
//clearForm:true,  //成功提交后，清除所有表单元素的值
//resetForm:true,  //成功提交后，重置所有表单的值
//timeout:3000   //限制请求的时间，当请求大于3秒后，跳出请求
}

ajaxForm 和 ajaxSubmit 的选项
除了以下列出的选项，你也可以给这两个函数传递标准$.ajax的选项。

target ———— 指定页面中的哪些元素用于响应服务器端的更新。这个值可以是jQuery查询字符串，或者它指定的jQuery对象，或者是DOM元素。默认值：null

replaceTarget ———— 配合target选项使用。当被设置为true时，target指定的部分将被替换，否则只替换它的内容。默认值：false

url ———— 指定数据要提交到的URL。默认值：表单的action属性值

type ———— 指定表单提交的方式：’GET’或者’POST’。默认值：表单的method属性值（若无则为’GET’）

data ———— 要同表单一起提交的额外数据，格式：data: { key1: ‘value1′, key2: ‘value2′ }

dataType
———— 服务器响应的数据类型，值可以为：null, ‘xml’, ‘script’,
或者’json’。这个选项指定服务器端的响应如何处理。它直接映射到了jQuery.httpData方法。如果dataType为’xml’，则服务
器的响应将被看成是XML，’success’回调函数将被传入responseXML的值。如果dataType为’json’，则服务器的响应将被看
成是JSON对象（通过eval），并传给’success’回调函数。如果dataType为’script’，则服务器的响应将被eval成全局上下
文。默认值：null

beforeSerialize ———— 表单序列化前的回调函数。它提供了一个机会以在值被获取前控制表单。其中的一个参数是表单的jQuery对象，另一个是传给ajaxForm/ajaxSubmit的选项对象。默认值：null

beforeSerialize: function($form, options) {
    // 返回false将取消提交操作
}
beforeSubmit
————
表单提交前的回调函数。一般用于处理表单提交前的逻辑，如验证表单数据。如果这个回调函数返回false，提交操作将被取消。它的三个参数分别是表单数据
组成的数组，表单的jQuery对象，传给ajaxForm/ajaxSubmit的选项对象。默认值：null

beforeSubmit: function(arr, $form, options) {
    // 第一个参数的格式：
    // [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]

// 返回false将取消提交操作
}
success ———— 表单被成功提交后，服务器端产生响应时的回调函数。它将被传入以下参数：

1. responseText 或者 responseXML 的值（取决于dataType选项的值）

2. statusText

3. xhr(XMLHttpRequest对象)（若jQuery的版本小于1.4，则为jQuery封装过的表单元素）

4. jQuery封装过的表单元素（若jQuery的版本小于1.4，则为undefined）

默认值：null

semantic
—————
指定提交的数据是否遵循语义上的顺序（较正常方式慢）。注意一般情况下表单的序列化都遵循语义上的顺序，除非有image类型的控件。只有当服务器对提交
的数据的语义上的顺序有严格要求而且表单含有image类型的控件时才设置为true。默认值：false

resetForm ———— 当成功提交时是否重置表单。默认值：null

clearForm ———— 当成功提交时是否清除表单。默认值：null

iframe ———— 是否总是将服务器的响应放在iframe里面。默认值：false

iframeSrc ———— 如果iframe选项为true，则要添加到iframe中的src属性。默认值：about:blank，使用https协议的页面的默认值为：javascript:false

forceSync ———— 指定是否在上传文件或者使用iframe选项提交表单时去除短时间的延迟。这个延迟用于浏览器在进行原始的提交操作前渲染DOM。通过它给用户提示如”请稍候”，这改善了可用性。默认值：false

选项示例：

// 准备选项对象
var options = {
    target:     '#divToUpdate',
    url:        'comment.php',
    success:    function() {
        alert('Thanks for your comment!');
    }
};

// 把选项对象传递给ajaxForm函数
$('#myForm').ajaxForm(options);

JQuery ajax提交表单及表单验证的更多相关文章

  1. jquery ajax提交表单数据的两种方式

    http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...

  2. jquery ajax提交数据给后端

    大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学. 初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩.而JavaScript aj ...

  3. 继上篇-jquery ajax提交 本篇用ajax提交的数据去数据库查询

    上篇讲到如何用jquery ajax提交数据至后台,后台接收并返回给ajax.https://www.cnblogs.com/tiezhuxiong/p/11943328.html 今天我们把数据传到 ...

  4. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

  5. Jquery ajax提交表单几种方法详解

    [导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...

  6. Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式

    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...

  7. jQuery ajax在GBK编码下表单提交终极解决方案（非二次编码方法）(转)

    版权声明]:版权归作者所有,转载时请以超链接形式标明文章原始出处和作者信息及本声明:http://www.open-lib.com/Forum/Read_69_1.action 前言: 当jquery ...

  8. 通过jQuery Ajax提交表单数据时同时上传附件

    1.使用场景:需要使用ajax提交表单,但是提交的表单里含有附件上传 2.代码实现方式: <!-- HTML代码 --> <form method="post" ...

  9. Jquery Ajax 提交json数据

    在MVC控制器(这里是TestController)下有一个CreateOrder的Action方法 [HttpPost] public ActionResult CreateOrder(List&l ...

随机推荐

  1. Dubbo面试20问！这些题你都遇到过吗？

    作者:Dean Wang https://deanwang1943.github.io/bugs/2018/10/05/面试/饿了么/dubbo 面试题/ 1.dubbo是什么 dubbo是一个分布式 ...

  2. 国内pypi镜像

    V2EX pypi.v2ex.com/simple 豆瓣 http://pypi.douban.com/simple 阿里云(推荐使用) http://mirrors.aliyun.com/pypi/ ...

  3. Codeforces Round #536 E. Lunar New Year and Red Envelopes /// 贪心 记忆化搜索 multiset取最大项

    题目大意: 给定n m k:(1≤n≤1e5, 0≤m≤200, 1≤k≤1e5) 表示n个时间长度内 最多被打扰m次 k个红包 接下来k行描述红包 s t d w:(1≤s≤t≤d≤n , 1≤w≤ ...

  4. 只用200行Go代码写一个自己的区块链！（转）

    区块链是目前最热门的话题,广大读者都听说过比特币,或许还有智能合约,相信大家都非常想了解这一切是如何工作的.这篇文章就是帮助你使用 Go 语言来实现一个简单的区块链,用不到 200 行代码来揭示区块链 ...

  5. php的生命周期的概述

    1. PHP是随着WEB服务器(apache)的启动而运行的: 2. PHP通过mod_php5.so()模块和服务器(apache)相连 3. PHP总共有三个模块:内核.Zend引擎.以及扩展层: ...

  6. NFS 服务器的配置

    1. 安装 NFS 服务器 [root@localhost btools]#rpm -q nfs-utils 如果没有安装,从对应 Linux 操作系统版本的安装光盘上找到 nfs-utils 的安装 ...

  7. UVA11021 Tribles 概率dp

    题目传送门 题意:开始有$k$只兔子,每只都是活一天就死,每只死前都会有$pi$的概率生出$i$只兔子.求$m$天后兔子死光的概率. 思路: 设$f[i]$为一只兔子在第i天死完的概率,那么答案就是$ ...

  8. msql数据库基础

    一.数据库操作 1.显示数据库 SHOW DATABASES; SHOW CREATE DATABASE 数据库名称; #数据库的创建信息 2.创建数据库 #utf8 CREATE DATABASE ...

  9. Dom编程优化

    对Dom的访问代价是昂贵,在富网页应用中通常是性能的瓶颈,所以对Dom的优化十分重要. 一.访问和修改Dom元素 浏览器通常要求JavaScript和Dom实现保持独立的.例如,在Internet E ...

  10. 关于移动端使用swiper做图片文字轮播的思考

    最近做移动端网页的时候,需要在首页添加一个公告的模块,用来轮播公告消息标题并且能链接到相应的详情页面,最开始用的是swiper插件,在安卓上测试完全没有问题,但是在苹果机上就没有那么灵敏了,来回切换首 ...