修改验证函数以接受变量

Question

我有一个函数(validate)，首先在前端验证正确的电子邮件格式(以避免大多数垃圾邮件)。目前，它只验证一个字段，运行良好。我试图修改它来验证任何字段与类"电子邮件"，因为有几个电子邮件字段在同一页面上。第二个函数(validateAny)部分地起作用，它验证并显示错误消息，但不像第一个(validate)函数那样向元素添加/删除错误类。我遗漏了什么?此外，我希望它不验证字段，如果它是空的，那么我希望检查是在提交按钮代替。检查jsfiddle

function validateEmail(email) { 
    var re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}
function validate(){
  //$("#wrong-email-mess-create-process").text("");
  var email = $("#new-usr-name").val();
  if (validateEmail(email)) {
    $("#new-usr-name").removeClass('error');
    $("#new-usr-name").prev().removeClass('error');
    $(".error-mess").fadeOut('fast');
    //$("#wrong-email-mess-create-process").text(email + " is valid :)");
  } else {
    $("#new-usr-name").addClass('error');
    $("#new-usr-name").prev().addClass('error');
    $(".error-mess").fadeIn('fast');
    //$("#wrong-email-mess-create-process").text(email + " is not valid :(");
  }
  return false;
}
$("#new-usr-name").bind("blur", validate);

function validateAny(efield){
  var email = $(efield).val();
  if (validateEmail(email)) {
    $(efield).removeClass('error');
    $(efield).prev().removeClass('error');
    $(".error-mess").fadeOut('fast');
  } else {
    $(efield).addClass('error');
    $(efield).prev().addClass('error');
    $(".error-mess").fadeIn('fast');
  }
  return false;
}
$('.email').blur(function(){
    if( this.value ) {
    validateAny(this.id);
  }
});

Answer 1

我相信这是因为你在blur事件中传递了id而不是字段。

$('.email').blur(function(){
    if( this.value ) {
    validateAny(this);
  }
});

或者在validateAny中，您需要添加id选择器，然后在函数的其余部分继续使用所选的jquery对象:

var $field = $('#' + efield);
var email = $field.val();

更新小提琴:https://jsfiddle.net/d2wd6wh6/2/

Answer 2

看起来您正在将id传递给函数，但是jQuery需要'#'标识符来知道您想要使用元素的id。试试这个:

function validateAny(efield){
  efield = '#' + efield;
  var email = $(efield).val();
  if (validateEmail(email)) {
    $(efield).removeClass('error');
    $(efield).prev().removeClass('error');
    $(".error-mess").fadeOut('fast');
  } else {
    $(efield).addClass('error');
    $(efield).prev().addClass('error');
    $(".error-mess").fadeIn('fast');
  }
  return false;
}