jquery - 电子邮件有效时动态显示提交按钮

Question

我确信这应该很容易，但我无法让它工作。

html

<label for="email">Enter email for updates:</label>
<input type="text" name="email" id="email" placeholder="your@email.com" />
<button name="submit" type="submit">Submit</button>

js

$(document).ready(function() {

  $('button').hide();

  $('input').keyup(function() {
    if( !validateEmail(email) ){ 
      $('button').show();
    }
  };

  function validateEmail(email) {
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    return emailReg.test( email );
  }

});

我并不是在寻找它是最好的电子邮件验证，而只是一种在表单看起来正确时向用户展示的简单方法。

感激地收到任何帮助。

Answer 1

5个问题：

1. 语法错误（当某些东西不起作用时，你应该看看你的控制台）
2. 当输入不再有效时，您不会使按钮消失
3. 你并没有真正测试输入（感谢 Eli）
4. 您不检查“电子邮件”是否为空
5. 您的正则表达式拒绝了一些有效的电子邮件（尝试"valid email"@example.com）

我对前四个问题的建议：

  $('button').hide();
  $('input').keyup(function() {
    if( validateEmail($(this).val()) ){ 
      $('button').show();
    } else {
      $('button').hide();
    }
  });

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

示范

对于最后一个问题，我建议您阅读Stop Validating Email Addresses With Your Complex Regex。

Answer 2

协助dystroy所说的，存在语法错误。但此外，您email在调用validateEmail. 根据史蒂夫的评论，我还使核心更加具体。这是更新的代码。

$('#email').keyup(function() {
    var email = $(this).val();

    if(validateEmail(email) ){ 
      $('button[type="submit"]').show();
    }
    else {
      $('button[type="submit"]').hide();
    }

  });

Answer 3

感谢 dystroy、Eli Gassert 和 danronmoon。你们在这里指出了许多不同的错误。供将来参考，这是您现在对我有用的不同修复程序中的代码：

$('button').hide();

$('input').keyup(function() {
    var email = $('#email').val();

    if( validateEmail(email)){ 
        $('button').show();
    } else {
        $('button').hide();
    }
});

function validateEmail(email) {
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    return emailReg.test(email);
}