如果返回 false，则在 JavaScript 中打印出 div答案

【问题标题】：print out div in JavaScript if return false如果返回 false，则在 JavaScript 中打印出 div
【发布时间】：2015-02-25 09:18:44
【问题描述】：

index.php

 <body align="center">
    <form  action="index2.php" method="post" onsubmit="return ValidateEmail()">
    <div class="container">
    <h1> TEST </h1>
    <br>
        <label><a href="">LOG IN WITH FACEBOOK</a></label>
        <br>
        <br>
        <label><a href="">CHANGE FACEBOOK ACCOUNT</a></label>
        <br>
        <br>
        <label><input id="Username" type="text" placeholder="name" name="name" maxlength="30"/></label>
        <br>
        <br>
        <label><input id="Useremail" type="text" placeholder="email" name="email"/></label>
        <br>
        <br>
        <label>
        <select name="gender">
        <option value="male">male</option>
        <option value="female">female</option>
        </select>
        </label>
        <br>
        <br>

        <input type="submit" name="submit" value="Sign Up"/>
    </form><!--end of form -->
</body>

JavaScript

 <script type="text/javascript">

function IsValidEmail(email) {
var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
return expr.test(email);
};

function ValidateEmail() {
var email = document.getElementById("Useremail").value;
if (!IsValidEmail(email)) {
    // alert("Invalid email address.");
    return false;
    !-- print out div that show this alert text-->
    }
    else {
    return true;
    !-- else return true dont submit the post-->
    }
}

</script>

我的意图是当用户不输入或输入错误的电子邮件时，它会在 html div 中弹出一个文本或一个框并告诉他们他们没有输入正确的电子邮件，我将如何让 javasctrip 打印出一个 div 你的电子邮件是无效的？？如果返回 true，则提交帖子，否则不发布。而且我不想使用 jquery。谢谢

【问题讨论】：

在表单中添加一个div并给出错误信息

标签： javascript html

【解决方案1】：

为这样的弹出文本添加一个 Div

<div id="emailMessage"></div>

然后用这个替换你的 JavaScript 代码

function IsValidEmail(email) {
        var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        return expr.test(email);
};

function ValidateEmail() {
        var email = document.getElementById("Useremail").value;
        if (!IsValidEmail(email)) {
                document.getElementById("emailMessage").innerHTML = "Invalid email address.";
                //alert("Invalid email address.");
                return false;
        } else {
               document.getElementById("emailMessage").innerHTML = "";
                return true;
        }
}

【讨论】：

【解决方案2】：

您必须在<div> 中创建一个带有hidden 属性的错误消息。

<div id="errorMessage" hidden>
    Error message here...
</div>

hidden 属性使元素被隐藏。

如果用户输入了无效的电子邮件，您可以将div错误消息的隐藏设置为false。

document.getElementById("errorMessage").hidden=false;

将该代码放在 javascript 的 return false; 之后/之前。

【讨论】：

【解决方案3】：

更简单的替代方法是使用此 SO 线程中建议的电子邮件输入的 HTML5 验证：HTML5 Email Validation。

只需使用输入类型电子邮件，验证将由浏览器处理：

<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>

【讨论】：

【解决方案4】：

您可以参考愚蠢的示例代码使用“”来显示错误信息。

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">

function IsValidEmail(email) {
var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
return expr.test(email); 
}

function myFunction() {

var email = document.getElementById("Useremail").value;


if (!IsValidEmail(email)) {
    document.getElementById("errorMsg").innerHTML = "Invalid email address.";   
      window.stop();
      return false;
   <!-- print out div that show this alert text-->
    }
    else {
     document.getElementById("errorMsg").innerHTML = "";
    return true;
    <!-- else return true dont submit the post-->
    }  
}

</script>


    <form   method="post"  action="index2.php" onsubmit="return myFunction()" >
    <div class="container">
    <h1> AUG SWIFT TEST </h1>
    <br>
        <label><a href="">LOG IN WITH FACEBOOK</a></label>
        <br>
        <br>
        <label><a href="">CHANGE FACEBOOK ACCOUNT</a></label>
        <br>
        <br>
        <label><input id="Username" type="text" placeholder="name" name="name" maxlength="30"/></label>
        <br>
        <br>
        <label><input id="Useremail" type="text" placeholder="email" name="email"/></label><div id="errorMsg"></div>
        <br>
        <br>
        <label>
        <select name="gender">
        <option value="male">male</option>
        <option value="female">female</option>
        </select>
        </label>
        <br>
        <br>

        <input type="submit" onClick="myFunction()" name="submit" value="Sign Up"/>
    </form><!--end of form -->
</body>

</html>

【讨论】：