电子邮件验证仅在输入电子邮件但不是有效电子邮件时显示消息答案

【问题标题】：Email validation to display message only if email is entered but it is not a valid email电子邮件验证仅在输入电子邮件但不是有效电子邮件时显示消息
【发布时间】：2023-03-06 09:19:01
【问题描述】：

我想仅在输入电子邮件地址但无效时才显示电子邮件地址无效的消息。如果没有输入值，我不想显示消息 - 我只是将输入边框设为红色。

我试过了，但即使字段为空，它也会显示消息：

function validateEmail($email) {
  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  return emailReg.test( $email );
}
if($(element).hasClass('email')) {
  if( !validateEmail($('.email'))) {
    $('<span>Please enter a valid email address</span>').insertAfter($(element));
  }
}

我也尝试过使用 jQuery 验证插件，但在这种情况下，它根本不会显示电子邮件错误：

var emails = ['email'];
for(var i=0;i< emails.length;i++) {
  var email = emails[i];
  rules[email] = {};
  rules[email].email  = true;
  rules[email].required  = true;
  msgs[email] = {
    required:'',
    email : "Please enter a valid email address",
  }
}

var validateObj           = {}
validateObj["rules"]      = rules;
validateObj["messages"]   = msgs;
validateObj["onkeyup"]    = function(element) { $(element).valid();};
validateObj["success"] = function(element) {};
validateObj["submitHandler"] = function (form) {
  form.submit();
}
$("#form").validate(validateObj);

【问题讨论】：

我目前无法对其进行测试，但是您的 jquery 验证代码看起来非常奇怪且不标准。这是一个很常见的用例，应该有很多代码示例可以使用。避免使用自定义正则表达式进行电子邮件验证，因为它会在太多边缘情况下失败。
不是很自定义，我用的是jquery验证插件，就是这么写的。我定义对象规则、消息——它只是语法。

标签： javascript jquery validation email

【解决方案1】：

我真的觉得我在帮助一个没有尝试自己做的人......

您可以使用($(element).val()) 来测试您的输入是否为空。

要使这个工作正常，只需声明一个empty-email 类来为边框着色

if($(element).hasClass('email')) {
    if($(element).val()){
        if(!validateEmail($(element))) {
            $('<span>').text('Please enter a valid email address').insertAfter($(element));
        }
    }else{
        $(element).addClass('empty-email');
    }
}

【讨论】：

哦，真的，我很累，我没想到:(
不是一个好的解决方案，因为它仍然使用自定义电子邮件验证。自定义电子邮件验证非常有问题，应该避免。

【解决方案2】：

我使用 jquery 验证找到了解决方案：

var emails = ['email'];
for(var i=0;i< emails.length;i++) {
  var email = emails[i];
  rules[email] = {};
  rules[email].email  = true;
  rules[email].required  = true;
  msgs[email] = {};
  msgs[email] = {
    required:'',
    email : "Please enter a valid email address",
  }
}

if($(element).hasClass('email')) {

  error.insertAfter($(element));

}

};

【讨论】：