我想在Backbone.js模型中对表单进行一些服务器前验证。为此,我需要将用户输入的表单转换为可用的数据。 我找到了三种方法:

var input = $(“#inputId”).val(); var input = $(“form.login”).serialize(); var input = $(“form.login”).serializeArray();

不幸的是,没有一个提供我所需要的良好的可读和可开发的JSON对象。我已经浏览了Stack Overflow上的几个问题,但我只找到了一些额外的库。

现在的jQuery或Backbone.js没有提供一个辅助方法吗?

我无法想象没有对这种功能的要求。

HTML

<form class="login">
    <label for="_user_name">username:</label>
    <input type="text" id="_user_name" name="user[name]" value="dev.pus" />
    <label for="_user_pass">password:</label>
    <input type="password" id="_user_pass" name="user[pass]" value="1234" />
    <button type="submit">login</button>
</form>

JavaScript

var formData = $("form.login").serializeObject();
console.log(formData);

输出

{
    "name": "dev.pus",
    "pass": "1234"
}

Backbone.js模型

var user = new User(formData);
user.save();

当前回答

为了解决同样的问题(在不涉及复杂插件和库的情况下进行验证),我创建了jQuery。serializeJSON,它改进了serializeArray以支持任何类型的嵌套对象。

这个插件非常流行,但在另一个项目中,我使用了Backbone.js,我想在Backbone.js模型中编写验证逻辑。然后我创建了Backbone。Formwell,它允许您在表单中直接显示验证方法返回的错误。

其他回答

我的贡献:

function serializeToJson(serializer){
    var _string = '{';
    for(var ix in serializer)
    {
        var row = serializer[ix];
        _string += '"' + row.name + '":"' + row.value + '",';
    }
    var end =_string.length - 1;
    _string = _string.substr(0, end);
    _string += '}';
    console.log('_string: ', _string);
    return JSON.parse(_string);
}

var params = $('#frmPreguntas input').serializeArray();
params = serializeToJson(params);

这里有一个方便的插件:https://github.com/macek/jquery-serialize-object

问题是:

继续向前,在核心序列化之上,. serializeobject将支持布尔值和数字值的正确序列化,从而为这两种情况生成有效类型。 期待>= 2.1.0中的这些内容

使用jQuery并避免serializeArray,下面的代码以JSON格式序列化并发送表单数据:

$("#commentsForm").submit(function(event){
    var formJqObj = $("#commentsForm");
    var formDataObj = {};
    (function(){
        formJqObj.find(":input").not("[type='submit']").not("[type='reset']").each(function(){
            var thisInput = $(this);
            formDataObj[thisInput.attr("name")] = thisInput.val();
        });
    })();
    $.ajax({
        type: "POST",
        url: YOUR_URL_HERE,
        data: JSON.stringify(formDataObj),
        contentType: "application/json"
    })
    .done(function(data, textStatus, jqXHR){
        console.log("Ajax completed: " + data);
    })
    .fail(function(jqXHR, textStatus, errorThrown){
        console.log("Ajax problem: " + textStatus + ". " + errorThrown);
    });
    event.preventDefault();
});

我找不到一个可以解决这个问题的答案:

[{name:"Vehicle.Make", value: "Honda"}, {name:"Vehicle.VIN", value: "123"}]

调用这个对象:

{Vehicle: {Make: "Honda", "VIN": "123"}}

所以我必须自己写一个序列化器来解决这个问题:

function(formArray){
        var obj = {};
        $.each(formArray, function(i, pair){
            var cObj = obj, pObj, cpName;
            $.each(pair.name.split("."), function(i, pName){
                pObj = cObj;
                cpName = pName;
                cObj = cObj[pName] ? cObj[pName] : (cObj[pName] = {});
            });
            pObj[cpName] = pair.value;
        });
        return obj;
    }

也许它会帮助别人。

下面是这个用例的函数:

function getFormData($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        indexed_array[n['name']] = n['value'];
    });

    return indexed_array;
}

用法:

var $form = $("#form_data");
var data = getFormData($form);