显示 Vee-Validate 正则表达式的自定义消息

如何解决显示 Vee-Validate 正则表达式的自定义消息

  <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>
      <div class="input-group input-group-merge form-password-toggle">
        <input
          class="form-control form-control-merge"
          :class="{ 'is-invalid': errors.length }"
          tabindex="2"
          v-model="input"
          @input="$emit('input',$event.target.value)"
        />
      </div>
      <p class="veevalidatorError animated fadeIn">{{ errors[0] }}</p>
    </div>
  </ValidationProvider>
</template>

然而，我试图为正则表达式验证显示一条自定义消息，以显示“您的密码必须包含 1 个大写 1 个小写等”，而不是默认的“密码字段格式无效”

我在 app.js 中全局导入了 vee-validate，如下所示：

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

Vue.component('ValidationProvider',ValidationProvider);
Vue.component('ValidationObserver',ValidationObserver);

const app = new Vue({
    el: '#vue-app',components:{}
});

我尝试在我的模板中执行以下操作，以使用似乎不会更改消息的“扩展”方法。没有错误消息，它只是根本不更改默认消息。任何帮助将不胜感激。

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


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

export default {
  data: function () {
    return {
      input: this.value,};
  },methods: {},computed: {},};
</script>

解决方法

我对变量 {_field_} 和 {_value_} 很幸运。所以它看起来像：

extend("required",{
  ...required,message: "{_field_} can not be empty. ({_value_})"
});
extend("digits",{
  ...digits,message: "{_field_} needs to be {length} digits. ({_value_})"
});
extend("min_value",{
  ...min_value,message: "{_field_} needs to be at least {min}. ({_value_})"
});
extend("max_value",{
  ...max_value,message: "{_field_} needs to be less than {max}. ({_value_})"
});
extend("regex",{
  ...regex,message: "{_field_} does not match {regex}. ({_value_})"
});