用户输入电子邮件时用于电子邮件验证的 JavaScript 代码不起作用

Question

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

我之前也尝试过仅使用 p 标签(无文本)，并根据验证测试将其内部文本更改为“无效的电子邮件地址”或“有效的电子邮件地址”。那也没用。我也尝试以类似的方式使用单个 div block ，但它不起作用。

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

这是我的 CSS 代码:

.email_verify {
    visibility: hidden;
    height:0;
}

当我在浏览器上测试时，我尝试在电子邮件地址输入字段中输入随机输入，并通过开发人员工具检查两个div标签的CSS，发现div标签的CSS没有变化(即可见性)保持隐藏，高度保持 0)

Answer 1

您确定您的正则表达式正常工作吗？因为当我检查https://regex101.com/时这不适用于电子邮件。

你应该使用这个: /^(([^<>()\[\]\\.,;:\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,}))$/

这是另一篇 stackoverflow 帖子:How to validate an email address in JavaScript