表单验证我正在使用 https://jqueryvalidation.org . 我已经通过 depends 属性实现了自定义验证规则。

验证错误规则如下:

• 如果两个价格框都未选中，则不会显示错误。

• 如果选择了一个价格框(两个中的一个)，验证错误将显示用户需要同时选择两个。

• 如果两者都被选中，那么 max price 值必须大于 min price 。

请在下面找到我的代码:

在我的代码中，每个条件都满足，但最后一条规则意味着最高价格将始终大于最低价格不起作用。它检查为真但验证未触发。

这里是 jsfiddle link

$(document).ready(function() {
    $("#form1").validate({
        debug: true,
        onkeyup: false,
        onfocusout: false,
        onclick: false,
        rules: {
            minrange: {
                required: {
                    depends: function() {
                        var min_range = $("#min-range").find(':selected').val(),
                            max_range = $("#max-range").find(':selected').val();
                        if (min_range == "" && max_range == "") {
                            return false;
                        } else if (min_range != "" && max_range == "") {
                            return true;
                        } else if (min_range == "" && max_range != "") {
                            return true;
                        } else if (parseInt(max_range) < parseInt(min_range)) {
                            return true;
                        } else {
                            return false;
                        }
                    }
                }
            },
            maxrange: {
                required: {
                    depends: function() {
                        var min_range = $("#min-range").find(':selected').val(),
                            max_range = $("#max-range").find(':selected').val();
                        if (min_range == "" && max_range == "") {
                            return false;
                        } else if (min_range != "" && max_range == "") {
                            return true;
                        } else if (min_range == "" && max_range != "") {
                            return true;
                        } else if (parseInt(max_range) < parseInt(min_range)) {
                            return true;
                        } else {
                            return false;
                        }
                    }
                }
            },
        },
        submitHandler: function(formName, event) {
            alert("sucess");
        }
    });
});

这里是 jsfiddle link

最佳答案

您可以使用 max 来完成此操作和 min规则。这是 fiddle .

代码:

$(document).ready(function() {
  var $min_range = $("#min-range"),
      $max_range = $("#max-range");

  $("#form1").validate({
    debug: true,
    onkeyup: false,
    onfocusout: false,
    onclick: false,
    rules: {
      minrange: {
        required: function() {
            return !($min_range.val() === "" && $max_range.val() === "");
        },
        max: function() {
          if ($max_range.val() !== "") {
            return $max_range.val();
          }
        }
      },
      maxrange: {
        required: function() {
            return !($min_range.val() === "" && $max_range.val() === "");
        },
        min: function() {
          if ($min_range.val() !== "") {
            return $min_range.val();
          }
        }
      }
    },
    submitHandler: function(formName, event) {
      alert("sucess");
    }
  });
});

关于javascript - 最小最大价格范围验证不适用于 jquery.validate.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37355054/