使用jQuery在输入时验证电子邮件地址

Question

我正在尝试在onkeyup事件中验证电子邮件地址，但以下内容似乎从未返回有效：

有人能看出我哪里错了吗？我只有一个输入框，我的.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');
      }
    }
});

- Liam

---

$email = this.value; - Jay Harris

停止使用正则表达式验证电子邮件地址。 - David Fregoli

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。

- palaѕн

Answer 2

这是一大段代码，但实际上你只需要做这个：

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

请注意，在支持HTML5的浏览器中，将输入类型设置为 "email" 将为您进行验证。 FIDDLE

- adeneo

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()

- Rituraj ratan