• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

macek/jquery-serialize-object: Converts HTML form into JavaScript object

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

macek/jquery-serialize-object

开源软件地址:

https://github.com/macek/jquery-serialize-object

开源编程语言:

JavaScript 97.7%

开源软件介绍:

jQuery Serialize Object

As seen on StackOverflow: Convert forms to JSON LIKE A BOSS.

Adds the method serializeObject to jQuery, to perform complex form serialization into JavaScript objects.

The current implementation relies in jQuery.serializeArray() to grab the form attributes and then create the object using the input name attributes.

This means it will serialize the inputs that are supported by .serializeArray(), that use the standard W3C rules for successful controls to determine which inputs should be included; in particular:

  • The input cannot be disabled and must contain a name attribute.
  • No submit button value is serialized since the form is not submitted using a button.
  • Data from <input type="file"> inputs are not serialized.

Installation

option 1: NPM

$ npm install form-serializer

option 2: Bower

$ bower install jquery-serialize-object

option 3: Manual

Copy the dist/jquery.serialize-object.min.js to your project.

You can include the plugin in the HEAD element or at the bottom of your BODY tag. Wherever you choose to add it, it must be included after your jQuery.

<head>
  <script src="jquery.min.js"></script>
  <script src="jquery.serialize-object.min.js"></script>
</head>

2.0

Version 2.0 takes jquery-serialize-object into maturity. It is now backed by a full test suite so you can be confident that it will work in your web app.

Moving ahead, on top of core serialization, .serializeObject will support correct serializaton for boolean and number values, resulting valid types for both cases.

Look forward to these >= 2.5.0

Update: >= 2.4.0 now serializes <input type="checkbox"> as a boolean. See the test for specific behavior.

API

Given a basic HTML form

<form id="contact">
  <input name="user[email]" value="[email protected]">
  <input name="user[pets][]" type="checkbox" value="cat" checked>
  <input name="user[pets][]" type="checkbox" value="dog" checked>
  <input name="user[pets][]" type="checkbox" value="bird">
  <input type="submit">
</form>

.serializeObject — serializes the selected form into a JavaScript object

$('form#contact').serializeObject();
//=> {user: {email: "[email protected]", pets: ["cat", "dog"]}}

.serializeJSON — serializes the selected form into JSON

$('form#contact').serializeJSON();
//=> '{"user":{"email":"[email protected]","pets":["cat","dog"]}}'

FormSerializer.patterns — modify the patterns used to match field names

Many of you have requested to allow - in field names or use . to nest keys. You can now configure these to your heart's content.

Hyphen example

$.extend(FormSerializer.patterns, {
  validate: /^[a-z][a-z0-9_-]*(?:\[(?:\d*|[a-z0-9_-]+)\])*$/i,
  key:      /[a-z0-9_-]+|(?=\[\])/gi,
  named:    /^[a-z0-9_-]+$/i
});

Dot-notation example

$.extend(FormSerializer.patterns, {
  validate: /^[a-z][a-z0-9_]*(?:\.[a-z0-9_]+)*(?:\[\])?$/i
});

Validating and Key parsing

  • validate — only valid input names will be serialized; invalid names will be skipped

  • key — this pattern parses all "keys" from the input name; You will want to use /g as a modifier with this regexp.

Key styles

  • push — push a value to an array

    <input name="foo[]" value="a">
    <input name="foo[]" value="b">
    $("form").serializeObject();
    //=> {foo: [a, b]}
  • fixed — add a value to an array at a specified index

    <input name="foo[2]" value="a">
    <input name="foo[4]" value="b">
    $("form").serializeObject();
    //=> {foo: [, , "a", , "b"]}
  • named — adds a value to the specified key

    <input name="foo[bar]" value="a">
    <input name="foo[bof]" value="b">
    <input name="hello" value="world">
    $("form").serializeObject();
    //=> {foo: {bar: "a", bof: "b"}, hello: "world"}

Tests

If you have node.js installed, as a convenience, you can run

$ npm test

If you do not have node installed, simply

$ open ./test/test.html

CoffeeScript

CoffeeScript has been dropped for >= 2.0.0. If members of the community would like to support this, please feel free to add a CoffeeScript version.

If you'd like to use the the 1.0.0 version, it is still available here.

Contributing

See : CONTRIBUTING




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap