`
coconut_zhang
  • 浏览: 540701 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

JQuery ajax提交表单及表单验证

 
阅读更多

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

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

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

最简单的例子如下:

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

    本文将深入探讨如何使用jQuery的ajax方法来提交表单,从而实现异步数据交换,提高用户体验。 首先,jQuery的$.ajax()函数是进行Ajax请求的核心,它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单...

    ajax提交表单到后台

    本主题将深入探讨如何使用jQuery库的AJAX功能将表单数据提交到后台,以及后台如何使用Spring框架来处理这些数据。下面将详细阐述这一过程。 ### 一、前端:使用jQuery的AJAX提交表单 1. **引入jQuery库**:首先...

    JQuery Ajax提交整个表单

    总结,使用jQuery的Ajax功能提交整个表单涉及的关键点包括:`serialize()`方法、`$.ajax()`或其简化版`$.post()`/`$.get()`、阻止表单默认提交、处理服务器响应以及跨域问题。理解这些概念和用法,能够帮助开发者在...

    jQuery Ajax无刷新提交表单并执行邮件通知

    "jQuery Ajax无刷新提交表单并执行邮件通知"这个主题涉及了两个关键点:一是利用jQuery进行表单验证,二是通过Ajax实现无刷新提交表单,同时触发邮件通知功能。 **1. jQuery表单验证** jQuery提供了丰富的DOM操作...

    ajax验证并提交表单的两种方法博客源码

    本资源通过ajax实现对提交的form表单的验证,该代码不但有针对property验证,也有针对object验证,还有一个异步获取对象的实例;包含完整的代码和库文件;在myeclipse8.5和apache-tomcat-6.0.30测试通过;访问网址:...

    jQuery完整注册表单提交验证

    在本文中,我们将深入探讨如何使用jQuery实现一个完整的用户注册表单提交验证。这个验证系统包括了多个关键的验证环节,如用户名、密码强度、显示/隐藏密码、手机号码输入控制以及手机验证码、真实姓名和身份证号的...

    Ajax使用jQuery提交表单 文件

    在这个“Ajax使用jQuery提交表单 文件”中,我们将探讨如何利用jQuery实现Ajax提交表单,从而实现异步数据传输,提高用户体验。 首先,我们需要理解jQuery中的Ajax函数`$.ajax()`。这是一个核心函数,可以进行各种...

    jquery表单验证插件

    jQuery Form插件由Malsup开发,是一款非常实用的jQuery扩展,能够极大地简化表单的Ajax提交过程。它不仅提供了一套完整的API来管理表单数据,还支持复杂的表单验证与文件上传等功能。 ##### 2.1 主要特性 - **Ajax...

    jquery ajaxfrom表单提交代码

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互等任务。...确保正确引入jQuery和`ajaxForm.js`文件,并按照上述步骤设置表单,你就可以实现异步的Ajax表单提交了。

    利用ajax提交表单完整流程

    本文将详细介绍如何利用AJAX提交表单的完整流程,以实现更加流畅和用户友好的交互体验。 ### 1. 创建HTML表单 首先,我们需要创建一个HTML表单,它包含了用户输入的数据和一个用于触发AJAX提交的按钮。例如: ```...

    表单验证jquery插件

    - **动态验证**:你可以在表单提交前、按钮点击后等事件中调用 `$.validationEngine('validate')` 来触发验证。 - **异步验证**:通过 `ajaxCall` 规则实现,例如邮箱地址的唯一性验证。 - **自定义事件**:插件提供...

    jquery表单验证Ajax提交.zip

    本项目"jquery表单验证Ajax提交.zip"显然聚焦于使用jQuery进行表单验证和利用Ajax技术无刷新提交数据的核心功能。以下是这些知识点的详细说明: **jQuery库** jQuery是一个轻量级的JavaScript库,它通过提供简洁的...

    jquery ajax 与后台验证

    无刷验证(又称实时验证或AJAX验证)是这种技术的一个典型应用,它提高了用户体验,因为在用户输入数据时,可以立即在后台验证其有效性,而无需等待整个表单提交。下面我们将详细探讨jQuery AJAX以及如何实现无刷...

    Jquery超强验证表单

    综上所述,“jQuery超强验证表单”涉及的知识点涵盖了jQuery基础、表单验证原理、验证插件使用、自定义规则和错误消息、实时验证、AJAX提交以及错误处理等方面。掌握这些内容,可以提升你在Web开发中处理表单验证的...

    php+ajax表单无刷新验证

    PHP与AJAX(Asynchronous JavaScript and XML)结合的表单验证技术可以实现无刷新验证,即在用户输入时即时检查数据有效性,无需等待完整的表单提交,从而显著提升交互体验。 **一、AJAX基础** AJAX 是一种创建...

    jQuery用户注册表单验证代码

    总之,jQuery提供了强大的工具来简化表单验证的实现,通过结合DOM操作、事件处理和正则表达式,我们可以创建出功能完善、用户体验良好的用户注册表单。这个小项目可以帮助你深入理解这些概念,并实践在实际项目中。

    vue12ajax提交表单

    在Vue.js框架中,提交表单是一个常见的任务,特别是在与后端进行数据交互时,我们通常会使用Ajax技术来实现异步通信。Vue.js结合Ajax(通常指的是jQuery的$.ajax或者现代浏览器的fetch API)可以创建高效且用户体验...

    jQuery完整注册表单提交验证.zip

    "jQuery完整注册表单提交验证"是一个针对此需求的解决方案,它提供了全面的验证功能,确保用户输入的数据符合预期,同时减少了服务器端的压力。本文将深入探讨jQuery如何实现这一功能,以及如何将其应用于实际项目中...

    ajax表单验证简单实现jquery版

    本文将深入探讨如何使用jQuery库来实现一个简单的Ajax表单验证。jQuery是一个轻量级、功能丰富的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。 首先,我们需要理解Ajax的核心概念。Ajax允许我们在后台与...

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

    jQuery.form插件正是为了满足这种需求而设计的,它扩展了jQuery库,使表单异步提交变得更加简单、灵活且强大。本文将详细介绍如何使用jQuery.form插件,实现完美的表单异步提交。 首先,我们需要了解jQuery.form...

Global site tag (gtag.js) - Google Analytics