How to validate numbers in vuetify rules?

@adan 

To validate numbers in Vuetify rules, you can use the vuelidate library along with Vuetify's built-in validation options. Here is an example of how to validate a number using Vuetify rules:

1. First, install the vuelidate library by running the following command:

1

npm install vuelidate

1. Import vuelidate in your Vue component file where you want to validate the number:

1

import { required, numeric } from 'vuelidate/lib/validators'

1. In your Vuetify rules for the input field, use the required and numeric validators:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

data() {
  return {
    number: '',
  }
},
validations: {
  number: {
    required,
    numeric
  }
},

1. Add the v-model binding and v-text-field component in your template with the rules prop set to your validation rules:

1
2
3
4
5

<v-text-field 
  v-model="number"
  label="Number"
  :rules="[$v.number]"
></v-text-field>

Now, the input field will be validated to ensure it contains a number and is not empty. If the input does not meet the validation requirements, the Vuetify component will display an error message to the user.

You can also customize the error messages by adding the v-messages component with the appropriate error message:

1
2
3
4
5
6
7
8

<v-text-field 
  v-model="number"
  label="Number"
  :rules="[$v.number]"
></v-text-field>
<v-messages :messages="$v.number.$error">
  <div v-for="(error, key) in $v.number.$params" :key="key" v-if="!$v.number[key]">{{error.$message}}</div>
</v-messages>

This will display a custom error message for each validation rule that is not met.