在 JavaScript 中提交时值的长度验证错误 [关闭]

Question

天哪，我真是个新手！只有逻辑运算符错误。 （应该是|| 而不是&&）。

非常非常感谢。

---

我的 DOM HTML 项目有问题。

我正在尝试进行名称文本输入，其长度应在 2-36 个字符内。如果用户点击提交并且条件不满足，它会在页面顶部显示一个alert()，表示他们应该输入2-36个字符。但是，addEventLisenter() 无法正确验证用户的输入。

我不允许使用 HTML5 验证器，因此 minlength 和 maxlength 不能与 <input> 标记内联使用

这是我的代码：

var firstName = document.getElementById('firstName').value.length;

document.getElementById("submit").addEventListener("click", function() {
  if (firstName < 2 && firstName > 30) {
    alert("Please input 2-36 characters");
  }
});

<form>
  <div class="firstNameDiv">
    <label class="required" for="firstName">First Name</label><br>
    <input type="text" id="firstName" name="firstName" placeholder="2-36 characters only" required>
  </div>

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

JS 小提琴： https://jsfiddle.net/zodiac1710/gLu6398h/2/

Answer 1

把你的 JS 改成：

document.getElementById("submit").addEventListener("click", function(event) {
  var firstName = document.getElementById('firstName').value.length;
  if (firstName < 2 || firstName > 30) {
    alert("Please input 2-36 characters");
    event.preventDefault();
  }
});

您附加到事件的匿名函数之外的任何代码都会在代码加载时运行一次。由于此时输入可能为空，firstname 将始终为 0。

还可以考虑研究 ES6 功能，例如 const、let 和箭头函数。

另一个错误是在条件中使用&& 而不是||。你说你想alert 如果它短于 2 并且 长于 30。相反它应该是 或。感谢@Rob Moll 指出这一点。

最后您需要preventDefault 以确保浏览器实际上并未发送数据。