当用户键入电子邮件时，用于电子邮件验证的 Javascript 代码不起作用答案

【问题标题】：Javascript code for email validation as user types email not working当用户键入电子邮件时，用于电子邮件验证的 Javascript 代码不起作用
【发布时间】：2019-07-25 22:11:03
【问题描述】：

我有一些代码试图在用户输入时验证电子邮件地址的有效性。我设置了 2 个 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>

这是我的 CSS 代码：

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

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

【问题讨论】：

提醒一下，验证电子邮件的唯一真正正则表达式是^.+@.+$。
How do you use a variable in a regular expression?的可能重复
您需要从正则表达式中删除双引号。 var re = /^([a-zA-Z0-9_\.\-])+\@@(([a-zA-Z0-9\-])+\.)+( [a-zA-Z0-9]{2,4})+$/;
重复问题stackoverflow.com/questions/46155/…
只是切换一个类，为什么要使用 JavaScript 设置所有属性？

标签： javascript html

【解决方案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

【讨论】：

【解决方案2】：

第一个问题是您的regex 是string，第二个问题是它不是用于电子邮件验证的正确regex。我都改了，效果很好，如下图：

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

function validateEmail(val) {
  var re = /^(([^<>()\[\]\\.,;:\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,}))$/;
  return re.test(val);
}

function validate() {
  if (validateEmail(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";
  }
}

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

<p>Email Address</p>
<input type="text" name="email address" id="email" oninput="return validate()"><br><br>

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

正则表达式来自：How to validate an email address in JavaScript

【讨论】：

【解决方案3】：

你需要像这样改变你的方法

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');

希望对你有帮助

【讨论】：