JavaScript表单验证异常：重复提示与误报问题求助

嘿，我来帮你搞定这两个表单验证的问题，咱们一个个捋清楚：

你的核心问题 #

1. 重复点击提交按钮会生成一堆重复的错误提示，想让错误只显示一次
2. 明明填完了用户名和密码，控制台还是会闪过错误日志，搞不清哪里出了问题

先拆解一下你代码里的几个关键问题：

问题1：重复生成错误提示的原因与解决 #

你每次点击提交，都会创建一个新的error-message元素并加到error-container里，完全没处理之前已经存在的错误提示。解决这个很简单——每次验证前先清空错误容器，这样不管点多少次，最多只会显示当前的错误提示，不会堆一堆重复内容。

问题2：填完内容仍出错误日志的坑 #

这里藏了好几个小问题：

1. 变量获取时机错误：你把uname和pword定义在函数外面，页面加载时就获取了输入框的初始空值，之后用户输入内容，这两个变量也不会更新！必须把这两行放到validateMe函数内部，每次点击提交时才重新获取当前输入的值。
2. 条件判断逻辑混乱：原代码里的if (uname.length || pword.length < 1 || '')逻辑完全不对，意思是「只要用户名有长度 或者 密码长度小于1 或者 空字符串」，这和你想要的「用户名或密码为空就报错」完全背道而驰。正确的判断应该是!uname || !pword（空字符串在JS里是假值，取反即为true），或者更明确的uname.length === 0 || pword.length === 0。
3. 拼写错误：你JS里写的是userame（少了一个字母r），但HTML里输入框的name属性是username，这会导致你根本拿不到用户名的输入值！

修改后的完整代码 #

JavaScript 部分 #

function validateMe(e) {
  // 每次点击提交都重新获取当前输入框的最新值
  var uname = document.forms['signIn']['username'].value;
  var pword = document.forms['signIn']['password'].value;
  
  var errorContainer = document.getElementById('error-container');
  // 先清空之前的错误提示，避免重复
  errorContainer.innerHTML = '';

  // 正确判断：用户名或密码为空时触发错误提示
  if (!uname || !pword) {
    var errorMsg = document.createElement('div');
    errorMsg.className = 'error-message';
    errorMsg.innerHTML = '<span class="heading-large">Please enter a valid username or password</span>';
    errorContainer.appendChild(errorMsg);
    console.log('An error occurred');
    // 阻止表单默认提交行为，避免页面跳转或刷新
    e.preventDefault();
    return false;
  }
}

HTML 部分 #

注意按钮的onclick要传递event对象，这样才能正常阻止表单默认提交：

<form id="signIn" action='#'>
  <div class="boxed left-floater">
    <h1 class="heading-large margin-top">Sign in</h1>
    <div id="error-container"></div>
    <div class="form-group">
      <label class="form-label-bold" for="username">Username</label>
      <input class="form-control log-in-form-control" id="username" name="username" type="text">
    </div>
    <div class="form-group">
      <label class="form-label-bold" for="password">Password</label>
      <input class="form-control log-in-form-control" id="password" type="password" name="password">
    </div>
    <div>
      <a class="right-floater forgotten-password" href="forgottenpassword.html">Forgotten Password</a>
      <button class="button clear right-floater" type="submit" onclick="validateMe(event);">Sign In</button>
    </div>
  </div>
</form>

这样修改后：

• 每次点击提交都会先清空旧错误，只会显示最新的一条错误提示
• 只有当用户名或密码为空时才会触发错误，填完内容后不会再出现错误日志
• 修正了拼写错误，确保能正确获取输入值

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