Question

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

<!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>

Answer 1

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

＆＃13;

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

＆＃13;

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

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

电子邮件验证：JavaScript

1 个答案: