`

jquery表单插件API

阅读更多

表单插件API


英文原文:
http://www.malsup.com/jquery/form/#api

表单插件API提供了几个方法,让你轻松管理表单数据和进行表单提交。 

ajaxForm

增加所有需要的事件监听器,为AJAX提交表单做好准备。ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来 为AJAX提交表单进行准备。ajaxForm接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。
可链接(Chainable):可以。

实例:

$('#myFormId').ajaxForm();


ajaxSubmit

马上由AJAX来提交表单。大多数情况下,都是调用ajaxSubmit来对用户提交表单进行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。
可链接(Chainable):可以。 

实例:
// 绑定表单提交事件处理器
$('#myFormId').submit(function() {
// 提交表单
$(this).ajaxSubmit();
// 为了防止普通浏览器进行表单提交和产生页面导航(防止页面刷新?)返回false
return false;
});


formSerialize

将表单串行化(或序列化)成一个查询字符串。这个方法将返回以下格式的字符串:name1=value1&name2=value2
可链接(Chainable):不能, 这个方法返回一个字符串。 

实例:
var queryString = $('#myFormId').formSerialize();

// 现在可以使用$.get、$.post、$.ajax等来提交数据
$.post('myscript.php', queryString);

fieldSerialize

将表单的字段元素串行化(或序列化)成一个查询字符串。当只有部分表单字段需要进行串行化(或序列化)时,这个就方便了。这个方法将返回以下格式的字符串:name1=value1&name2=value2
可链接(Chainable):不能,这个方法返回一个字符串。 

实例:
var queryString = $('#myFormId .specialFields').fieldSerialize();


fieldValue

返回匹配插入数组中的表单元素值。从0.91版起,该方法将总是以数组的形式返回数据。如果元素值被判定可能无效,则数组为空,否则它将包含一个或多于一个的元素值。
可链接(Chainable):不能,该方法返回数组。

实例:
// 取得密码输入值
var value = $('#myFormId :password').fieldValue(); 
alert('The password is: ' + value[0]);


resetForm

通过调用表单元素原有的DOM方法,将表单恢复到初始状态。
可链接(Chainable):可以。 

实例:
$('#myFormId').resetForm();


clearForm

清除表单元素。该方法将所有的文本(text)输入字段、密码(password)输入字段和文本区域(textarea)字段置空,清除任何select元素中的选定,以及将所有的单选(radio)按钮和多选(checkbox)按钮重置为非选定状态。
可链接(Chainable):可以。

$('#myFormId').clearForm();


clearFields

清除字段元素。只有部分表单元素需要清除时才方便使用。
可链接(Chainable):可以。

$('#myFormId .specialFields').clearFields();


Options对象

ajaxForm和ajaxSubmit都支持众多的选项参数,这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象,它包含了如下一些属性与值的集合:

target

指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串,一个jQuery对象,或者一个DOM元素。
默认值:null。

url

指定提交表单数据的URL。
默认值:表单的action属性值

type 

指定提交表单数据的方法(method):“GET”或“POST”。
默认值:表单的method属性值(如果没有找到默认为“GET”)。 

beforeSubmit 

表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子(hook),被提供来运行预提交逻辑或者校验表单数据。如果 “beforeSubmit”回调函数返回false,那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数:数组形式的表单数 据,jQuery表单对象,以及传入ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据:

[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]


默认值:null

success 

表单成功提交后调用的回调函数。如果提供“success”回调函数,当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。
默认值:null

dataType 

期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法,它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持:

'xml':如果dataType == 'xml',将把服务器响应作为XML来对待。同时,如果“success”回调方法被指定, 将传回responseXML值。

'json':如果dataType == 'json', 服务器响应将被求值,并传递到“success”回调方法,如果它被指定的话。

'script':如果dataType == 'script', 服务器响应将求值成纯文本。


默认值:null(服务器返回responseText值) 

semantic 

Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image".
布尔标志,表示数据是否必须严格按照语义顺序(slower?)来进行提交。注意:一般来说,表单已经按照语义顺序来进行了串行化(或序列化),除了 type="image"的input元素。如果你的服务器有严格的语义要求,以及表单中包含有一个type="image"的input元素,就应该将 semantic设置为true。(译注:这一段由于无法理解,翻译出来可能语不达意,但请达人指正。)
默认值:false 

resetForm 

布尔标志,表示如果表单提交成功是否进行重置。
Default value: null 

clearForm 

布尔标志,表示如果表单提交成功是否清除表单数据。
默认值:null 

实例:

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

// 将options传给ajaxForm
$('#myForm').ajaxForm(options);


注意:Options对象还可以用来将值传递给jQuery的$.ajax方法。如果你熟悉$.ajax所支持的options,你可以利用它们来将Options对象传递给ajaxForm和ajaxSubmit。
0
0
分享到:
评论

相关推荐

    jquery表单验证插件

    ### jQuery表单验证插件详解 #### 一、概述 jQuery表单验证插件是一种用于简化Web表单处理过程的强大工具。它不仅能够帮助开发者轻松地实现表单数据的Ajax提交,还支持文件上传等功能,极大地提升了用户体验并降低...

    jQuery表单验证插件

    jQuery表单验证插件通过提供便捷的API和丰富的功能,极大地简化了前端验证的实现。开发者可以根据项目需求,选择合适的插件进行集成,提升用户体验,降低开发成本。无论是新手还是经验丰富的开发者,掌握jQuery表单...

    jQuery常用插件之表单插件form使用笔记

    总的来说,jQuery的表单插件`form`通过提供便捷的API和丰富的配置选项,极大地简化了表单的异步提交和数据处理。无论是简单的表单交互还是复杂的文件上传,它都能提供强大的支持。在实际项目中,合理运用此插件能够...

    jquery插件(form表单验证)

    jQuery表单验证插件通常基于以下步骤工作: 1. **事件监听**:插件会监听表单元素上的特定事件,如`submit`、`change`或`focusout`,以便在用户与表单交互时进行验证。 2. **验证规则**:开发者可以定义一系列验证...

    jquery 表单插件 formvalidator

    这个插件通过丰富的自定义选项和易于使用的API,使得开发者能够轻松地对表单元素进行验证。 ### 1. 插件安装与引入 首先,你需要下载 formvalidator4.1.1 压缩包,其中包含了 jQuery FormValidator 的所有必需文件...

    Jquery的表单插件

    **jQuery表单插件详解** 在Web开发中,jQuery库以其简洁、强大的API深受开发者喜爱。其中,jQuery的表单插件是实现交互性、增强用户体验的重要工具。本篇文章将深入探讨jQuery的表单插件,特别是针对"jquery.form....

    jQuery滑动式分步注册表单插件

    **jQuery滑动式分步注册表单插件详解** 在网页设计中,用户注册表单是必不可少的一部分。为了提供更好的用户体验,许多开发者选择使用分步式注册表单,这种形式可以将复杂的表单拆分成几个步骤,使得用户更容易理解...

    jQuery表单验证插件EasyValidator 2.0带TIP提示效果

    **jQuery表单验证插件EasyValidator 2.0:打造高效且友好的用户输入体验** 在Web开发中,表单验证是不可或缺的一部分,它确保了用户提交的数据符合预期的格式和标准,从而防止无效数据的输入。jQuery作为一款广泛...

    带完成百分比的jQuery表单插件

    在【标题】"带完成百分比的jQuery表单插件"中,提到的完成百分比功能是指一种能够实时显示表单填写进度的技术。这种插件通常会计算用户在表单中已填写的字段数量或必填字段的完成情况,并将其转换为百分比,以视觉...

    jQuery formalize (jQuery 表单插件)

    4. **增强的表单验证**:虽然jQuery Formalize本身并不包含复杂的表单验证功能,但其对表单元素的控制使得与其他验证插件结合使用变得更加方便。 5. **键盘导航**:通过键盘操作在表单元素间切换,Formalize提供了...

    jQuery表单元素美化插件jqtransform.zip

    jQuery表单元素美化插件jqtransform是一个专门针对HTML表单组件进行美化和增强用户体验的JavaScript插件。这个插件能够将传统的、样式单一的表单元素,如文本输入框(text inputs)、复选框(checkboxes)、单选按钮...

    jquery-form - jQuery表单生成插件

    jQuery-form 是一个强大的jQuery插件,专门用于处理HTML表单的提交、上传和Ajax交互,大大简化了前端开发者与服务器端进行数据交换的过程。这个插件使得动态表单的创建和管理变得更加简单,同时提供了丰富的功能,如...

    jQuery formvalidator插件 API帮助文档

    **jQuery FormValidator插件API详解** jQuery FormValidator是一款强大的JavaScript验证插件,它极大地简化了网页表单的验证过程,提供了丰富的验证规则和灵活的API,使得开发者可以快速创建出符合业务需求的验证...

    高质量的jQuery表单验证插件 A Jquery Inline Form Validation

    **jQuery 表单验证插件概述** 在网页开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,提高了用户体验并减少了服务器端的负担。`A Jquery Inline Form Validation` 是一个高质量的jQuery...

    很不错的jquery表单美化插件

    而“很不错的jquery表单美化插件”正是基于jQuery的一款工具,旨在提升网页中表单元素的视觉效果和用户体验。这款插件能够帮助开发者轻松实现表单的美观化,同时保持良好的兼容性,覆盖了各种主流浏览器。 表单美化...

    jquery 表单验证插件Validform插件制作一行代码搞定整站的jquery表单验证

    jQuery Validform是一款强大的表单验证插件,它以其简洁的API和高度可定制化的特点,在前端开发中广受欢迎。本文将详细介绍如何使用jQuery Validform插件来实现高效、灵活的表单验证。 **一、Validform简介** ...

Global site tag (gtag.js) - Google Analytics