Question

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

我尝试了这个但是即使字段为空它也会显示消息：

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

我也尝试使用qjeury validate插件但在这种情况下它根本不显示电子邮件错误：

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

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

Answer 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));

}

};

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

2 个答案: