在 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("表单未更改");
}
选择适合你的场景的方法即可,这些方法都可以准确检测表单内容是否有更改。