VeeValidate Numbers with Decimal Points

Last Updated: May 29, 2021

In your Vue application, you need to validate the numbers with decimal points. For example, price of a product you can use the following method.

I am using VeeValidate module for this. This is really good module to validate your inputs.

First you have to install the VeeValidate lib for this

You can run the NPM command to install this

npm install vee-validate –save

First you need to import these libs to your Vue single file component 

import {
    ValidationProvider,
    ValidationObserver,
    extend
} from 'vee-validate'
import {
    required,
    regex,
    between
} from 'vee-validate/dist/rules';

extend('required', {
    ...required,
    message: '{_field_} is required'
});
extend('regex', {
    ...regex,
    message: 'Numbers Only'
});

You need to add following components also

components: {
        ValidationProvider,
        ValidationObserver
    },

I am going to validate Product Price filed. This is the normal HTML component

<input class="input is-small" type="text" v-model="product.productprice.purchase_price">

Then I can wrap the ValidationProvider as shown in the following code

 <ValidationProvider :rules="{required: true, regex: /^\d*\.?\d*$/}" vid="purchase_price" name="Prchase Price" v-slot="{ errors }">
      <input class="input is-small" type="text" v-model="product.productprice.purchase_price">
      <span class="error">{{ errors[0]}}</span>
 </ValidationProvider>

You can see I have defined the validation rules as shown in the following line

:rules="{required: true, regex: /^\d*\.?\d*$/}"

It says , Purchase Order is required and number with decimal value

Test