使用 keyPress 检查输入

Question

我有这个 js 代码，它检查我的输入字段是否有正确的电子邮件。

$(document).ready(function () {
$('.subscription-form input').keypress(function () {
    var inputEmail = $('#email-subscribe');
    var email = inputEmail.val();
    var button =  $('.subscription-form button');
    console.log(email.length);
    if (IsEmail(email)) {
        button.prop('disabled', false);
        inputEmail.css({'border':'none'});
    }
    else if (email.length < 1) {
        inputEmail.css({'border':'none'});
        console.log('enter');
    }
    else{
        button.prop('disabled', true);
        inputEmail.css({'border':'1px solid red'});
    }
});
});

问题是，当我输入正确的电子邮件然后清除输入时，我的按钮仍然处于活动状态。我试着检查

if(input.email.length < 0)

然后禁用按钮，但它只在有一个字符时有效。

请帮我解决这个问题。

HTML:

<form enctype="multipart/form-data" method="post" accept-charset="UTF-8"
                  action="/response.php"
                  class="text-center row subscription-form">
     <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12 col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
     <div id="output" class="col-lg-9 col-md-9 col-sm-8 col-xs-12"></div>
     <input id="email-subscribe" type="text" title="email" name="email"
                           placeholder="Enter your email*" class="col-lg-9 col-md-9 col-sm-8 col-xs-12 cnt-input">
           <button disabled class="btn request getjob col-lg-2 col-md-8 col-sm-10 hidden-xs">Sign up</button>
       <div class="col-lg-2 col-md-8 col-sm-10 col-xs-12 visible-xs margi-top-10">
           <button disabled class="btn request getjob">Sign up</button>
       </div>
  </div>
</form>

Answer 1

试试这个 Fiddle

您应该使用 keyup 而不是 keypress 来获取输入的值，因为您将始终获取最后输入字符之前的字符串。

似乎当您使用退格键清空输入时，输入值被设置为通过正则表达式检查的空字符串（假设您在函数 IsEmail 中使用正则表达式）。

在将值传递给函数之前，我在这种情况下将值设置为 null:

var email = inputEmail.val() == "" ? null : inputEmail.val();

不需要 else if 条件，因为您总是希望在电子邮件失败时禁用。

Answer 2

只需添加：

$('input').blur(function(){
    $(this).trigger('keypress');
});

一旦他尝试单击，模糊将首先触发并再次触发验证。

演示：JSnippet demo

使用 keyPress 检查输入

Check input with keyPress

validation

jquery

keypress