JavaScript提交时输入值长度验证失效问题排查与修复

需求说明 #

• 实现姓名文本输入框长度校验规则，要求输入内容长度在2-36字符之间
• 用户点击提交按钮时若不符合规则，弹出alert()提示用户输入长度需符合2-36字符要求
• 受项目约束无法使用HTML5原生校验能力，不能在<input>标签内使用minlength、maxlength属性实现该规则

原有代码问题点 #

通过addEventListener()绑定提交按钮的点击事件实现校验逻辑时，校验无法正确生效，核心问题如下：

1. 逻辑运算符使用错误：判断条件中应使用||（或）而非&&（且），输入长度不可能同时小于2且大于36，原逻辑永远不会触发提示
2. 输入框长度获取时机错误：在页面加载时就获取输入长度，此时输入框为空，后续用户输入内容不会更新该变量，导致判断永远基于初始空值
3. 附加问题：原判断逻辑中上限值错误写为30，与需求的36不符；未阻止表单默认提交行为，即使校验不通过表单仍会提交

原有代码 #

HTML代码 #

<form>
  <div class="firstNameDiv">
    <label class="required" for="firstName">First Name</label><br>
    <input type="text" id="firstName" name="firstName" placeholder="仅支持输入2-36个字符" required>
  </div>

  <div class="submitDiv">
    <input id="submit" type="submit" value="提交">
  </div>
</form>

错误JavaScript代码 #

// 页面加载时就获取长度，后续用户输入不会更新该值
var firstName = document.getElementById('firstName').value.length;

document.getElementById("submit").addEventListener("click", function() {
  // 逻辑运算符错误，且上限值与需求不符
  if (firstName < 2 && firstName > 30) {
    alert("请输入2-36个字符");
  }
});

修复后可运行JavaScript代码 #

document.getElementById("submit").addEventListener("click", function(e) {
  // 点击提交时实时获取输入内容长度，加trim()避免空格占用字符计数
  const firstNameLength = document.getElementById('firstName').value.trim().length;
  // 修正逻辑运算符和上限数值
  if (firstNameLength < 2 || firstNameLength > 36) {
    // 阻止表单默认提交行为
    e.preventDefault();
    alert("请输入2-36个字符");
  }
});

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