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;
}
Experience 12/14/2021, 5:48:57 PM
407
0
2
空数据form表单提交
如有帮助,点赞鼓励一下吧!