使用jQuery验证Keyup上的电子邮件地址

Question

我试图验证电子邮件地址onkeyup，但以下似乎从未返回有效，

有人可以看到我可能要出问题的地方吗？ 我只有1个输入，而我的.first()选择器正在正确地定位该目标...

$('.newsletter-signup input').first().keyup(function(){
    $email = $('.newsletter-signup input').first();
     function validateEmail($email) {
      var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
      if( !emailReg.test( $email ) ) {
        alert('foo');
      } else {
        alert('bar');
      }
    }
});

Answer 1

您的代码有点不正确，您可以这样做：

$('.newsletter-signup input').first().keyup(function () {
    var $email = this.value;
    validateEmail($email);
});

function validateEmail(email) {
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if (!emailReg.test(email)) {
        alert('foo');
    } else {
        alert('bar');
    }
}

在您的代码中：

$email = $('.newsletter-signup input').first();

您只会得到第一个输入的jQuery对象，而不是值。 因此，验证根本不起作用。

因此，为了获得input元素的值，可以使用：

 var $email = this.value;

因为this在这里指的是$('.newsletter-signup input').first() 因此需要再次调用它，然后从中获取值。 您可以使用this.value直接执行此操作。

Answer 2

当您真正想做的只是以下事情时，需要执行的代码很多：

$('.newsletter-signup input:first').on('keyup', function(){
    var valid = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/.test(this.value);
    alert(valid ? 'foo' : 'bar');
});

还要注意，将输入类型设置为“电子邮件”会在支持HTML5的浏览器中为您进行验证。

小提琴

Answer 3

$('.newsletter-signup input').first().keyup(function(){
    $email = $(this).val();// use val here to get value of input
     validateEmail($email);
});

   function validateEmail($email) {
          var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
          if( !emailReg.test( $email ) ) {
            alert('foo');
          } else {
            alert('bar');
          }
        }

参考.val（）