如何使用条件验证从数据属性中检索参数？

Question

我正在尝试向某些代码添加条件验证器。它基本上可以工作，除了一件事：我需要从 html 属性而不是 jquery 代码中检索参数。我一直无法弄清楚如何做到这一点。目前我的代码似乎将代码 "depends" 部分中 return 语句的结果作为参数发送到 'genrule' 部分。因此，'genrule' 从数据属性中接收 'true' 而不是 '50' 或 '500'。

这是我一直在使用的 jsfiddle 的 link：http://jsfiddle.net/iceape/9eyy2h1f/5/

下面的嵌入代码似乎没有执行。

$.validator.addMethod('genrule', function(value, element, param) {
  console.log("addmethod: " + param + " " + param[0] + " " + param[1]);
  console.log("value: " + value);
  return (value >= param);
});

$('#test').validate({
  debug: true,
  rules: {
    foo: {
      required: true,
      genrule: {
        depends: function(element) {
          console.log("bar: " + $('#bar').val());
          return ($('#bar').val() === "0");
        }
      }
    },
    bar: {
      required: true,
      genrule: {
        depends: function(element) {
          return ($('#foo').val() === "0");
        }
      }
    }
  },
  submitHandler: function(form) {
    alert('Success');
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form id="test">
  <input id="foo" name="foo" type="text" data-rule-genrule="500" data-msg-genrule="If bar is 0, then foo must be >= 500" />
  <br/>
  <input id="bar" name="bar" type="text" data-rule-genrule="50" data-msg-genrule="If foo is 0, then bar must be >= 50" />
  <br/>
  <input type="submit" />
</form>

编辑： JSFiddle 的最终工作代码：http://jsfiddle.net/iceape/9eyy2h1f/

SO 上的最终工作代码：

$.validator.addMethod('genrule', function(value, element, param) {
  return (value >= param);
});

$('#test').validate({
  rules: {
    foo: {
      required: function(element) {
        return $.trim($('#bar').val()).length === 0;
      },
      genrule: {
        param: $('#foo').data('rule-genrule'),
        depends: function(element) {
          return ($.trim($('#foo').val()).length > 0);
        }
      }
    },
    bar: {
      required: function(element) {
        return $.trim($('#foo').val()).length === 0;
      },
      genrule: {
        param: $('#bar').data('rule-genrule'),
        depends: function(element) {
          return ($.trim($('#bar').val()).length > 0);
        }
      }
    }
  },
  submitHandler: function(form) {
    alert('Success');
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form id="test">
  <input id="foo" name="foo" type="text" data-rule-genrule="500" data-msg-genrule="Foo must be >= 500" />
  <br/>
  <input id="bar" name="bar" type="text" data-rule-genrule="50" data-msg-genrule="Bar must be >= 50" />
  <br/>
  <input type="submit" />
</form>

Answer 1

genrule is receiving true instead of 50 or 500 from the data attributes.

您可以通过多种方式、各种内联属性或通过插件的方法之一为该插件声明规则。但是，您不能同时执行这两项操作，并且 .validate() 方法中的 rules 对象将始终优先于任何内联属性。

你的 genrule 参数总是得到一个布尔值，因为你在这里发送一个布尔值...

rules: {
    foo: {
        genrule: {
            depends: function(element) {
                return ($('#bar').val() === "0");  // <- this is your "genrule" `param`
                ....

相反，当 true...

时发送 500

rules: {
    foo: {
        genrule: {
            param: 500,
            depends: function(element) {
                return $('#bar').val() === "0");  
            }

或者，您可以使用 the .data() method.

获取 data 属性的值

rules: {
    foo: {
        genrule: {
            param: $('#foo').data('rule-genrule'), // value of `data-rule-genrule`
            depends: function(element) {
                return ($('#bar').val() === "0");
            }
            ....

我这里也看出了一个误区...

console.log("addmethod: " + param + " " + param[0] + " " + param[1]);

您不会有 param[0]、param[1] 等，因为您的 param 只是 500 或 [=16= 的单个参数].您的 param 需要类似于 [10,100] 才能将多个参数发送到自定义规则中。

如何使用条件验证从数据属性中检索参数？

How do I retrieve the parameter from the data attribute with conditional validation?

javascript

jquery

jquery-validate

custom-data-attribute