如何实现基于localStorage的表单实时验证，控制Next Button启用/禁用

云上老周

2026-7-12

实现表单输入实时验证并控制按钮状态

要让验证逻辑在用户每次修改内容时实时执行，核心是给名字和姓氏的输入框绑定输入事件监听，每次用户输入时自动触发验证逻辑。具体实现步骤如下：

把验证逻辑封装成独立函数，方便重复调用
给两个输入框绑定input事件，每次输入时先将值存入localStorage，再执行验证
页面初始化时也执行一次验证，确保按钮初始状态正确

完整代码示例：

// 获取DOM元素
const firstNameInput = document.getElementById('first_name_input');
const lastNameInput = document.getElementById('last_name_input');
const continueBtn = document.getElementById('continue_button');

// 封装验证函数
function checkAndUpdateButtonStatus() {
  const name = localStorage.getItem('name'); 
  const last_name = localStorage.getItem('last_name'); 
  // 补充判断空字符串，避免输入空格误判为已填写
  continueBtn.disabled = (name === null || name.trim() === '' || last_name === null || last_name.trim() === '');
}

// 给输入框绑定输入事件，实时更新存储并验证
firstNameInput.addEventListener('input', function() {
  localStorage.setItem('name', this.value.trim());
  checkAndUpdateButtonStatus();
});

lastNameInput.addEventListener('input', function() {
  localStorage.setItem('last_name', this.value.trim());
  checkAndUpdateButtonStatus();
});

// 页面加载时初始化按钮状态
window.addEventListener('load', checkAndUpdateButtonStatus);

补充说明：