javascript - jQuery 验证插件 : Email validation only happens on blur

Question

已解决:我检查了我的 jquery-validate.js 版本，发现它一开始就没有实现 onkeyup 处理程序。我正在使用 1.12 Opre。我不知道为什么它不包含该处理程序，因为从我在 github 上看到的 onkeyup 功能在 2013 年就可用了。也许我从某个地方得到了一个坏 fork 。因此，我所做的就是更新到 1.14，一切都按预期工作。

更新:经过更多研究，我意识到问题更多在于未在“onkeyup”上进行验证，而 jQuery 验证插件默认情况下应该执行此操作。

也许这是我使用 jQuery 验证插件的方式，但如果我输入无效的电子邮件，我会在输入下方显示红色警报区域:

var validationPluginDefaults = {
ignore: [],
errorElement: 'p', //default input error message container <p>
errorClass: 'text-error', // default input error message class
focusInvalid: true, //focus on the first invalid field
messages: {},
invalidHandler: function (event, validator) { //display error alert on form submit 

},
highlight: function (el) { // hightlight error inputs
    //jQuery(el).closest('.control-group').addClass('error'); // set error class to the control group
},
success: function (err, el) {
    jQuery(el).next(".text-error").hide();
    jQuery(el).next(".text-error").remove();


},
errorPlacement: function (error, element) {
    error.insertAfter(element);
},
onfocusin: function () {},
onfocusout: function () {}

};

当我更正电子邮件并直接点击提交按钮(不触发 onblur 事件)时，之前的错误字段将被删除，然后表单会跳转......让我错过了正确点击它的机会。

这是我的验证器规则:

var validator = jQuery.extend(validationPluginDefaults,{
    rules: {
        loginName: {
            required: true,
            email: true,
        },
        firstName: {
            minlength: 2,
            onlyAlphaAndHyphen: true,
            required: true,
        },
        lastName: {
            minlength: 2,
            required: true,
        },
        email: {
            required: true,
            email: true,
            equalTo: "#loginName",
        }
    }
});

这是我在函数中触发它的方法:

$("#updateUserForm").validate(validator);


    if ($("#updateUserForm").valid()){

现在我知道您通常不会在 .valid() 之前调用 .validate() 并且您应该在页面加载时调用它。但我继承了某人的糟糕代码，这就是我到目前为止所得到的。无论如何，我尝试了另一种方式，但仍然看到错误。

能否在文本更改事件期间完成此电子邮件验证，这样我就不必退出该字段？

Answer 1

您是否尝试过使用 onChange 事件来实现此目的？

$("#updateUserForm").on('更改', '输入', function() {
$(this).validate(验证器);
});