传统 HTML 表单数据的“整存整取”

在日常开发中，涉及表单的处理司空见惯。过往，在取值和赋值的过程中，借助 jQuery 常常只是逐个控件进行操作，可惜这样开发效率并不高。那么能不能批量获取整个表单的值呢，以及批量为表单赋值。

一、取值、赋值的扩展方法

/* jQuery 扩展 */
jQuery.fn.extend({ /* 清空表单 */
formClear: function () {
this.find("input:text,select,input:hidden,input:password").each(function () {
$(this).val("");
});
this.find("input:checkbox,input:radio").each(function () {
$(this).removeAttr("checked");
});
}, /* 填充表单 */
// 例如 $('form').formFill({ data : {id:1} , prefix : "user." })，填充后形如 <input name='user.id' value='1' >
formFill: function (option) {
var prefix = option.prefix;
if (prefix == undefined) prefix = "";
var frmData = option.data;
for (i in frmData) {
var dataKey = i;
var thisData = this.find("[name='" + prefix + i + "']");
var text = "text";
var hidden = "hidden";
if (thisData != null) {
var thisDataType = thisData.attr("type");
var val = frmData[i];
var isdata = (val != null && val.toString().lastIndexOf("/Date(") != -1);
if (thisDataType == "radio") {
thisData.filter("[value=" + val + "]").attr("checked", "checked")
if (val == true || val == "0") val = "True";
else if (val == false || val != "0") val = "False";
thisData.filter("[value=" + val + "]").not("donbool").attr("checked", "checked")
} else if (thisDataType == "checkbox") {
if (thisData.size() == 1) {
if (val == "true" || val == 1 || val == "True" || val == "1") {
thisData.attr("checked", "checked");
} else {
thisData.removeAttr("checked");
}
} else { thisData.removeAttr("checked");
var cbIndex = i;
if (val.lastIndexOf(",") == -1) {
this.find("[name='" + prefix + dataKey + "'][value='" + prefix + val + "']").attr("checked", "checked");
} else {
jQuery(val.split(',')).each(function (i, v) {
this.find("[name='" + prefix + dataKey + "'][value='" + prefix + v + "']").attr("checked", "checked");;
})
}
} } else {
if (isdata) {
val = jQuery.Convert.jsonReductionDate(val);
}
if (val == "null" || val == null)
val = "";
if (val == "" && thisData.attr("watertitle") == thisData.val()) {
} else {
thisData.val(val + "");
thisData.removeClass("watertitle");
}
}
}
}
}, /* 抓取表单 */
// changeToBool 设置为true的话，会把string型"true"和"false"字符串值转化为boolean型
formSerialize: function (changeToBool) {
var formArray = this.serializeArray();
var oRet = {};
for (var i in formArray) {
if (typeof (oRet[formArray[i].name]) == 'undefined') {
if (changeToBool) {
oRet[formArray[i].name] = (formArray[i].value == "true" || formArray[i].value == "false") ? formArray[i].value == "true" : formArray[i].value;
}
else {
oRet[formArray[i].name] = formArray[i].value;
}
}
else {
if (changeToBool) {
oRet[formArray[i].name] = (formArray[i].value == "true" || formArray[i].value == "false") ? formArray[i].value == "true" : formArray[i].value;
}
else {
oRet[formArray[i].name] += "," + formArray[i].value;
}
}
}
return oRet;
}}); // end extend


formClear：清空表单中所有控件的值

$("form#editForm").formClear();


formFill：填充表单所有控件

$("form#editForm").formFill({ data: result.Data });


formSerialize：获取表单中所有控件的值

// 收集表单数据
var serializeForm = $("#searchForm").formSerialize(true);


参数设置为true的话，会把string型的"true"和"false"字符串值转化为boolean型。

如果需要追加额外的属性，使用 extend 合并即可：

$.extend(serializeForm, { openId: openId });


除了上述的合并方式之外，还可以直接为属性赋值，这样 js 语言层面会自动追加属性：

if (serializeForm.hasOwnProperty("IsSubscribeSenderEmail")) {
serializeForm["IsSubscribeSenderEmail"] = 1;
} else {
serializeForm["IsSubscribeSenderEmail"] = 0;
}