即使对于无效的电子邮件，使用 jquery 的电子邮件验证也会返回 true答案

【问题标题】：Email validation using jquery returns true even for invalid email即使对于无效的电子邮件，使用 jquery 的电子邮件验证也会返回 true
【发布时间】：2021-08-22 18:10:18
【问题描述】：

我正在尝试使用 JQuery 验证电子邮件地址，但即使对于无效的电子邮件地址，它也总是返回 true。这是函数。

 function check_email($email) {
var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!regex.test(email)) {
  return false;
}
else {
  return true;
}

};

这是向该函数发送参数电子邮件的函数

function valid_email() {
var $email = $("#email").val();
if (check_email($email)) {
  $("#email").css("border", "1px solid green");
  $("#email").css("border", "1px solid green");
  $("#email_error_message").hide();
}
else {
  $("#email").css("border", "1px solid red");
  $("#email_error_message").show();
  $("#email_error_message").html("please provide a vallid email address");
}

}

【问题讨论】：

将电子邮件验证留给<input type="email" />，因为您的正则表达式会将有效电子邮件标记为实际上无效。

标签： html jquery css validation email

【解决方案1】：

您的 check_email 函数有一个名为“$email”的参数，但在内部使用“email”。

这是一个更正的版本（带有一些略微简化的逻辑）：

function check_email(email) {
  var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return (regex.test(email))
};

function valid_email() {
  var $email = $("#email").val();
  if (check_email($email)) {
    $("#email").css("border", "1px solid green");
    $("#email_error_message").hide();
  } else {
    $("#email").css("border", "1px solid red");
    $("#email_error_message")
      .html("please provide a valid email address")
      .show();
  }
}

// fire it on change (which occurs on blur, not every keystroke)
$('#email').on('change', valid_email)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="email">
<div id="email_error_message"></div>

【讨论】：

感谢@Dnaiel Beck 的回复。非常感谢。

【解决方案2】：

您不需要使用正则表达式来验证电子邮件。您可以使用纯 HTML5 电子邮件输入并在其上调用 .checkValidity()，如果有效则返回 true，如果无效则返回 false。

function valid_email() {
  var valid = $("#email")[0].checkValidity();
  if (valid) {
    $("#email").css("border", "1px solid green");
    $("#email").css("border", "1px solid green");
    $("#email_error_message").hide();
  } else {
    $("#email").css("border", "1px solid red");
    $("#email_error_message").show();
    $("#email_error_message").html("please provide a vallid email address");
  }
}

$("button").on("click", valid_email);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="email" id="email" />

<button>Check validity</button>

这有一个优点

您将电子邮件验证外包给浏览器。
避免编写禁止合法电子邮件的正则表达式。

【讨论】：