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

Posted 2023-05-09

【中文标题】即使对于无效的电子邮件，使用 jquery 的电子邮件验证也会返回 true

【英文标题】：Email validation using jquery returns true even for invalid email

【发布时间】：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" />，因为您的正则表达式会将有效电子邮件标记为实际上无效。

【参考方案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>

这有一个优点

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