用于电子邮件验证的Javascript代码，因为用户类型电子邮件不工作

我有一些代码试图在用户键入电子邮件地址时验证其有效性。我有两个div块设置，带有不同的p标记消息-“有效电子邮件地址”和“无效电子邮件地址”。我的JS代码应该根据代码中显示的电子邮件验证函数的结果来更改div块的可见性。我不知道为什么代码不起作用

我以前也尝试过只使用一个p标记（没有文本），并根据验证测试将其内部文本更改为“无效电子邮件地址”或“有效电子邮件地址”。那也没用。我也尝试过以类似的方式使用单个div块，但没有成功

以下是HTML和JS代码：

<p>Email Address</p>
                    <input type="text" name="email address" id="email" oninput="return validate()"><br><br>
                    <script>
                        var email = document.getElementById("email");
                        function validateEmail(email) {
                            var re = "/^([a-zA-Z0-9_\.\-])+\@@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;";
                            return re.test(email);
                        }
                        function validate() {
                            if (validateEmail(document.getElementById("email").value)) {
                                document.getElementById("email_result_valid").style.visibility = "visible";
                                document.getElementById("email_result_valid").style.height = "initial";
                                document.getElementById("email_result_invalid").style.visibility = "hidden";
                                document.getElementById("email_result_invalid").style.height = "0";
                            }
                            else {
                                document.getElementById("email_result_invalid").style.visibility = "visible";
                                document.getElementById("email_result_invalid").style.height = "initial";
                                document.getElementById("email_result_valid").style.visibility = "hidden";
                                document.getElementById("email_result_valid").style.height = "0";
                            }
                        }
                    </script>
                    <div id="email_result_invalid" class="email_verify">
                        <p style="color:red">Invalid email address.</p>
                    </div>
                    <div id="email_result_valid" class="email_verify">
                        <p style="color:green">Valid email address.</p>
                    </div>

---

当我在我的浏览器上测试它时，我尝试在email address输入字段中键入随机输入，并通过开发工具检查两个div标记的CSS，发现div标记的CSS没有变化（即可见性保持隐藏，高度保持为0）

第一个问题是您的

regex

是一个

字符串，其次，对于电子邮件验证来说，它不是一个正确的
regex
。我更改了这两个选项，它可以正常工作，如下所示：


var email=document.getElementById（“电子邮件”）；
函数validateEmail（val）{
变量re=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*）（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]124；（[a-zA Z-0-9]+]；
返回再测试（val）；
}
函数验证（）{
if（validateEmail（email.value））{
document.getElementById（“email\u result\u valid”）.style.visibility=“visible”；
document.getElementById（“email\u result\u valid”）.style.height=“initial”；
document.getElementById（“电子邮件结果无效”）.style.visibility=“隐藏”；
document.getElementById（“电子邮件结果无效”）.style.height=“0”；
}否则{
document.getElementById（“电子邮件结果无效”）.style.visibility=“可见”；
document.getElementById（“email\u result\u invalid”）.style.height=“initial”；
document.getElementById（“email\u result\u valid”）.style.visibility=“hidden”；
document.getElementById（“email\u result\u valid”）.style.height=“0”；
}
}
。电子邮件\u验证{
可见性：隐藏；
身高：0；
}
电子邮件地址




无效的电子邮件地址
有效的电子邮件地址
第一个问题是您的
regex
是一个
字符串
，第二个问题是它不是电子邮件验证的正确
regex
。我更改了这两个选项，它可以正常工作，如下所示：


var email=document.getElementById（“电子邮件”）；
函数validateEmail（val）{
变量re=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*）（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]124；（[a-zA Z-0-9]+]；
返回再测试（val）；
}
函数验证（）{
if（validateEmail（email.value））{
document.getElementById（“email\u result\u valid”）.style.visibility=“visible”；
document.getElementById（“email\u result\u valid”）.style.height=“initial”；
document.getElementById（“电子邮件结果无效”）.style.visibility=“隐藏”；
document.getElementById（“电子邮件结果无效”）.style.height=“0”；
}否则{
document.getElementById（“电子邮件结果无效”）.style.visibility=“可见”；
document.getElementById（“email\u result\u invalid”）.style.height=“initial”；
document.getElementById（“email\u result\u valid”）.style.visibility=“hidden”；
document.getElementById（“email\u result\u valid”）.style.height=“0”；
}
}
。电子邮件\u验证{
可见性：隐藏；
身高：0；
}
电子邮件地址




无效的电子邮件地址
有效的电子邮件地址
您确定您的正则表达式工作正常吗？因为当我检查它的时候，这不适用于电子邮件

你应该用这个：
/（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\\，；：\s@“]+）*）（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]124；（[a-zA Z-0-9]}.[a-zA Z]+]2，

这里是另一个stackoverflow帖子：
您确定您的正则表达式工作正常吗？因为当我检查它的时候，这不适用于电子邮件

你应该用这个：
/（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\\，；：\s@“]+）*）（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]124；（[a-zA Z-0-9]}.[a-zA Z]+]2，

这里是另一个stackoverflow帖子：
您需要像这样更改您的方法

function validateEmail(email) {
   var re = /^([a-zA-Z0-9_\.\-])+\@@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; // Need to remove double quotes
   return re.test(email);
 }

如果您使用的是正则表达式，则需要遵循以下任何一项

var re=/ab+c/

或

var re=new RegExp（'ab+c'）

希望这有帮助
您需要像这样更改您的方法

function validateEmail(email) {
   var re = /^([a-zA-Z0-9_\.\-])+\@@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; // Need to remove double quotes
   return re.test(email);
 }

如果您使用的是正则表达式，则需要遵循以下任何一项

var re=/ab+c/

或

var re=new RegExp（'ab+c'）

希望这有助于
作为一个提示，验证电子邮件的唯一真正正则表达式是
^.+@.+$
。可能的重复项需要从正则表达式中删除双引号。变量re=/^（[a-zA-Z0-9\.\-]）+\@（[a-zA-Z0-9\-]）+）+（[a-zA-Z0-9]{2,4}）+$/；重复问题只是切换一个类，为什么要用JavaScript设置所有属性？作为提示，验证电子邮件的唯一真正正则表达式是
^.+@.+$
。可能的重复需要从正则表达式中删除双引号。变量re=/^（[a-zA-Z0-9\.\-]）+\@（[a-zA-Z0-9\-]）+）+（[a-zA-Z0-9]{2,4}）+$/；重复问题只是切换一个类，为什么要用JavaScript设置所有属性？