js判断表单是否有变化

在 JavaScript 中,可以通过以下几种方法判断表单是否有变化:

方法一:表单的 input 事件监听

在每个表单元素上监听 input 或 change 事件,将初始值与当前值进行对比,如果有变化则标记为已修改。

// 获取表单
const form = document.querySelector("form");
let isFormChanged = false;

// 记录初始状态
const initialFormData = new FormData(form);

// 监听表单输入事件
form.addEventListener("input", () => {
    const currentFormData = new FormData(form);
    isFormChanged = !compareFormData(initialFormData, currentFormData);
});

// 对比FormData内容
function compareFormData(initialData, currentData) {
    for (let [key, value] of initialData.entries()) {
        if (currentData.get(key) !== value) {
            return false;
        }
    }
    return true;
}

方法二:记录初始值并对比当前值

在表单加载时记录初始值,在用户提交或离开表单时对比当前值。

// 获取表单和表单元素
const form = document.querySelector("form");
const initialData = {};

// 记录初始值
form.querySelectorAll("input, textarea, select").forEach((el) => {
    initialData[el.name] = el.value;
});

// 检查表单变化
function isFormChanged() {
    return Array.from(form.elements).some((el) => el.value !== initialData[el.name]);
}

// 示例:在提交或离开页面时检查
form.addEventListener("submit", (event) => {
    if (isFormChanged()) {
        console.log("表单已更改");
    } else {
        console.log("表单未更改");
    }
});

方法三:利用dataset存储初始值

将每个表单元素的初始值存储在 dataset 中,然后监听变化并对比 dataset。

// 保存初始值到dataset
document.querySelectorAll("form input, form textarea, form select").forEach((el) => {
    el.dataset.initialValue = el.value;
});

// 检查是否有改动
function isFormChanged() {
    return Array.from(document.querySelectorAll("form input, form textarea, form select")).some(
        (el) => el.value !== el.dataset.initialValue
    );
}

// 示例:检查表单变化
if (isFormChanged()) {
    console.log("表单已更改");
} else {
    console.log("表单未更改");
}

选择适合你的场景的方法即可,这些方法都可以准确检测表单内容是否有更改。

评论