输入验证仅onblur

Question

我希望仅当用户离开字段时才进行字段验证。 我已经尝试了jQuery验证onblur中的技术（请参阅francios wahl的回复），但是用户体验是，验证是在第一时间onblur，然后又恢复为onchange。 这是预期的行为吗？ 我不明白为什么偶数会改变。

可以在http://ginof.users.sonic.net/part4-wOutFunction.html上看到整个页面

$(function() {

$("#inputForm").validate({
onfocusout: function (valueToBeTested) {
    $(valueToBeTested).valid();
},
rules:
    {
    valueToBeTested: { required: true, digits: true, minlength: 5, maxlength: 5 }
}
}); 

});

Answer 1

这是因为上描述了jQuery验证插件的默认行为此页

此外，一旦某个字段被突出显示为无效，只要用户在该字段中键入内容（选项onkeyup），该字段便会得到验证。

如果您将onkeyup选项设置为false，则将取消此默认行为，如下面的代码片段所示。

另外，验证插件具有一种用于评估单个元素的方法，该元素称为element（ 在此处详细信息 ），您可能需要考虑使用该方法，而不是对元素使用.valid（）。

 $(function() { $("#inputForm").validate({ onfocusout: function(valueToBeTested) { $(valueToBeTested).valid(); }, onkeyup: false, rules: { valueToBeTested: { required: true, digits: true, minlength: 5, maxlength: 5 } } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script> <div class="space"> <h1>After the first validation, this reverts from onblur to onchange. Why?</h1> </div> <form id="inputForm"> <label class="center" for="valueToBeTested">Enter the number:</label> <input name="valueToBeTested" type="number" class="center" id="valueToBeTested"> <div id="outputText"></div> <input type="submit" value="calculate" id="triggerButton" class="center"> </form> 

Answer 2

您的代码中有一些问题...

$("#inputForm").validate({
    onfocusout: function (valueToBeTested) {
        $(valueToBeTested).valid();
    },
    rules: {
        valueToBeTested: { 
            required: true,
            digits: true,
            minlength: 5,
            maxlength: 5
        }
    }
});

1. 您不应在.valid()使用.valid() .validate() 。 调用.valid()是多余的... .element()验证仅返回true/false ，这是您在这种情况下所需的全部， 而this.element()方法是插件内部默认函数的编写方式。

2. 传递给onfocusout函数的参数valueToBeTested仅通常表示要测试的element ……不应表示一个特定的元素。 换句话说，通过这个函数的参数仅代表在任何特定时间被评估的领域......它并不代表一个特定的字段名。

3. 您用于字段并声明规则的名称valueToBeTested具有误导性，因为它仅表示字段name ，而不代表任何值。 技术上的功能，语义上的误导。

用户体验是，第一次验证是模糊的，然后又恢复为onchange

4. 从技术上讲，它是onkeyup 。 默认情况下，验证为“惰性”，这就是为什么您仅在“首次” 之后看到某些事件触发器的原因。 您已经使用自定义onfocusout函数覆盖了“惰性”验证的一部分。 如果要禁用onkeyup请将其设置为false ，否则，也可以使用自己的方法覆盖此功能。

    $("#inputForm").validate({ onfocusout: function (element) { // <- any "element" being evaluated this.element(element); // <- use '.element()' method }, onkeyup: false, // <- disables all key-up validation rules: { elementName: { // <- NAME of input element required: true, digits: true, minlength: 5, maxlength: 5 } } }); 

演示： http : //jsfiddle.net/jen8fgts/

Answer 3

谢谢！ 添加onkeyup：false，

修复了代码。 也请欣赏样式注释。