Question

我正在尝试为某些代码添加条件验证器。它基本上可以工作，除了一件事：我需要从html属性而不是从jquery代码中检索参数。我还没有弄清楚如何做到这一点。目前我的代码似乎在＆＃34;依赖＆＃34;中发送了return语句的结果。代码部分作为＆quot; genrule＆＃39;的参数。部分。所以，＆＃39; genrule＆＃39;正在接受“真实”的而不是＆＃39; 50＆＃39;或者＆＃39; 500＆＃39;来自数据属性。

以下是我一直在工作的jsfiddle的链接：http://jsfiddle.net/iceape/9eyy2h1f/5/

以下嵌入式代码似乎无法执行。

＆＃13;

$.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;
  }
});

＆＃13;

<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>

＆＃13;

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

SO上的最终工作代码：

＆＃13;

$.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;
  }
});

＆＃13;

<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>

＆＃13;

Answer 1

genrule正在从数据属性中接收true而不是50或500。

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

您总是为genrule参数获取布尔值，因为您在这里发送了一个布尔值...

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

相反，只需在500 ...

时发送true即可

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

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

1 个答案: