Js处理Form表单空提交问题

待我称王封你为后i 2022-05-15 02:08 420阅读 0赞

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

### 实现思路： ###

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

### 如何判断？ ###

定义一个参数 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;
    }