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

Question

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

这是我一直在工作的 jsfiddle 的链接：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 正在接收来自数据属性的true，而不是50 或500。

您可以通过多种方式声明此插件的规则，各种内联属性或通过插件的方法之一。但是，您不能同时执行这两项操作，.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 或50 的单个参数。您的 param 需要类似于 [10,100] 才能将多个参数发送到自定义规则中。