vee-validate how to set digit limit between two number?

Question

I am trying to restrict the number of digits a user can input between 3-6.

For some reason, I can't find how to do that.

this is the code I have to force user to add three digits only

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

But what I need is between 3-6.

Transude

Answer 1

You need to use min and max

Max: https://baianat.github.io/vee-validate/guide/rules.html#max

Min: 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" > 

Creech

This to validate mix max length not integral value – Latoyialatreece

Answer 2

Its been long but here is a solution which worked for me.

//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>

Aglet