javascript - 如何通过条件验证从数据属性中检索参数？

Question

我正在尝试向某些代码添加条件验证器。它基本上可以工作，除了一件事:我需要从 html 属性而不是从 jquery 代码中检索参数。我一直不知道如何做到这一点。目前，我的代码似乎将代码的“depends”部分中的 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 is receiving true instead of 50 or 500 from the data attributes.

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

您总是会为 genrule 参数获得一个 bool 值，因为您在此处发送一个 bool 值...

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] 才能将多个参数发送到自定义规则中。