반응형
vee validate 3.0 버전에서 10진수 값을 검증하는 방법
위도 및 로그 값을 검증하고 내 코드는 다음과 같습니다.
<ValidationProvider :name=waypointLang.form.latitude rules="required|decimal">
<div slot-scope="{ errors }">
<input v-model="waypoint.latitude" readonly name="latitude" type="text" autofocus :placeholder="waypointLang.form.latitude" class="form-control" id="latitude"/>
<span class="required-field">{{ errors[0]}}</span>
</div>
</ValidationProvider>
오류가 발생했습니다. 이러한 검증자 '10진수'가 없습니다.
잘 부탁드립니다
./plugins/vee-validate.js 파일에 다음 명령을 추가하여 사용자 지정 규칙을 추가할 수 있습니다.
extend("decimal", {
validate: (value, { decimals = '*', separator = '.' } = {}) => {
if (value === null || value === undefined || value === '') {
return {
valid: false
};
}
if (Number(decimals) === 0) {
return {
valid: /^-?\d*$/.test(value),
};
}
const regexPart = decimals === '*' ? '+' : `{1,${decimals}}`;
const regex = new RegExp(`^[-+]?\\d*(\\${separator}\\d${regexPart})?([eE]{1}[-]?\\d+)?$`);
return {
valid: regex.test(value),
};
},
message: 'The {_field_} field must contain only decimal values'
})
더 큰 숫자와 지수를 지원해야 하는 경우 BigNumber.js를 사용하여 이 문제를 해결할 수도 있습니다.
Validator.extend('decimals', {
validate(value, args) {
const decimals = new BigNumber(value).decimalPlaces()
if (args[0] === null || args[0] === undefined) {
return decimals >= 0
}
return decimals <= args[0]
}
})
언급URL : https://stackoverflow.com/questions/59156440/how-to-validate-decimal-value-in-vee-validate-3-0-version
반응형
'programing' 카테고리의 다른 글
Axios 인터셉터 내에서 Vuex 변환자를 호출하는 중 (0) | 2022.07.31 |
---|---|
vee 검증기에 사용자 지정 오류 추가(ErrorBag) (0) | 2022.07.31 |
Vue3 vuex "TypeError: vuex__"WEBPACK_IPORTED_MODULE_1_.Store.commit이 함수가 아닙니다. (0) | 2022.07.30 |
Vuex, Axios 및 여러 컴포넌트 인스턴스와의 데이터 공유 제한 (0) | 2022.07.30 |
Vuetify - 선택 시 서브메뉴 항목에 대한 활성 클래스 설정 (0) | 2022.07.30 |