前端校验form表单是否发生改变

最新推荐文章于 2024-05-24 08:58:18 发布

蓦然回首已经是秃头

最新推荐文章于 2024-05-24 08:58:18 发布

阅读量2.3k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_31439313/article/details/109640531

版权

本文介绍了一种前端技术，用于检测表单数据是否被修改。通过深拷贝初始表单值并将其与用户输入进行对比，可以有效判断表单是否发生变化。文章提供了两种深拷贝方法及比较函数的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端校验form表单是否发生改变，如果没改变直接前端提示

/**
 * 使用 json工具实现对象的深拷贝
 * @param obj 提供覆盖属性的对象
 */
var deepClone1 = function(obj){
    var _obj = JSON.stringify(obj);
    return JSON.parse(_obj);
}
/**
 * 使用递归实现对象深拷贝
 * @param obj
 * @returns {Array}
 */
var deepClone2 = function (obj){
    var objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，如果是，递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}
/**
 * 比较两个json对象 是否相等,前提是两个对象结构一样
 * @param x 字段较多的对象
 * @param y 字段较少对象
 * @returns {boolean} 一样 true
 *                    不一样 false
 */
var compareObject = function( x, y ) {
    //备份要比较的对象
    var temp = {};
    for(var key in x){
        temp[key] = x[key];
    }

    $.extend(x, y);//整合x对象
    //比较z和x
    for(var key in temp){
        var temp_value = temp[key];
        var x_value = x[key];
        if(temp_value != x_value){
            return false;
        }
    }
    return true;
};

页面实现

   var init_value;
    var obj = {};
    $(function () {
        init_value=deepClone1(${m});//后端传过来的值
    });
 var form = $("#testForm");

  var data= form.serializeArray()
        $.each(data,function(i,v){
            obj[v.name] = v.value;
        })
        //1、判断是否做了修改
        var flag = compareObject(init_value, obj);
        if (flag) {
            layer.msg("您并没有做任何修改");
            return false;
        }