如何在所有输入框填写完成前阻止数据存入LocalStorage？

嘿，我一眼就看出问题所在了——你的localStorage.setItem写在循环内部，这就导致只要第一个输入框（登录名）通过验证，代码就会直接把数据存进LocalStorage，完全没等检查第二个输入框（密码）！咱们来一步步修复这个问题：

问题分析 #

在你的原代码里，循环遍历输入框时，只要第一个输入框（i=0）的内容不为空且符合正则，就会立刻执行localStorage.setItem，哪怕第二个输入框是空的也不会阻止。break只能跳出循环，但存数据的操作已经执行了。

解决方案：先完成全量验证，再执行存储 #

我们需要先把所有输入框的验证做完，确认所有字段都合法之后，再把数据存入LocalStorage。具体步骤：

• 定义一个标记变量，用来记录表单是否验证通过
• 遍历所有输入框，检查每个字段的合法性，只要有一个字段不合法，就标记为验证失败并提示用户
• 只有当所有字段都验证通过时，才执行LocalStorage存储操作

另外，你的正则表达式写法有点问题——字符集里的|会被当成普通字符匹配，而不是“或”的逻辑。如果你的需求是只允许字母、数字、下划线、空格和引号，正则可以简化成/[^\w\s'"]/（\w已经包含了字母、数字和下划线）。

修改后的完整代码 #

function validate() {
  var userInput = document.querySelectorAll(".form__input");
  // 修正正则表达式，匹配不允许的字符
  var regex = /[^\w\s'"]/;
  // 初始化验证通过标记
  let isValid = true;

  for(var i = 0; i < userInput.length; i++) {
    if(userInput[i].value === "") {
      alert("Please fill all required fields!");
      isValid = false;
      break; // 遇到第一个错误就停止检查
    } else if(userInput[i].value.match(regex)) {
      alert("Please use appropriate symbols!");
      isValid = false;
      break;
    }
  }

  // 只有所有验证都通过，才存储数据
  if(isValid) {
    localStorage.setItem('Login', userInput[0].value);
    localStorage.setItem('Password', userInput[1].value); // 补充密码字段的存储
  }
}

关键修改点说明 #

• 把localStorage.setItem移到了循环外部，并用isValid标记控制是否执行，确保只有全量验证通过才会存储
• 修正了正则表达式的错误写法，保证验证逻辑符合预期
• 补充了密码字段的LocalStorage存储（原代码只存了登录名，应该是遗漏了）

这样修改后，只要有任何一个输入框为空或者包含非法字符，都不会把数据存入LocalStorage，完美解决你的问题！

内容的提问来源于stack exchange，提问作者Vladyslav Plakhuta