电子邮件验证：JavaScript答案

【问题标题】：Email Validation: JavaScript电子邮件验证：JavaScript
【发布时间】：2023-04-06 07:22:02
【问题描述】：

我正在尝试创建一个验证电子邮件地址的表单。 “提交”按钮不起作用，或者是导致问题的电子邮件验证脚本。我是编码新手，需要一些帮助。提前谢谢！

<!doctype html> 
<html>
  <head>
    <title>JQuery Lesson</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script        type="text/javascript"    
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> 
</script>
    <style>  
        #wrapper{
        margin: 0 auto;
        width: 500px;
        font-family: helvetica; 
        font-size: 1.2em;
        }
        #error {
        color: red;
        margin: 20px;
        }   
        #email {
        height: 30px;
        width: 300px;
        border-radius: 20px;
        padding-top: 10px;  
        margin-bottom: 15px;
        font-size: 1.2em;
        float: none;
        margin: 0 auto;
        }
        #phone {
        height: 30px;
        width: 300px;
        border-radius: 20px;
        padding-top: 10px; 
        margin-bottom: 15px;
        font-size: 1.2em;
        float: none;
        margin: 0 auto;
        }
        #password {
        height: 30px;
        width: 300px;
        border-radius: 20px;
        padding-top: 10px; 
        margin-bottom: 15px;
        font-size: 1.3em;
        float: none;
        margin: 0 auto;
        }
        #confirmPassword {
        height: 30px;
        width: 300px;
        border-radius: 20px;
        padding-top: 10px; 
        margin-bottom: 15px;
        font-size: 1.3em;
        float: none;
        margin: 0 auto;
        }
        .spacer {
        font-size:0;
        height: 20px; 
        line-height: 0;
        }
        label {
        width: 90px;
        float:left;
        padding-top: 10px;
        }
        #submitButton {
        height: 30px; 
        width: 90px; 
        font-size: 1.1em;
        float: none;
        margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id= "wrapper"; >
        <form id = "validationForm">
            <div id = "error"></div>
            <label for = "email"> Email </label>
            <input id = "email" />
            <div class="spacer"></div>
            <label for = "phone"> Phone </label>
            <input id = "phone" />
            <div class="spacer"></div>
            <label for = "password"> Password </label>
            <input id = "password", type = "password" />
            <div class="spacer"></div>
            <label for = "confirm password"> Confirm Password </label>
            <input id = "confirmPassword", type = "password" />
            <div class="spacer"></div>
            <button id = "submitButton" type="submit" value="submit"> Submit  
</button>
        </form>
    </div>
    <script>
        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);
        };
            if (!validEmail($("#email").val()))) {
                    $("#error").html("Please enter a valid email address.");
            }   
        ;
    </script>
</body>

</html>

【问题讨论】：

你试过简单的<input type="email">吗？
使用<input type="email" /> 接受电子邮件地址，您无需编写任何 JavaScript。（还有一个好处是不会像这个正则表达式那样拒绝有效的电子邮件地址。）
你在哪里调用了这个 validateEmail() 函数？您需要提供提交表单方法并在那里调用此验证。

标签： javascript jquery html email-validation

【解决方案1】：

首先，validEmail 函数内部存在错误。试试这个：

function validEmail(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);
};

另外，您需要在表单上添加一个事件监听器。

解决方案：https://jsbin.com/rowecoboxi/edit?html,js,output

【讨论】：