vee-validate不同regex正则校验规则如何配置差异化错误提示

你当前所有正则校验共用同一份错误提示，是因为全局只注册了一个regex规则，所有使用该规则的字段都会复用同一份提示配置，可以用以下两种方案解决：

方案1：分别注册独立的校验规则 #

为两个不同的正则校验分别注册独立命名的规则，各自配置对应的错误提示，适合规则需要多处复用的场景。

脚本修改： #

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

// 注册第一个字段的校验规则
extend('allowSpecialCharRegex', {
  ...regex,
  message: '仅允许输入字母、数字、下划线、中划线和空格',
})
// 注册第二个字段的校验规则
extend('allowDotRegex', {
  ...regex,
  message: '仅允许输入字母、数字和英文句号',
})

模板修改： #

<!-- 第一个字段 -->
<ValidationProvider v-slot="{ errors }" name="First" :rules="{ allowSpecialCharRegex:/^[a-zA-Z0-9_-\s]+$/ }">
 <v-text-field
  v-model="first"
  label="First"
  :error-messages="errors"
  ></v-text-field>
</ValidationProvider>

<!-- 第二个字段 -->
<ValidationProvider v-slot="{ errors }" name="Second" :rules="{ allowDotRegex:/^[a-zA-Z0-9.]+$/ }">
 <v-text-field
  v-model="second"
  label="Second"
  :error-messages="errors"
  ></v-text-field>
</ValidationProvider>

方案2：单字段自定义错误提示 #

如果规则仅当前字段使用，不需要全局复用，可以直接在ValidationProvider上通过custom-messages属性覆盖全局规则的提示，无需修改全局注册逻辑。

模板修改（全局注册逻辑保持你原有代码即可）： #

<!-- 第一个字段 -->
<ValidationProvider 
  v-slot="{ errors }" 
  name="First" 
  :rules="{ regex:/^[a-zA-Z0-9_-\s]+$/ }"
  :custom-messages="{
    regex: '仅允许输入字母、数字、下划线、中划线和空格'
  }"
>
 <v-text-field
  v-model="first"
  label="First"
  :error-messages="errors"
  ></v-text-field>
</ValidationProvider>

<!-- 第二个字段 -->
<ValidationProvider 
  v-slot="{ errors }" 
  name="Second" 
  :rules="{ regex:/^[a-zA-Z0-9.]+$/ }"
  :custom-messages="{
    regex: '仅允许输入字母、数字和英文句号'
  }"
>
 <v-text-field
  v-model="second"
  label="Second"
  :error-messages="errors"
  ></v-text-field>
</ValidationProvider>

内容的提问来源于stack exchange，提问作者M.Pribadi