최소/최대 검증 - Vuetify

최소/최대 검증 - Vuetify

5천에서 5만 사이의 숫자만 입력할 수 있는지 확인해야 합니다.현재 다음 코드를 사용하고 있습니다.

rules: {
     required: value => !!value || 'Required.',
     loanMin: value => value <= 5000 || 'Loan should be above £5000',
     loanMax: value => value >= 50000 || 'Max should not be above £50,000',
}

필드에 적용되는 규칙은 다음과 같습니다.

<v-text-field 
  height="5" 
  :rules="[rules.loanMin, rules.loanMaxMax, rules.required]" 
  editable 
  v-model="sliderLoan" 
  @change="principleLogger(sliderLoan)" 
  persistent-hint 
  outline 
  label="Loan Amount" 
  type="number"
></v-text-field>

하나의 필드에 여러 규칙을 적용하는 방법

템플릿 내

<v-text-field
    label="Example" 
    v-model="example" 
    :rules="exampleRules"
></v-text-field>

데이터 내

example: "",
exampleRules: [ 
    v => !!v || "This field is required",
    v => ( v && v >= 5000 ) || "Loan should be above £5000",
    v => ( v && v <= 50000 ) || "Max should not be above £50,000",
],

참고 자료: https://vuetifyjs.com/en/components/forms/, playground에서 샘플 코드를 확인합니다.

보너스: 이 질문의 일부가 아닌 관련 질문입니다.조금 변경 후 최소/최대 길이 검증에도 동일하게 사용할 수 있습니다.

example: "",
exampleRules: [ 
    v => !!v || "This field is required", 
    v => ( v && v.length >= 10 ) || "This field must have atleast 10 characters",
    v => ( v && v.length <= 100 ) || "This field exceeds maximum allowed characters",
],

다른 해결책을 찾았어요

<v-text-field
    v-model="myNumber"
    :min="minValue"
    :max="maxValue"
    hide-details
    single-line
    type="number"
/>

여기서 minValue 및 maxValue는 데이터에 정의되어 있습니다.

Vue:

<v-text-field 
    height="5" 
    :rules="rules" 
    editable 
    v-model="sliderLoan" 
    @change="principleLogger(sliderLoan)" 
    persistent-hint 
    outline 
    label="Loan Amount" 
    type="number"
/>

스크립트:

rules: [
         v => !!v || 'Required',
         v => v >= 5000 || 'Loan should be above £5000',
         v => v <= 50000 || 'Max should not be above £50,000',
    ],

몇 가지 실수가 있습니다.당신은 가지고 있다rules.loanMaxMax,어느 쪽인가 하면rules.loanMax,또한 부호로 규칙을 바꿀 필요가 있습니다.

rules: {
   required: value => !!value || 'Required.',
   loanMin: value => value >= 5000 || 'Loan should be above £5000',
   loanMax: value => value <= 50000 || 'Max should not be above £50,000',
 }

코드펜 참조

사용자 지정 텍스트 필드 규칙이 필요하며 사용자 지정 최소값과 최대값이 입력되었습니다.

<v-text-field
  height="5"
  :rules="[rules.loanMin(sliderLoan,5000,'USD'), rules.loanMaxMax(sliderLoan,50000,'USD')]"
  editable
  v-model="sliderLoan"
  @change="principleLogger(sliderLoan)"
  persistent-hint
  outline
  label="Loan Amount"
  type="number"
></v-text-field>

rules: {
   loanMin(value,min,currency) {
        return (value || "") >= min || `Loan must be at least ${min} {currency}`;
   },
   loanMaxMax(value,max,currency) {
        return (value || "") <= max || `Loan may not be greater than ${max} ${currency}.`;
   }
}

저는 이 SO페이지에서 이 질문에 답했습니다.

---

v-model 변수를 규칙에 두 번째 매개 변수로 전달하기만 하면 됩니다.

<template>
  <v-input :rules=[rules.min(20, field1), rules.max(200, field1)] v-model="field1" />
</template>

<script>    
  data() {
    rules: {
      min(min, v) { 
        return (v || '').length >= min || `Value must be at least ${min}`;
      },

      max(max, v) { 
        return (v || '').length <= max || `Value may not be greater than ${max}.`;
      }
    }
  }
</script>

언급URL : https://stackoverflow.com/questions/56835707/min-max-validation-vuetify