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个问题：

语法错误（当某些内容无效时，您应该查看console）
当输入无效时，您不会使按钮消失
你没有真正测试输入（感谢Eli）
您不检查“电子邮件”是否为空
您的正则表达式拒绝了一些有效的电子邮件（尝试"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 );
  }

Demonstration

对于最后一个问题，我建议您阅读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

感谢破坏，Eli Gassert＆amp; 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);
}

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

3 个答案: