Js处理Form表单空提交问题

对于 Form 表单提交数据，有时候页面没有任何字段需要进行校验，但这样就会导致不填写任何数据，都可以直接保存、编辑，产生很多无用的记录，这样的体验很不好，我们需要能进行判断是否表单全局为空，如何解决这种问题 ？

实现思路：

首先拿到 Form 表单中的所有 input、textarea、select 的数据（一般使用：$("#xxxForm").serialize() 方式），然后因为经常载表单中放一些ID，来做判断是否编辑，这样会有一下隐藏域（即），所以要去掉隐藏域的数据，再进行表单数据是否为空的判断。

如何判断？

定义一个参数 result = ''，然后将序列化得到的表单对象（fmData）在循环中和隐藏域的属性进行比较（实际比较的是参数名是否一致），如果当前属性在隐藏域的属性中不存在（不一致），就把当前属性的值（value）拼接传递给 result，最后判断 result 是否为 ' ' 且 长度是否大于0，如果为 ' ' 或 长度不大于 0 ，则表单全局为空。

那要对表单数据进行操作，要怎么进行呢，首先得序列化表单，获取页面所有参数，将隐藏域数据排除掉，但是 serialize() 方法获得的结果是 " FirstName=xxx&LastName=xxx " 这种一个字符串的类型，而不是 Json 类型，所以需要将表单数据序列化为Json 之后进行操作，字符串的类型要进行操作会很麻烦，所以需要序列化为Json进行操作，使用 serializeObject() 方法，就可以转换成 Json 类型数据；

实现方法：

情况一、隐藏的(type="hidden")参数少：

直接再循环中排除隐藏域的不需要进行判断的参数；

/**
 * 检验表单是否为空
 */
function checkForm() {
    //首先序列化表单数据为Json类型
    var fmData = $("#myForm").serializeObject();
    //定义结果表示是否表单为空
    var result = "";
    for (var item in fmData) {
        if (item != "param1" && item != "param2") {
            result += fmData[item].trim();
        }
    }
    if (result != "" && result.length > 0) {
        //xxx...
    }else{
        //xxx...
    }
}

情况二、隐藏的(type="hidden")参数多：

首先定义一个 Json  类型的对象 ignoreData，用于存放需要排除掉的参数，然后再将这些参数（ignoreData）从序列化之后的对象（fmData）中删除在进行判断；

/**
 * 检验表单是否为空
 */
function checkForm() {
    var fmData = $("#myForm").serializeObject();
    //隐藏域属性
    var ignoreData = {
        param1: '',
        param2: '',
        param3: '',
        param4: '',
        param5: '',
        param6: '',
        ...
    };
    //去掉隐藏域的属性
    for (var i in ignoreData) {
        delete fmData[i];
    }
    var result = "";
    for (var item in fmData) {
        result += $.trim(fmData[item]);
    }
    if (result != "" && result.length > 0) {
        //xxx...
    } else {
        //xxx...
    }
}

注：关于serializeObject()方法的具体实现：

$.fn.serializeObject = function () {
    var result = {};
    var array = this.serializeArray();
    $.each(array, function () {
        if (result[this.name]) {
            if (!result[this.name].push) {
                result[this.name] = [result[this.name]];
            }
            result[this.name].push(this.value || '');
        } else {
            result[this.name] = this.value || '';
        }
    });
    return result;
}