Question

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

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>

JS

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的字符串。不在第一个位置的应该评估为true，但无论输入输入什么，它都不会。我在这里错过了什么？我确定这是愚蠢的事情。

我已经确认该函数已被调用，并且总是通过使用警报（有效）进行故障排除来返回valid = false。

Answer 1

无论#submit值是多少，您都将valid和valid设为false。

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

应该是

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

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

Answer 2

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

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

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

还有其他问题：

禁用提交按钮不会停止提交的表单。验证也需要在提交时进行
您不应该为任何表单控件提供名称“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>

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

2 个答案: