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

Question

我正在尝试使用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");
}

}

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

Answer 2

您不需要使用regex来验证电子邮件。您可以使用纯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>

这具有的优势

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