为什么这个 js IF 条件永远不会评估为真？答案

【问题标题】：Why does this js IF condition never evaluate to true?为什么这个 js IF 条件永远不会评估为真？
【发布时间】：2017-03-25 22:25:53
【问题描述】：

我正在编写一个简单的验证脚本，以确保用户输入的内容至少看起来像一个有效的电子邮件地址。这是一个简化版，可以在jsbinhere上测试。

HTML：

<form name="emailForm" action="whatever.php" method="post">
  <input name="email" id="email" type="text" onkeyup="checkEmail()" />
  <input type="submit" name="submit" id="submit" value="submit" disabled />
</form>
<div id="errorMsg">
  A valid email address is required.
</div>

function checkEmail() {
  var email = document.getElementById("email").value;
  var valid = false;
  if (email.length > 5 && email.search("@") > 0 && email.search(".") > 0) {
    valid = true;
    document.getElementById("errorMsg").innerHTML = "";
  }
  document.getElementById("submit").disabled = valid == false;
}

我的期望是任何长度超过 5 个字符且包含 @ 和 a 的字符串。不在第一个位置的应该评估为真，但无论在输入中输入什么它都不会。我在这里想念什么？我敢肯定这很愚蠢。

我已通过使用 alert(valid) 进行故障排除，确认该函数被调用并始终返回 valid=false。

【问题讨论】：

搜索在做什么？
我认为您要查找的方法是indexOf("@")，而不是搜索
. 是一个匹配任何字母数字符号或字符的元字符...
rt*m :) -> str.search(regexp): "search() 方法执行搜索正则表达式和此 String 对象之间的匹配项。", @ 987654328@:"一个正则表达式对象。如果传入一个非RegExp对象obj，则通过new RegExp(obj)隐式转换为一个RegExp。"，返回值："正则表达式和给定字符串之间的第一个匹配项的索引；如果未找到，则为 -1。" -> "." 匹配任何字符，因此 email.search(".") 将始终返回零。
请注意，禁用提交按钮不会停止提交表单。您应该在表单的提交处理程序上设置监听器并在那里取消提交。

标签： javascript

【解决方案1】：

无论valid 的值是什么，您都将#submit 和valid 设置为false。

document.getElementById("submit").disabled = valid = false;

应该是

document.getElementById("submit").disabled = !valid;

此外，您应该使用indexOf 而不是搜索，0 是indexOf 和search 的完全有效索引（您应该使用>= 而不是>）

【讨论】：

我实际上已经在 jsbin 上将其更改为 valid == false 并忘记在问题中更新它。我会解决的。我在许多其他函数中使用带有 == 的相同语句，没有任何问题。我试试 indexOf。
虽然 0 是有效索引，但 0 位置不是电子邮件地址中字符的有效位置，这是我的想法。
indexOf 工作正常。搜索正在处理“。”与最初问题的 cmets 中所述不同。

【解决方案2】：

您的问题之一是这部分测试：

 && email.search(".") > 0

正如其他人指出的那样，在search method 中，“。”用于正则表达式，因此相当于/./，它匹配任何字符，而不是句点。测试总是返回 false，因为第一个字符为 0。使用 "\\." 匹配句点，它用于创建等效于 /\./ 的正则表达式。

还有其他问题：

禁用提交按钮不会停止提交表单。验证也需要在提交时进行
不应将任何表单控件命名为“submit”，因为它会掩盖表单的提交方法
输入“有效”电子邮件地址时，错误文本会被清除，但如果地址无效，文本不会被替换
由于默认情况下禁用提交按钮，如果脚本失败，它永远不会启用。最好确保表单在没有任何脚本的情况下工作，然后使用脚本添加验证，这样如果出现任何故障，表单仍然可以正常工作。

其中大部分已在下面的示例中修复。它对表单和输入使用相同的侦听器，因此使用一些逻辑来根据调用的侦听器获取值。

function checkEmail(el) {
  var form = el.form || el;
  var email = form.email.value;
  var valid = false;

  if (email.length > 5 && email.search("@") > 0 && email.search("\\.") > 0) {
    valid = true;
  }
  document.getElementById("errorMsg").innerHTML = valid? "" : 'A valid email address is required.';
  document.getElementById("submitButton").disabled = !valid;
  return valid;
}

<form onsubmit="return checkEmail(this)">
  <input name="email" onkeyup="checkEmail(this)">
  <input type="submit" id="submitButton" disabled>
</form>
<div id="errorMsg">
  A valid email address is required.
</div>

【讨论】：