Min / Max validation - Vuetify

Question

I need to make sure that only numbers between 5,000 and 50,000 can be entered. I'm currently using the following code,

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',
}

With the rules applied to the field as follows:

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

How to apply multiple rules to one field?

I would suggest you use vee-validate for multiple rules to one field. It's quite easy to integrate and super friendly. — Shreeraj, Dec 13 '19 at 08:56

score 15 · Answer 1 · answered Sep 03 '20 at 15:09

In your template

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

In data

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",
],

Reference: https://vuetifyjs.com/en/components/forms/, check example code under playground.

Bonus: Not a part of this question but related, after a slight change you can use the same for min/max length validation.

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",
],

score 6 · Answer 2 · edited Apr 17 '21 at 08:21

6

I found a another solution.

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

Where minValue and maxValue are defined in your data.

edited Apr 17 '21 at 08:21

Dharman

30,962
25
85
135

answered Apr 17 '21 at 08:15

Tomas

866
16
21

Your solution works perfect, but... how to avoid writing in the field a value above of maximum? in small values (for example 20) you can work with the selector up/down but with maximum values like 4000 could be tedious... any idea? – inane May 03 '21 at 14:35
1

I think for that you should add the "rules" defined in the answers above. – Tomas May 04 '21 at 06:30

score 4 · Answer 3 · answered Dec 13 '19 at 08:53

Vue:

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

Script:

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

score 1 · Answer 4 · answered Jul 01 '19 at 12:42

You have a few mistakes. You have rules.loanMaxMax, which should be rules.loanMax,. Also you rules need to be reversed in signs:

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',
 }

See codepen

score 1 · Answer 5 · answered Apr 17 '20 at 04:43

Custom text-fields rules required and Custom Min and Max filed.

<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}.`;
   }
}

score 0 · Answer 6 · answered Feb 19 '20 at 10:00

I replied this question in this SO page.

just pass v-model variable as second parameter to your rule.

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

Min / Max validation - Vuetify

6 Answers6