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); 

错误消息总是相同的：类型错误：email.indexOf不函数 at 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>