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>

链接到小提琴：https://jsfiddle.net/7jt9qaqe/3/

我的问题是它似乎在SO上的代码片段中工作，但它显示两个错误消息（“太高”和“超过9000”）。在我的小提琴中，只有最大错误正在起作用（“太高”）。

有没有办法可以隐藏“太高”的消息而不做一些css hackery？我首先考虑添加：

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

但这会隐藏最大错误（例如，如果他们输入了101）。长话短说，如果他们输入101-9000之间的数字说“太高”，如果他们输入9001或更高的数字说“超过9000”，如果他们输入1-100之间的数字，那么这是一个有效的条目。 / p>

Answer 1

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

看起来根本没有调用自定义函数。我尝试设置max="9000"并使用消息＆＃34;超过9000＆＃34;处理该情况。然后使用自定义函数以这种方式设置输入验证超过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">。根据其文档，这应该有效。你试过在项目上打开一个问题吗？

Answer 2

放弃并用css攻击它

#syrUnitForm div.help-block ul li:nth-child(2) {
  position: absolute;
  margin-top: -20px;
  background: #f5f5f5
}

1000hz验证器检查最小值，最大值和特定值

2 个答案: