Question

我正在尝试创建一个电子邮件验证字段，如果电子邮件不符合标准，则会显示错误消息。为此，我使用了keyup作为事件，因此一旦用户输入了错误的电子邮件，该消息就会显示出来。

但是这样每次用户输入消息显示的字符时，我认为我会添加一个延迟并为此找到一个函数，但这确实会增加延迟但仍会在每次触发消息时显示。

有人知道如何确保在用户停止一段时间后才会调用该事件一次吗？

<table>
    <tr>
        <td>Email</td>
        <td>
            <input type="text" class="email" value="supplier@supplier.com">
        </td>
        <td><span class="message"></span></td>
    </tr>
</table>

function isEmail(email) {
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
}

$('.email').on('keyup', function() {
    var delay = (function() {
        var timer = 0;
        return function(callback, ms) {
            clearTimeout(timer);
            timer = setTimeout(callback, ms);
        };
    })();

    var email = $('.email').val();
    $(this).closest('tr').find('.message').hide();

    if (isEmail(email) == false) {
        delay(function() {
            $('.email').closest('tr').find('.message').hide().html('Invalid email.').fadeIn('fast');
        }, 1000);
    } else {
        $(this).closest('tr').find('.message').hide();
    }
});

Answer 1

你的超时逻辑在上面有点瑕疵。请注意，允许用户在第一次未经验证的情况下输入其电子邮件的更好方法是检查电子邮件对输入模糊的有效性。如果您愿意，可以在第一次模糊事件后的每次按键后检查电子邮件的有效性。像这样：

function checkEmailValidity($el) {
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    var $msg = $el.closest('tr').find('.message').hide();
    if (!regex.test($el.val()))
        $msg.html('Invalid email.').fadeIn('fast');
}

var timer;    
$('.email').on({ 
    blur: function() {
        $(this).data('hasBlurred', true);
        checkEmailValidity($(this));
    },
    keyup: function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            $(this).data('hasBlurred') && checkEmailValidity($(this)); 
        }.bind(this), 250);
    }
});

Working example

停止触发延迟的jQuery keyup

1 个答案: