如何用JavaScript解决表单重复提交、结果追加及校验失效问题

修复要点 #

• 解决提交结果追加问题：删除全局存储历史数据的titles数组，每次提交直接读取当前输入值生成展示内容，避免旧数据残留
• 解决校验函数失效问题：修正原函数中不存在的user.title错误引用，调整为分别校验用户名、密码输入框的内容，优化正则规则为匹配全量输入仅为英文字母
• 解决重复提交问题：添加提交状态锁，点击提交后立即禁用按钮，待逻辑执行完成后再恢复可用，同时增加空值拦截逻辑，输入为空时不执行提交

完整可运行代码 #

<html>
<head></head>
<body>
  <div class="wb-stl-custom3">
    <label for="username">用户名:</label>
  </div>
  <div>
    <input id="username" type="text" maxlength="15" onkeyup="CHECKER()">
  </div>
  <div class="wb-stl-custom3">
    <label for="password">密码:</label>
  </div>
  <div>
    <input id="password" type="password" maxlength="30" onkeyup="CHECKER()">
  </div>
  <input id="submitBtn" type="button" value="提交" onclick="insert()" />
  <div class="wb-stl-custom3" id="display"></div>
  <script>
    var usernameInput = document.getElementById("username");
    var passwordBox = document.getElementById("password");
    var messageBox = document.getElementById("display");
    var submitBtn = document.getElementById("submitBtn");
    // 提交状态锁
    var isSubmitting = false;

    function CHECKER() {
      // 校验用户名仅允许英文字母，可按需调整正则规则
      if (usernameInput.value && !usernameInput.value.match(/^[a-zA-Z]+$/)) {
        usernameInput.value = "";
        alert("请输入仅包含英文字母的有效值");
      }
      // 校验密码仅允许英文字母，可按需调整正则规则
      if (passwordBox.value && !passwordBox.value.match(/^[a-zA-Z]+$/)) {
        passwordBox.value = "";
        alert("请输入仅包含英文字母的有效值");
      }
    }

    function insert() {
      // 拦截重复提交和空值提交
      if (isSubmitting || !usernameInput.value || !passwordBox.value) return;
      isSubmitting = true;
      submitBtn.disabled = true;
      
      clearAndShow();
      
      // 恢复提交状态
      isSubmitting = false;
      submitBtn.disabled = false;
    }

    function clearAndShow() {
      const username = usernameInput.value;
      const password = passwordBox.value;
      // 清空输入框
      usernameInput.value = "";
      passwordBox.value = "";
      // 直接覆盖展示内容
      messageBox.innerHTML = "您输入的用户名和密码为：" + username + "，" + password;
    }
  </script>
</body>
</html>

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