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

Posted 2023-05-08

【中文标题】1000hz 验证器检查最小值、最大值和特定值

【英文标题】：1000hz validator check for min, max, and specific value

【发布时间】：2017-09-07 07:30:10

【问题描述】：

参考这个问题寻求帮助how to use custom validators of github.com/1000hz/bootstrap-validator

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

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

代码 sn-p

$('#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 上的代码 sn-p 中工作，但它同时显示错误消息（“太高”和“超过 9000”）。在我的小提琴中，只有最大错误起作用（“太高”）。

有没有一种方法可以隐藏“太高”的消息而不做一些 css 黑客操作？我首先想到的是：

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

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

【参考方案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">。根据其文档，这应该有效。您是否尝试过打开项目的问题？

【讨论】：

这行得通，但我仍然不知道如何隐藏第一个错误。现在，错误块显示“太高”和“超过 9000”。我需要它来隐藏“太高”，并且仅在值大于 9000 时显示“超过 9000”。

澄清max="100"和data-threshold="9000"都需要出现在输入中，但只显示一条错误消息，而不是两者。

我根据您的建议更新了我的原始问题，以更好地显示问题。

【参考方案2】：

放弃并用 css 破解它

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