传统 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;
}