innerHTML正在处理body元素，但不是p元素

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

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

的JavaScript：

<script type="text/javascript">  
function validateEmail() { 
    var emailRule = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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>

来源

2013-04-25 user2234760

你知道'else'不关心缩进，只有大括号'{}'？ – 2013-04-25 15:05:48

好点。我会尝试的。然后我再次添加了window.alert语句，因为我有这个问题，所以我认为问题仍然存在。 – user2234760 2013-04-25 15:06:32

@SimonBoudrias if'和'else'在没有{{}'的情况下正常工作，当它的主体中只有一条线时 – Ian 2013-04-25 15:07:00

的形式提交没有什么奥美因为你不阻止默认动作。这就是为什么该消息出现（工作）和消失（页面重载）

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

来源

2013-04-25 15:08:16

这可以工作，但请记住，这是在函数开始时完成的，所以如果验证成功，表单将不得不手动提交。 – kais 2013-04-25 15:17:21

<script type="text/javascript"> 


function validateEmail() { 
    var emailRule = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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-25 15:03:16 Antoine

这给了我“错误的参数数量或无效的属性分配”。 – user2234760 2013-04-25 15:05:38

Working jsFiddle here.

首先，加括号您else语句，如果你要保持的console.log - 它可以在没有它们的情况下工作，但仅在一行之后受到影响，而您之后有两行，因此不管if/else如何，都会更改innerHTML。

此外，添加JavaScript的event.preventDefault()从提交如果发生else语句停止形式：

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

来源

2013-04-25 15:09:07 lifetimes

无论语句的结果的形式提交。代码正在工作，但页面正在通过表单提交重新加载。添加return false;修复了问题：

<script type="text/javascript"> 


function validateEmail() { 
    var emailRule = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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-25 15:13:12 kais

innerHTML正在处理body元素，但不是p元素

回答

相关问题