為什么這個js IF條件永遠不會評估為真？

Question

我正在研究一個簡單的驗證腳本，以確保用戶輸入的內容至少看起來像一個有效的電子郵件地址。 這是一個簡化版本，可以在jsbin測試在這里 。

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

無論valid是什么，您都將#submit和valid設置為false。

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

應該

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

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

Answer 2

您的一個問題是這部分測試：

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

正如其他人所指出的，在搜索方法中 ，“。” 用於正則表達式，因此等同於/./ ，它匹配任何字符，而不是句點。 當第一個字符為0時，測試總是返回false "\\\\."使用"\\\\." 為了匹配一個句點，它用於創建一個等同於/\\./的正則表達式。

還有其他問題：

1. 禁用提交按鈕不會停止提交的表單。 驗證也需要在提交時發生
2. 您不應該為任何表單控件提供“提交”名稱，因為它會掩蓋表單的提交方法
3. 輸入“有效”電子郵件地址時，將清除錯誤文本，但如果地址無效，則不會替換文本
4. 由於默認情況下禁用提交按鈕，因此如果腳本失敗，則永遠不會啟用它。 最好確保表單在沒有任何腳本的情況下工作，然后使用腳本添加驗證，這樣如果有任何失敗，表單仍然可用。

其中大部分已在下面的示例中修復。 它對表單和輸入使用相同的偵聽器，因此使用一些邏輯來根據調用的偵聽器獲取值。

 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>