javascript - 1000hz 验证器检查最小值、最大值和特定值

Question

引用此问题寻求帮助how to use custom validators of github.com/1000hz/bootstrap-validator

我有一个带有两个数字输入的表单，以及一个 1000hz 验证器插件，用于对最小值、最大值和任何超过 9000 的值进行错误处理。

允许的最小值为 1，最大值为 100，但如果该值高于 9000(9001 或更大)，我需要一个单独的错误，并且必须覆盖最大值错误消息。

代码片段

$('#syrUnitForm').validator({
  custom: {
    threshold: function($el) {
      var threshold = parseInt($el.data('threshold'));
      if ($el.val() > threshold) {
        return "IT'S OVER 9000!!!";
      }
    }
  }
});

// disable rxFindSyr button until valid nits are entered
$('#rxFindSyr').attr('disabled', true);

$('#minUnits, #maxUnits').on('blur change copy click cut keypress keyup paste', function() {
  var validator = $("#syrUnitForm").data("bs.validator");

  if (!validator.hasErrors()) {
    $('#rxFindSyr').attr('disabled', false);
  } else {
    $('#rxFindSyr').attr('disabled', true);
  }
});

/*
 * === PRIMARY CSS ===
*/

@import url(https://fonts.googleapis.com/css?family=Varela+Round);
html,
body,
h4 {
  min-height: 100%;
  font-family: 'Varela Round', sans-serif !important;
}

body {
  margin-bottom: 70px;
  background: #79c23f;
  /* IE9 */
  background: -webkit-gradient(top, circle cover, #c2e3a8, #79c23f 70%);
  background: -o-radial-gradient(top, circle cover, #c2e3a8, #79c23f 70%);
  background: -moz-radial-gradient(top, circle cover, #c2e3a8, #79c23f 70%);
  background: -webkit-radial-gradient(top, circle cover, #c2e3a8, #79c23f 70%);
  background: -ms-radial-gradient(top, circle cover, #c2e3a8, #79c23f 70%);
  background: radial-gradient(top, circle cover, #c2e3a8, #79c23f 70%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#c2e3a8', endColorstr='#79c23f', GradientType=0);
}

label {
  font-weight: 700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <br />
  <div class="row" id="rxSyrBlock">
    <form class="form-horizontal" id="syrUnitForm">
      <!-- start sub column 1 -->
      <div class="col-sm-4">
        <div class="form-group col-sm-12">
          <label for="minUnits">Minimum injectin:</label>
          <input value="9001" type="number" class="form-control" id="minUnits" placeholder="Between 1-100" min="1" data-min-error="Too low, bro" max="100" data-max-error="Too high" data-threshold="9000" data-threshold-error="IT'S OVER 9000!!!" required>
          <div class="help-block with-errors"></div>
        </div>
        <div class="form-group col-sm-12">
          <label for="maxUnits">Maximum injectin:</label>
          <input value="9001" type="number" class="form-control" id="maxUnits" placeholder="Between 1-100" min="1" data-min-error="Too low, bro" max="100" data-max-error="Too high" data-threshold="9000" data-threshold-error="IT'S OVER 9000!!!" required>
          <div class="help-block with-errors"></div>
        </div>
        <div class="form-group col-sm-12">
          <button type="button" id="rxFindSyr" class="btn btn-primary">Find syringes</button>
        </div>
      </div>
      <!-- end sub column 1 -->


      <!-- start sub column 2 -->
      <div class="col-sm-6" id="syrResults">

        <label>Result:</label>
        <p>&nbsp;</p>

      </div>
      <!-- end sub column 2 -->

    </form>
  </div>
  <!-- end nested row | syringes -->
</div>

fiddle 链接:https://jsfiddle.net/7jt9qaqe/3/

我的问题是它似乎在此处的代码片段中工作，但它显示了两条错误消息(“太高”和“超过 9000”)。在我的 fiddle 中，只有最大错误起作用(“太高”)。

有没有办法可以隐藏“太高”消息而不需要做一些CSS hacking？我首先想到添加:

#myForm div.form-group div.help-block ul.list-unstyled li:first-child {
  display: none;
}

但这会隐藏最大错误(例如，如果他们输入 101)。长话短说，如果他们输入 101-9000 之间的数字，请说“太高”，如果他们输入 9001 或更大的数字，请说“超过 9000”，如果他们输入 1-100 之间的数字，则这是有效条目。

Answer 1

很抱歉作为答案而不是在评论中发布，但我需要在此处发布一些代码。

看起来自定义函数根本没有被调用。我尝试设置max="9000"并使用消息“OVER 9000”处理这种情况，然后使用自定义函数以这种方式设置输入验证超过 100:

$('#myForm').validator({
  custom: {
    hundred: function ($el) {
      var threshold = parseInt( $el.data('hundred') );
      if ($el.val() > threshold) {
        return `OVER 100 mate!`;
      }
    }
  }
});

和标记 <input data-hundred="100"> 。根据其文档，这应该有效。您是否尝试过在项目上提出问题？