在表单提交前检查字段脏状态，最直接的方法是在 submit 事件中遍历表单元素，通过比较其当前值与初始值来判断是否被修改。具体做法是监听表单的 onsubmit 事件，在回调中逐个检查 input、textarea 等元素的 value 属性，若发现脏数据则阻止默认提交行为并给出提示。
如何获取表单字段的初始值用于对比？
要判断字段是否变脏，必须拥有“干净”状态的基准值。对于静态页面，通常使用 HTML 属性 defaultValue 作为基准；对于动态渲染或 AJAX 加载的数据，需要在初始化时手动将原始数据存储在一个自定义属性（如 data-original-value）或 JavaScript 对象中，以便后续进行比对。
<script>
const form = document.getElementById('myForm');
// 初始化：确保所有输入框都有原始值记录
function initForm() {
const inputs = form.querySelectorAll('input, textarea, select');
inputs.forEach(input => {
if (!input.hasAttribute('data-original-value')) {
input.setAttribute('data-original-value', input.value);
}
});
}
initForm();
form.addEventListener('submit', function(e) {
let isDirty = false;
const inputs = form.querySelectorAll('input, textarea, select');
inputs.forEach(input => {
const originalValue = input.getAttribute('data-original-value');
// 处理 null/undefined 情况，统一转为字符串比较
if (String(input.value) !== String(originalValue)) {
isDirty = true;
console.log(`Field '${input.name}' has been modified.`);
}
});
if (isDirty) {
e.preventDefault();
alert('You have unsaved changes! Please save before submitting.');
}
});
</script>
如何处理复选框和单选按钮的脏状态检测？
复选框（checkbox）和单选按钮（radio）的状态不由 value 决定，而是由 checked 属性决定。因此，在检测这类控件的脏状态时，需要对比当前的 checked 布尔值与初始记录的 checked 状态，而不是比较它们的文本值。
<script>
const settingsForm = document.getElementById('settingsForm');
// 初始化特殊控件的原始状态
function initSpecialInputs() {
const checkboxes = settingsForm.querySelectorAll('input[type="checkbox"]');
const radios = settingsForm.querySelectorAll('input[type="radio"]');
checkboxes.forEach(cb => {
cb.setAttribute('data-original-checked', cb.checked);
});
radios.forEach(radio => {
// 为每个 radio 组单独存储初始选中状态
if (!radio.hasAttribute('data-original-checked')) {
radio.setAttribute('data-original-checked', radio.checked);
}
});
}
initSpecialInputs();
settingsForm.addEventListener('submit', function(e) {
let isDirty = false;
// 检查 checkbox
settingsForm.querySelectorAll('input[type="checkbox"]').forEach(cb => {
if (cb.checked !== cb.getAttribute('data-original-checked') === 'true') {
isDirty = true;
}
});
// 检查 radio
settingsForm.querySelectorAll('input[type="radio"]').forEach(radio => {
if (radio.checked !== radio.getAttribute('data-original-checked') === 'true') {
isDirty = true;
}
});
if (isDirty) {
e.preventDefault();
alert('Settings changed. Please confirm to submit.');
}
});
</script>
当用户尝试关闭标签页时如何拦截未保存的更改？
除了表单提交事件，开发者还常需要在用户意外关闭标签页或刷新页面时拦截未保存的更改。这可以通过监听 beforeunload 事件来实现。在该事件中，如果检测到表单存在脏数据，可以设置 window.event.returnValue 为一个非空字符串，从而触发浏览器的原生确认对话框，防止数据丢失。
<script>
let hasUnsavedChanges = false;
// 假设前面已经实现了脏状态检测逻辑
// 这里简化演示：当任何输入变化时标记为有未保存更改
document.querySelectorAll('input').forEach(input => {
input.addEventListener('input', () => {
hasUnsavedChanges = true;
});
});
window.addEventListener('beforeunload', function(e) {
if (hasUnsavedChanges) {
// 现代浏览器要求 returnValue 为非空字符串才能显示确认框
e.preventDefault();
e.returnValue = '';
}
});
</script>
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
