Display custom message for Vee-Validate regex

I have a component which is as below

  <ValidationProvider name="Password" :rules="{required: true, regex: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).*$/ }" v-slot="{ errors }">
    <div class="form-group">
      <div class="d-flex justify-content-between">
        <label for="login-password">Password</label>
      <div class="input-group input-group-merge form-password-toggle">
          class="form-control form-control-merge"
          :class="{ 'is-invalid': errors.length }"
          @input="$emit('input', $event.target.value)"
      <p class="veeValidatorError animated fadeIn">{{ errors[0] }}</p>

I am however trying to display a custom message for the regex validation to display "Your password must contain 1 upper case 1 lower case etc" instead of the default "The Password field format is invalid"

I have vee-validate imported globally in my app.js as shown below:

import Vue from 'vue'
import { ValidationProvider } from 'vee-validate/dist/vee-validate.full.esm';
import {ValidationObserver} from 'vee-validate'


const app = new Vue({
    el: '#vue-app',

I have tried doing the following in my template which is to make use of the 'extend' method which doesn't seem to be changing the message. There are no error messages, it just doesn't change the message form the default at all. Any help will be appreciated.

import { extend } from 'vee-validate';
import { regex } from 'vee-validate/dist/rules';

extend('regex', {
    message: 'Password needs to contain 1 lower case, 1 upper case etc',

export default {
  data: function () {
    return {
      input: this.value,
  methods: {},
  computed: {},

Read more here: https://stackoverflow.com/questions/67004900/display-custom-message-for-vee-validate-regex

Content Attribution

This content was originally published by oluwatyson at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: