Javascript-电子邮件验证不起作用

Question

我有以下HTML脚本，其中包含CSS和Javascript。 我有一个简单的javascript函数，可以验证我输入的电子邮件。 但是javascript函数根本不会被调用。 有人可以帮忙吗？

 function validateForm() { var x = document.getElementById("email").value; alert(x); var atpos = x.indexOf("@"); var dotpos = x.lastIndexOf("."); if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) { alert("Not a valid e-mail address"); return false; } } 

 <h1>DELIVERY DETAILS</h1> <form id="deliveryDetails"> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"><br> e-mail: <br> <input type="text" id="email"><br> telephone number:<br> <input type="text" name="telephone number"><br> order number:<br> <input type="text" name="order number"><br> order date:<br> <input type="text" name="order date"><br><br> <input type="submit" value="submit" onsumbmit="return validateForm();"> </form> 

Answer 1

提交按钮没有onsubmit事件，表单没有，而是将事件添加到表单中，并且代码也得到了执行：

 function validateForm() { var x = document.getElementById("email").value; alert(x); var atpos = x.indexOf("@"); var dotpos = x.lastIndexOf("."); if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) { alert("Not a valid e-mail address"); return false; } } 

 <h1>DELIVERY DETAILS</h1> <form id="deliveryDetails" onsubmit="return validateForm();"> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"><br> e-mail: <br> <input type="text" id="email"><br> telephone number:<br> <input type="text" name="telephone number"><br> order number:<br> <input type="text" name="order number"><br> order date:<br> <input type="text" name="order date"><br><br> <input type="submit" value="submit" > </form> 

Answer 2

绝对可以，我相信您可以利用HTML5优势，可以使用input email类型并使用CSS进行验证：

<input class="email" type="email"/>

并将相关的CSS valid或invalid ：

.email:valid {
    color: green; //for example
}

.email:invalid {
    color: red; //for example
}

但是就您而言，我不阅读您的函数，也不知道您为什么不使用RegExp进行检查验证。

您可以将click事件绑定到提交按钮：

<input id="submit" type="submit" value="submit"/>

对于附加点击事件：

document.getElementById('submit').addEventListener(`click`,() => {
    validateForm();
}, false);

您的validateForm尚未优化。 你可以这样写：

const validForm = (emailString) => {
    return /^[a-z0-9][a-z0-9-_\.]+@([a-z]|[a-z0-9]?[a-z0-9-]+[a-z0-9])\.[a-z0-9]{2,10}(?:\.[a-z]{2,10})?$/.test(emailString);
}

Answer 3

onsumbmit="return validateForm();"

总结？ 您在那发明了一个词。 无论如何，该事件不会触发该函数，因为onsumbmit不是有效事件。

同样，将事件放在表单（“拥有”事件）而不是按钮上。 即

<form id="deliveryDetails" onsubmit="return validateForm();">

Answer 4

您可以将类型设置为电子邮件，而无需任何其他验证码，例如

<input type="email"  required/>

或使用正则表达式

        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() {
      var email = $("#email").val();

      if (validateEmail(email)) {

      }

$("#validate").bind("click", validate);

HTML

<form>
  <p>Enter an email address:</p>
  <input type="text" id='email'>
  <button type='submit' id='validate'>Validate!</button>
</form>

Answer 5

使用button type ="submit"并使用preventDefault防止按钮的默认行为

 function validateForm(e) { e.preventDefault(); var x = document.getElementById("email").value; var atpos = x.indexOf("@"); var dotpos = x.lastIndexOf("."); if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) { alert("Not a valid e-mail address"); return false; } } 

 <h1>DELIVERY DETAILS</h1> <form id="deliveryDetails"> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"><br> e-mail: <br> <input type="text" id="email"><br> telephone number:<br> <input type="text" name="telephone number"><br> order number:<br> <input type="text" name="order number"><br> order date:<br> <input type="text" name="order date"><br><br> <button type="submit" onclick="validateForm(event)">Submit</button> </form>