Question

下面是我在vuejs中2个输入字段的代码。当前的验证规则是它们都需要为数字。我已经读过official document here。

我需要添加另一个规则，即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

您可以将min_value绑定到最大金额v-validate的{{1}}规则中：

<input>

demo

还请注意，如果您没有特定的理由使用文本输入，则应考虑使用<input type="number">（而不是<input name="min-amount" v-model="minAmount"> <input name="max-amount" v-validate="'numeric|min_value:' + minAmount" v-model="maxAmount">），以便用户只能输入数字值。

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

1 个答案: