0

如果电子邮件地址无效，我想在屏幕上显示一条消息“请输入有效的电子邮件地址”。body 元素的 innerHTML 语句工作正常，但我用于 p 元素的语句不起作用。

有一次我在测试它时，看到消息“请输入一个有效的电子邮件地址”显示，然后在我单击“无效”警告框的确定按钮后，该消息消失了。

JavaScript：

<script type="text/javascript">      
function validateEmail() {
    var emailRule =  /^(([^<>()[\]\\.,;:\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,}))$/;   
    if (emailRule.test(document.forms[0].email.value)) {
       document.getElementById("body").innerHTML = "Thank you for signing up for our newsletter! You will recieve a confirmation email shortly.";
       setTimeout("window.close()", 3000);
    }
    else
       window.alert("not valid");       //for debugging
       document.getElementById("message").innerHTML = "Please enter a valid email address";
}  
</script>

HTML：

</head>
<body id="body">
<p>If you sign up for our newsletter you will be entered into a drawing to win free clothes every month!</p>
<br>
<p id="message"> </p>
<form action="" onsubmit="validateEmail();">
<p>Email: <input type="text" name="email"/>
<input type="submit" value="Sign up"/></p>
<br>
<input type="button" value="No thanks" onclick="window.close()"/>
<br>
</form>
<p><a href="privacy.html">Privacy Policy</a></p>
</body>
</html>
4

4 回答 4

2

该表单不提交任何内容，因为您不阻止默认操作。这就是消息出现（工作）和消失（页面重新加载）的原因

function validateEmail(e) {
    if( valid ) { /* stuff */ }
    else {
      e.preventDefault(); // Prevent form submission
    /* etc */
于 2013-04-25T15:08:16.020 回答
1

在这里工作 jsFiddle。

首先，如果您要保留 console.log，请在 else 语句中添加大括号 - 它可以在没有它们的情况下工作，但仅影响之后的一行，而您之后有两行，因此无论如果/其他。

此外，如果出现 else 语句，添加 Javascript 的event.preventDefault()以阻止表单提交：

else {
   event.preventDefault();
   document.getElementById("message").innerHTML = "Please enter a valid email address";
}
于 2013-04-25T15:09:07.477 回答
0

无论语句的结果如何，表单都在提交。代码正在运行，但表单提交正在重新加载页面。添加return false;修复问题：

<script type="text/javascript">


function validateEmail() {
    var emailRule =  /^(([^<>()[\]\\.,;:\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,}))$/;

    if (emailRule.test(document.forms[0].email.value)) {
         document.getElementById("body").innerHTML = "Thank you for signing up for our newsletter! You will recieve a confirmation email shortly.";
         setTimeout("window.close()", 3000);
    }
    else
         window.alert("not valid");       //for debugging
         document.getElementById("message").innerHTML = "Please enter a valid email address";
         return false; // this stops the form from submitting, and the page from reloading.
}

</script>

</head>
<body id="body">
<p>If you sign up for our newsletter you will be entered into a drawing to win free clothes every month!</p>
<br>
<p id="message"> </p>
<form action="" onsubmit="validateEmail();">
<p>Email: <input type="text" name="email"/>
<input type="submit" value="Sign up"/></p>
<br>
<input type="button" value="No thanks" onclick="window.close()"/>
<br>
</form>
<p><a href="privacy.html">Privacy Policy</a></p>
</body>
</html>
于 2013-04-25T15:13:12.557 回答
0 
<script type="text/javascript">


function validateEmail() {
    var emailRule =  /^(([^<>()[\]\\.,;:\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,}))$/;

    if (emailRule.test(document.forms[0].email.value)) {
         document.getElementById("body").innerHTML = "Thank you for signing up for our newsletter! You will recieve a confirmation email shortly.";
         setTimeout("window.close()", 3000);
    }
    else
    {
         window.alert("not valid");       //for debugging
         document.getElementById("message").innerHTML = "Please enter a valid email address";
    }
}

</script>

</head>
<body id="body">
<p>If you sign up for our newsletter you will be entered into a drawing to win free clothes every month!</p>
<br>
<p id="message"></p>
<form action="" onsubmit="validateEmail();">
<p>Email: <input type="text" name="email"/>
<input type="submit" value="Sign up"/></p>
<br>
<input type="button" value="No thanks" onclick="window.close()"/>
<br>
</form>
<p><a href="privacy.html">Privacy Policy</a></p>
</body>
</html>
于 2013-04-25T15:03:16.820 回答