javascript電子郵件驗證，無法獲得indexOf工作

Question

這是我的html代碼：

 <input id="email" placeholder="Enter your email" type="email"  required>
 <button type="submit" id="submitButton">SUBMIT</button>

js代碼：

var email = document.getElementById('email');
var submitButton = document.getElementById('submitButton');


submitButton.onclick = function(){
  if(email.value == "")
        alert("Please enter correct email");
        return false;
if(email.indexOf("@") < 1 || email.lastIndexOf(".") - email.indexOf("@") <2)
        alert("Please enter correct email");
        return false;
else
        return(true);

錯誤消息始終相同：TypeError：email.indexOf不是HTMLButtonElement.submitButton.onclick上的函數

Answer 1

您需要輸入元素的值。 email = document.getElementById('email')將返回輸入元素，但不是它的值

進行更改

var email = document.getElementById('email').value ;

Answer 2

如果您要檢查電子郵件。 使用正則表達式更容易做到這一點。 請參閱下面的示例以了解操作方法。

function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}

它使用許多資源參考的基本正則表達式來檢查電子郵件的類型。

 function validateEmail(email) { var re = /^(([^<>()[\\]\\\\.,;:\\s@\\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\\"]+)*)|(\\".+\\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/; return re.test(email); } function validate() { $("#result").text(""); var email = $("#email").val(); if (validateEmail(email)) { $("#result").text(email + " is valid :)"); $("#result").css("color", "green"); } else { $("#result").text(email + " is not valid :("); $("#result").css("color", "red"); } return false; } $("#validate").bind("click", validate); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <p>Enter an email address:</p> <input id='email'> <button type='submit' id='validate'>Validate!</button> </form> <h2 id='result'></h2>