vue.js - vee-validate 如何设置两个数字之间的位数限制？

Question

我试图将用户可以输入的位数限制在 3-6 之间。

出于某种原因，我找不到如何做到这一点。

这是我必须强制用户仅添加三位数字的代码

<input type="text"  name='account-field-3' v-validate="'required|digits:3'" placeholder="6" class="form-control" > 

但我需要的是3-6之间。

Answer 1

你需要使用min和max

最大：https ://baianat.github.io/vee-validate/guide/rules.html#max

最小值：https ://baianat.github.io/vee-validate/guide/rules.html#min

<input type="text"  name='account-field-3' v-validate="'required|min:3|max:6'" placeholder="6" class="form-control" > 

Answer 2

它已经很久了，但这里有一个对我有用的解决方案。

//Javascript File
import { min, max, numeric } from "vee-validate/dist/rules";
import { extend, validate, localize } from "vee-validate";
import en from "vee-validate/dist/locale/en.json";
localize({
    en
});

extend("min", min);
extend("max", max);
extend("numeric", numeric);

extend('digits_between', {
  async validate(value, { min, max }) {
        const res = await validate(value, `numeric|min:${min}|max:${max}`,)
            return res.valid;
  },
  params: ['min', 'max'],
  message: 'The {_field_} must be between {min} and {max} digits'
});

<!-- vue file -->
<ValidationProvider
  rules="digits_between:3,8"
  v-slot="{ errors }"
  name="Country"
>
  <input v-model="value" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>