我想在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();
如果你用JSON发送表单，你必须在发送字符串中删除[]。你可以用jQuery函数serializeObject()来实现:
var frm = $(document.myform);
var data = JSON.stringify(frm.serializeObject());
$.fn.serializeObject = function() {
var o = {};
// var a = this.serializeArray();
$(this).find('input[type="hidden"], input[type="text"], input[type="password"], input[type="checkbox"]:checked, input[type="radio"]:checked, select').each(function() {
if ($(this).attr('type') == 'hidden') { //if checkbox is checked do not take the hidden field
var $parent = $(this).parent();
var $chb = $parent.find('input[type="checkbox"][name="' + this.name.replace(/\[/g, '\[').replace(/\]/g, '\]') + '"]');
if ($chb != null) {
if ($chb.prop('checked')) return;
}
}
if (this.name === null || this.name === undefined || this.name === '')
return;
var elemValue = null;
if ($(this).is('select'))
elemValue = $(this).find('option:selected').val();
else elemValue = this.value;
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(elemValue || '');
} else {
o[this.name] = elemValue || '';
}
});
return o;
}
如果你用JSON发送表单，你必须在发送字符串中删除[]。你可以用jQuery函数serializeObject()来实现:
var frm = $(document.myform);
var data = JSON.stringify(frm.serializeObject());
$.fn.serializeObject = function() {
var o = {};
// var a = this.serializeArray();
$(this).find('input[type="hidden"], input[type="text"], input[type="password"], input[type="checkbox"]:checked, input[type="radio"]:checked, select').each(function() {
if ($(this).attr('type') == 'hidden') { //if checkbox is checked do not take the hidden field
var $parent = $(this).parent();
var $chb = $parent.find('input[type="checkbox"][name="' + this.name.replace(/\[/g, '\[').replace(/\]/g, '\]') + '"]');
if ($chb != null) {
if ($chb.prop('checked')) return;
}
}
if (this.name === null || this.name === undefined || this.name === '')
return;
var elemValue = null;
if ($(this).is('select'))
elemValue = $(this).find('option:selected').val();
else elemValue = this.value;
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(elemValue || '');
} else {
o[this.name] = elemValue || '';
}
});
return o;
}
下面是我在这种情况下作为模块使用的(在我的formhelper.js中):
define(function(){
FormHelper = {};
FormHelper.parseForm = function($form){
var serialized = $form.serializeArray();
var s = '';
var data = {};
for(s in serialized){
data[serialized[s]['name']] = serialized[s]['value']
}
return JSON.stringify(data);
}
return FormHelper;
});
我似乎找不到另一种方法来做我想做的事情，这有点糟糕。
这确实为我返回了这个JSON:
{"first_name":"John","last_name":"Smith","age":"30"}
