javascript - 使用 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()