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

Question

我有一个输入来输入电子邮件。一旦我输入完电子邮件，我就希望完成验证，所以我使用KEYUP事件。

但不知何故，验证并没有被触发。

请帮忙。谢谢

jsfiddle

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

您的验证实际上是有效的。你的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();
}
});

为了显示/隐藏验证错误消息，我使用jQueryshow()/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(){ ... });

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

快乐黑客：(

Answer 2

您的show类属性正在被覆盖，您当前可以在代码中看到它的发生。样式被添加到元素中，但您可以看到display部分是"排列的"。此外，如果您使用的是jquery，您可以只使用if语句并切换所需的类。一种方法是使用!important。这里有一个快速的例子：

Fiddle：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>