vuejs v-validate 自定义验证规则：最大值必须大于用户输入的最小值

Question

下面是我在 vuejs 中的 2 个输入字段的代码。当前的验证规则是它们都需要是数字。我在这里阅读了官方文档。

我需要添加另一个规则，它max-amount必须大于min-amount. 诀窍是最小数量是用户输入，而不是预先确定的。我应该如何实现这个自定义验证器？

        <div class="min-section">
          <label>Min</label>
          <input type="text" 
          class="uk-input"
          name="min-amount"
          v-validate="'numeric'"
          v-model="minAmount" />
        </div>
        <div class="max-section">
          <label>Max</label>
          <input type="text" 
          class="uk-input"
          name="max-amount" 
          v-validate="'numeric'"
          v-model="maxAmount"/>
        </div>

Answer 1

您可以绑定max-amountmin_value的v-validate规则<input>：

<input name="min-amount" v-model="minAmount">
<input name="max-amount"
       v-validate="'numeric|min_value:' + minAmount"
       v-model="maxAmount">

演示

另请注意，如果您没有使用文本输入的特定原因，则应考虑使用<input type="number">(而不是<input type="text">)，以便用户只能输入数值。