指定 jQuery 验证插件中验证器的顺序

问题描述 投票：0回答：6

我想知道是否可以指定验证器的运行顺序。

目前我编写了一个自定义验证器来检查它是否为 [a-zA-Z0-9]+ 以确保登录验证我们的规则，并编写了一个远程验证器以确保登录可用，但目前远程验证器是在我的之前启动的自定义验证器。仅当元素验证我的自定义验证器时，我才想启动远程验证器。

有什么线索吗？

感谢您的阅读

jquery jquery-validate
6个回答
3
投票

您需要增强/猴子补丁/覆盖（无论哪个术语对您来说最有意义）验证插件在创建要为字段运行的规则时使用的

$.fn.rules
，以将您的规则推到规则对象中的第二位，在 
required
规则之后。

如果您在脚本中搜索 

rules
，则需要在 
if (data.required)

之前添加类似的逻辑 
If (data.yourRuleName) {
    var param = data.yourRuleName;
    delete data.yourRuleName;
    data = $.extend({ yourRuleName: param }, data);
}

或者您可以将 

rules
部分复制出来，添加上述内容并将其放入验证脚本之后引用的脚本中。这样，如果脚本发生更改，您不必将这些更改应用到新版本的脚本（假设规则仍然以相同的方式工作）。

0
投票

据我了解，给定元素的规则按照它们出现的顺序进行处理。 从版本 1.12 开始，始终先处理“必需”规则，最后处理“远程”规则。

0
投票

距离上一条消息已经有一段时间了，但它可能对某人有用......

如果您想在同一个标签上设置更多规则，例如

<input data-rule-regex="(\w\d)+" data-rule-rangewords="[2,5]" data-rule-minlength="10" >

当您测试规则时，顺序与插入的顺序不同，因此在这种情况下这是一个问题，因为如果您插入以下字符串

abcdefghi

jquery 验证器打印这些消息

1) 第一个与 minlength 相关的错误消息 2) 第二条与范围字相关的错误消息 3）与正则表达式相关的第三个错误消息

但这是错误的，因为如果我已经插入了字符串

abcdefghi

出现的消息是 minlength 的错误消息，现在我插入另一个字符

abcdefghil --> 长度 10

此时我必须清理字符串，因为第二条错误消息告诉我必须在 [2,5] 之间插入至少两个或更多单词...

对于正则表达式来说，插入两个或多个单词后也会出现同样的情况，它会出现有关正则表达式的第三条错误消息，而且在这种情况下，我必须清理我的字符串等...

此行为是由于 jquery.validate.js 中的方法列表导致的

因为插件接受该顺序...

所以，我的解决方案是这样的：

为要在标签上插入的每个规则添加此属性

data-rule-(method you want)-order

并使用从零开始的索引对其进行初始化...

例如，在我们的例子中，我们有三个规则

<input 
data-rule-regex="(\w\d)+" data-rule-regex-order="0" 
data-rule-rangewords="[2,5]" data-rule-rangewords-order="1"
data-rule-minlength="10" data-rule-minlength-order="2"
ofcourse you need also the messages (if you want)
data-msg-regex="..." etc...
>

此时，如果您不想覆盖库（jquery.validate.js），您可以创建一个 custom.js 文件并插入以下代码：

$(document).ready(function() {
    (function($){
        $.validator.dataRules = function(element) {
            rules = {},
            $element = $( element ),
            type = element.getAttribute( "type" ),
            method, value, orderIndex, orderArr = {};

            for ( method in $.validator.methods ) {
                value = $element.data( "rule" + method.charAt( 0 ).toUpperCase() +method.substring( 1 ).toLowerCase() );
                orderIndex = $element.data( "rule" + method.charAt( 0 ).toUpperCase() +method.substring( 1 ).toLowerCase() + "Order" );

                if(typeof orderIndex !== "undefined") orderArr[orderIndex] = {"rules":rules,"type":type, "method":method, "value":value};
            }       

            for ( var ord in orderArr ) this.normalizeAttributeRule( orderArr[ord].rules,orderArr[ord].type, orderArr[ord].method, orderArr[ord].value );

            return rules;

        }
    })(jQuery);             
});

希望对你有用

米。

0
投票

我要在这里清理@matty 的解决方案。我会在那里发表评论，但这样做对声誉来说是一个奇怪的决定？？？ ́\(ツ)/́

matty 的解决方案返回“规则”，但从不写入它。此外，您还需要像 [email protected]+ 这样的内容来执行“normalizeAttributeRule”例程。

$(document).ready(function () {
    (function ($) {
        $.validator.dataRules = function (element) {
            var rules = {};
            var $element = $(element);
            var type = element.getAttribute("type");
            var method;
            var value;
            var orderIndex;
            var orderArr = {};

            for (method in $.validator.methods) {
                value = $element.data("rule" + method.charAt(0).toUpperCase() + method.substring(1).toLowerCase());
                orderIndex = $element.data("rule" + method.charAt(0).toUpperCase() + method.substring(1).toLowerCase() + "Order");

                if (typeof orderIndex !== "undefined") orderArr[orderIndex] = { "rules": rules, "type": type, "method": method, "value": value };
            }

            for (var ord in orderArr) {
                this.normalizeAttributeRule(orderArr[ord].rules, orderArr[ord].type, orderArr[ord].method, orderArr[ord].value);
                rules[orderArr[ord].method] = orderArr[ord];
            }

            return rules;
        }
    })(jQuery);
});

经过一些调整后似乎对我有用。

0
投票

如果它可能对任何人有用，我最终按照我希望评估规则的顺序添加了对 .rules('add') 方法的多次连续调用，忽略了“必需”和“远程”规则，图书馆分别将其放置在第一个和最后一个位置：

// Initialize the validation plugin

$("#form").validate({ /*options*/ });


// Add the validation rules to the field in the desired order

var validationRules = [{
    name: "required",
    value: true,
    message: "This field is required."
  },
  {
    name: "minlength",
    value: 5,
    message: "Must be at least 5 characters."
  },
  {
    name: "email",
    value: true,
    message: "Must be a valid email address."
  },
];

$.each(validationRules, function(index, rule) {

  $("#field").rules("add", {
    [rule.name]: rule.value,
    messages: {
      [rule.name]: rule.message
    }
  });

});
label.error {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>

<form id="form">
  <label for="field">Field:</label>
  <input type="text" id="field" name="campo">
  <br>
  <input type="submit" value="Send">
</form>

-1
投票
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.