输入验证仅在lur上

input validation ONLY onblur

本文关键字：lur 验证 输入      更新时间：2024-03-19

我希望只有在用户离开字段时才进行字段验证。我已经尝试了jQuery验证onblr中的技术（请参阅francios-wahl的回应），但用户体验是，验证第一次是onblr，然后恢复到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 }
}
}); 
});

这是本页面中描述的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>

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

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

  1. 不应在.validate()中使用.valid()。调用.valid()太过分了。。。.element()验证只需返回一个true/false，这就是本例中所需的全部内容，并且this.element()方法是如何编写插件的内部默认函数的

  2. 传递到onfocusout函数中的参数valueToBeTested（仅一般）表示正在测试的element。。。它不应该代表一个特定的元素。换句话说，传递到此函数的参数只表示在任何特定时间正在求值的字段。。。它不代表特定的字段名。

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

用户体验是，验证是第一次进行的，然后返回到更改

  1. 从技术上讲，它是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/

谢谢！添加onkeyup：false，

修复了代码。也要感谢风格评论。

相关文章：