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

Posted 2023-05-09

【中文标题】在 JavaScript 中提交时值的长度验证错误 [关闭]

【英文标题】：Error on value's length validation on submit in JavaScript [closed]

【发布时间】：2021-11-05 09:39:16

【问题描述】：

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

非常非常感谢。

---

我的 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/

【问题讨论】：

你需要在事件监听器中获取长度，而不是在页面第一次加载的时候。

获取事件监听器的长度是什么意思？加载页面时，我为value.length 声明一个var。使用adddEventListener("click", function ()....). 意味着只要单击按钮就运行该功能。你能给出一个提示代码吗？

您没有阅读下面发布的答案吗？

另请注意，firstName>30 与您的 36

的警报/占位符不匹配

【参考方案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 以确保浏览器实际上并未发送数据。

【讨论】：

if (firstName < 2 && firstName > 30) 这永远不会返回 true。

你是对的，这是另一个错误

谢谢各位。由于我已经使用运算符调整了 value.length，我希望它会检查 value 但不会。我怎样才能改变条件？

@TienDang 我已经更新了我的答案代码，你这样做了吗？如果还是不行，请更新问题中的代码。

+1 表示event.preventDefault() 在if 中。验证失败时缩短提交的巧妙方法。