programing

vee validate 3.0 버전에서 10진수 값을 검증하는 방법

goodsources 2022. 7. 30. 19:17
반응형

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

반응형