Question

我有输入要输入电子邮件。输入完电子邮件后，我希望完成验证，因此我使用KEYUP事件。

但是以某种方式不会触发验证。

请帮忙。谢谢！

JS

$('.newsletter-signup input').on('keyup', function(){
    var valid = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/.test(this.value) && this.value.length;
   /*  $('#valid').html('It\'s'+ (valid?'':' not') +' valid'); */
   if (!valid) {
        $('#valid').addClass("show");
   }
   else {
   }
});

CSS

#valid {
  color: red;
  display: none
}
.show {
  display: block;
}

HTML

<div class="newsletter-signup">
    <input type="text" />
</div>
<br />
<div id="valid">Required</div>

Answer 1

您的show类属性已被覆盖，您当前可以在代码中看到它。样式已添加到元素中，但是您可以看到display部分已“排成一行”。另外，如果您使用的是jquery，则可以仅使用if语句并切换所需的类。一种方法是使用!important。这是一个简单的示例：

提琴：https://jsfiddle.net/bL2pao37/

$('.newsletter-signup input').on('keyup', function() {
  var valid = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/.test(this.value) && this.value.length;
  
  if (!valid) {
    $('#valid').toggleClass("show");
  }
});

#valid {
  color: red;
  display: none
}

.show {
  display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newsletter-signup">
  <input type="text" />
</div>
<br />
<div id="valid">Required</div>

Answer 2

您的验证确实有效。 CSS包含一些内容。

考虑以这种方式尝试：

$('.newsletter-signup input').on('keyup', function(){
    console.log('Validating...');
    var valid = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/.test(this.value) && this.value.length;
   /*  $('#valid').html('It\'s'+ (valid?'':' not') +' valid'); */
   if (!valid) {
        $('#valid').show();
   }
   else {
      alert('Email is valid !');
      $('#valid').hide();
   }
});

要显示/隐藏验证错误消息，我正在使用jQuery show()/hide()。

// instead of this
$('#valid').addClass("show"); 

// it is better to use this
$('#valid').show();

当输入值有效时，我相信用$('#valid').hide();隐藏该块是有意义的。

我添加了一个小的alert()来检查它是否有效；请删除它。

实际上，另一种好的方法是使用blur事件的验证-这是当您的输入失去焦点时（例如，您转到页面上的下一个输入或只是在页面上的某个位置单击鼠标，但是不在输入上）：

$('.newsletter-signup input').on('blur', function(){ ... });

在这种情况下，当您的输入失去焦点时-触发验证，而不是每次单击按钮时都进行验证。

Happy Hacking：）

KEYUP事件上的电子邮件验证不起作用

2 个答案: