Question

的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。谢谢

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

Answer 2

您必须在<div>中使用属性hidden创建错误消息。

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

hidden属性使元素隐藏。

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

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

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

Answer 3

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

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

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

Answer 4

您可以提供愚蠢的示例代码用过＆＃34;＆＃34;显示错误消息。

＆＃13;

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

＆＃13;

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

4 个答案: