Jquery 验证电子邮件地址语法

我正在从头开始构建一个联系人表单，其中包含一些简单但别致的动画，如动画复选标记、动画发送按钮、mouseenter/mouseleave动画字段等。与此同时，我正在编写验证代码，我在使用电子邮件字段时遇到了一些困难。我一直在查看其他帖子和谷歌搜索帮助信息，但我的背景有点奇怪。 代码如下：

// Check if the email address is valid
function checkValidEmailAddress(emailAddress) {
  var pattern = new RegExp(/^(("[\w-+\s]+")|([\w-+]+(?:\.[\w-+]+)*)|("[\w-+\s]+")([\w-+]+(?:\.[\w-+]+)*))(@((?:[\w-+]+\.)*\w[\w-+]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][\d]\.|1[\d]{2}\.|[\d]{1,2}\.))((25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\.){2}(25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\]?$)/i);
  return pattern.test(emailAddress);
};

// Email field validation
$('#userEmail').blur(function(){
  $(this).animate({'background-color':'#ffffff'}, 200);
  if($.trim($(this).val()) == ""){
    emailInvalidation();
    $('#inputText_infoBox p').html('Não se esqueça do seu e-mail!');
  }
  else{
    emailValidation();
    $('#inputText_infoBox p').html('O endereço de e-email parece válido');
  }
});

如您所见，我正在对blur（）进行验证，特别是检查字段是否为空-问题：如何在blur函数中上下文化checkValidEmailAddress？我应该把它放在哪里，怎么放

多谢各位

---

Pedro

您必须将其放入

else

语句中，并将字段的值作为参数传递；您的代码如下所示：

$('#userEmail').blur(function(){
  $(this).animate({'background-color':'#ffffff'}, 200);
  if($.trim($(this).val()) == ""){
    $('#inputText_infoBox p').html('Não se esqueça do seu e-mail!');
  }
  else{
    // Here you are passing the field value to the checkValidEmailAddress
    // function, which will return true if the pattern is found, or false
    // if it is not.
    if( checkValidEmailAddress( $(this).val() ) ) 
         $('#inputText_infoBox p').html('O endereço de e-email parece válido');
    else 
         $('#inputText_infoBox p').html('O endereço de e-email parece inválido');
  }
});

---

我提出了一个更容易扩展的替代解决方案。您可以在此处看到它的直播和代码：

它还能够在验证所有输入后显示提交按钮

var test = {
  // Email
  'email' : {
    'validate' : 0,
    'fn' : function(emailAddress) {
      var pattern = /^(([^<>()[\]\\.,;:\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 pattern.test(emailAddress);
    }
  },
  // First and last name
  'name' : {
    'validate' : 0,
    'fn' : function(name) {
      name = name.split(' ');
      // Does it contain two names?
      return name.length > 1 && name[1].length > 0;
    }
  }
}, $error = $('#inputText_infoBox p');

var ready = function () {
  // How many inputs do we have to validate?
  var inputs = $.map(test, function(n, i) { return i; }).length, score = 0;
  for(var key in test) {
    // If this input is validated, we have ourselves a score!
    if(test[key].validate === 1) {
      score++;
    }
    // Is the amount of scores equal to to amount of inputs?
    if(score === inputs) {
      return true; 
    }
  }
};

$('input[type=text]').on({
  /* We'll check against a validate function every time the user
  press a key, depending on what field the user is interacting with */
  keyup: function() {
    var $this = $(this);
    // Run the validate function for this particular input field
    if(test[$this.attr('id')].fn($this.val())) {
      // Validation returned true, yay! :)
      test[$this.attr('id')].validate = 1;
      $this.css({'background-color': '#00f000'});
      $error.html('');
    } else {
      // It returned false :(
      test[$this.attr('id')].validate = 0;
      $this.css({'background-color': '#ffffff'});
    }
    if(ready()) {
      $('#inputText_infoBox').after().html($('<input type="submit">'));
    } else {
      $button = $('input[type="submit"]');
      if(typeof $test !== undefined) {
        $button.remove();
      }
    }
  },
  /* We'll do the check for empty text fields on blur to
  avoid annoying errors */
  blur: function() {
    var $this = $(this);
    // Only run if input hasn't validated yet
    if(test[$this.attr('id')].validate === 0) {
      if($.trim($this.val()) === '') {
        $error.html('Empty field');
      }
      // The input got to be invalid!
      else {
       $error.html('Your ' + $this.attr('id') + ' is invalid'); 
      }
    } 
    // It validated, clear error messages 
    else {
      $error.html(''); 
    }
  }
});

var测试={
//电子邮件
“电子邮件”：{
“验证”：0，
“fn”：函数（电子邮件地址）{
变量模式=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
返回模式.test（emailAddress）；
}
},
//名
“姓名”：{
“验证”：0，
“fn”：函数（名称）{
name=name.split（“”）；
//它包含两个名字吗？
返回name.length>1&&name[1]。length>0；
}
}
}，$error=$（“#inputText_信息框p”）；
var ready=函数（）{
//我们需要验证多少输入？
var输入=$.map（测试，函数（n，i）{return i；}）.length，score=0；
for（var输入测试）{
//如果该输入得到验证，我们将获得分数！
如果（测试[键]。验证===1）{
分数++；
}
//分数的数量是否等于输入的数量？
如果（分数==输入）{
返回true；
}
}
};
$（'input[type=text]'）。在({
/*我们将在用户每次访问时检查验证函数
按一个键，这取决于用户与哪个字段交互*/
keyup:function（）{
var$this=$（this）；
//为此特定输入字段运行验证函数
if（test[$this.attr（'id'）].fn（$this.val（）））{
//验证返回true，耶！：）
测试[$this.attr（'id'）].validate=1；
$this.css（{'background-color'：'#00f000'}）；
$error.html（“”）；
}否则{
//它返回false：(
测试[$this.attr（'id'）].validate=0；
$this.css（{'background-color'：'#ffffff'}）；
}
if（ready（））{
$（'#inputText_infoBox'）。after（）.html（$（''）；
}否则{
$button=$（'input[type=“submit”]”）；
if（typeof$test！==未定义）{
$button.remove（）；
}
}
},
/*我们将在blur to上检查空文本字段
避免恼人的错误*/
模糊：函数（）{
var$this=$（this）；
//仅在输入尚未验证时运行
如果（测试[$this.attr（'id'）].validate==0）{
如果（$.trim（$this.val（））=''）{
$error.html（'Empty field'）；
}
//输入无效！
否则{
$error.html（'Your'+$this.attr（'id'）+'无效'）；
}
} 
//它验证、清除错误消息
否则{
$error.html（“”）；
}
}
});

具体功能是什么

emailInvalidation（）和
电子邮件验证（）正在做什么？这些是一些整洁的复选标记动画。这个想法是，如果输入字段满足要求，那么它们就会变成绿色（默认值：灰显）！还有一个问题：我可以把它传递给我的发送按钮激活吗？基本上，“发送”按钮是一个动画功能——它开始被禁用（“红十字”），当所有输入字段都被验证时，它会变成一个“绿色信封”。我如何通过它？嗯……等等，让我直说：你想在点击发送按钮时再次验证，或者你想在
blur
事件中发送按钮变为可用状态？发送按钮有两种状态：禁用（一个“红十字”）和启用（一个“绿色信封”）。当所有字段都可以进入（验证）时，按钮自动启用（功能）-“红十字”变为“绿色信封”。发生这种情况时，单击“绿色信封”发送电子邮件并重置所有字段。所以，我在考虑通过所有领域的模糊进行验证。希望这有意义。：）您可以在验证
if/else
语句中添加另一行更改提交按钮的
class
。然后设置类的样式，使其具有您选择的
背景图像（红十字/绿色信封），并在验证/无效时在它们之间切换。之后，将事件处理程序绑定到提交按钮，单击该按钮执行最后一次验证，如果无效，则返回false，如果有效，则返回submit:）我已经构建了按钮-所有代码都已就绪。我只需要一些类似于原始post请求的东西：在字段中，就是说，放什么和放在哪里。