programing

vee-dismit 어떻게 두 숫자 사이에 자리 제한을 설정할 수 있습니까?

prostudy 2022. 6. 4. 08:09
반응형

vee-dismit 어떻게 두 숫자 사이에 자리 제한을 설정할 수 있습니까?

사용자가 입력할 수 있는 자릿수를 3~6자리까지 제한하려고 합니다.

무슨 이유인지 나는 그것을 어떻게 하는지 모르겠다.

이것은 3자리 숫자만 추가하도록 사용자에게 강제해야 하는 코드입니다.

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

하지만 내가 필요한 건 3-6 사이야.

를 사용해야 합니다.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" > 

오랜 시간이 흘렀지만 여기 나에게 효과가 있었던 해결책이 있다.

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

언급URL : https://stackoverflow.com/questions/48584469/vee-validate-how-to-set-digit-limit-between-two-number

반응형