Question

我有一个函数（验证），它首先在前端验证正确的电子邮件格式（以避免大多数垃圾邮件）。目前它验证单个字段并且工作正常。我尝试修改它以使用“email”类验证任何字段，因为同一页面上有多个电子邮件字段。第二个函数（validateAny）部分工作，它验证并显示错误消息，但不会像在第一个（验证）函数中那样向元素添加/删除错误类。我在这里错过了什么？此外，我希望它不验证字段是否为空，然后我希望检查在提交按钮上。查看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

我相信它是因为你在模糊事件中传递了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需要＆＃39;＃＆＃39;标识符，知道您要使用元素的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;
}

修改validate函数以接受变量

2 个答案: