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');
});

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

DEMO：JSnippet demo

使用keyPress检查输入

2 个答案: