Question

如果电子邮件地址无效，我想在屏幕上显示“请输入有效的电子邮件地址”的消息。 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>

Answer 1

表单无论发生什么都在提交，因为您没有阻止默认操作。这就是消息出现（工作）和消失（页面重新加载）的原因

function validateEmail(e) {
    if( valid ) { /* stuff */ }
    else {
      e.preventDefault(); // Prevent form submission
    /* etc */

Answer 2

Working jsFiddle here.

首先，如果您要保留console.log，可以在你的else语句中添加大括号 - 它可以在没有它们的情况下工作，但只有一行受影响，而后面有两行，所以innerHTML无论if / else是什么都要改变。

另外，添加Javascript＆＃39; event.preventDefault() 以阻止表单在发出else语句时提交：

else {
   event.preventDefault();
   document.getElementById("message").innerHTML = "Please enter a valid email address";
}

Answer 3

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

Answer 4

无论声明的结果如何，表格都会提交。代码正在运行，但页面正由表单提交重新加载。添加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>

innerHTML正在处理body元素而不是p元素

4 个答案: