【Vuelidate】バリデーションエラーを任意の文字列（日本語）に変更する方法。

今回は、Vuelidateを使ったフォームバリデーションについて、
エラー内容を任意のメッセージに変更する方法を記します。

Vuelidateは、英語や日本語のエラー文字列を備えているものの、
汎用的な内容のため、変更したいと思うことがあるかもしれません。

以下の方法で簡単に変更が可能です。

バリデーションエラーを任意の文字列に変更する。

デフォルトのエラーメッセージ

 <v-text-field 
      v-model="state.id" 
      variant="solo"
      label="input" 
      :counter="15" 
      required 
      @input="v$.id.$touch" 
      @blur="v$.id.$touch"
      v$.id.$errors.map(e => e.$message)
></v-text-field>
...
<script setup>
import {
    useVuelidate
} from '@vuelidate/core'
import {
    required,
    maxLength,
    minLength
} from '@vuelidate/validators'
export default {
setup(props,context) {
 const initialState = {
      id: '',
 }
 const state = reactive({
  ...initialState,
 })
const rules = {
 id: {
   required,
   minLength:minLength(4),
   maxLength:maxLength(15),
 }
}
const v$ = useVuelidate(rules, state)
return {
  state,
  v$
  }
}
</script>

これにより、上記のテキストフィールドは、

• required (必須）
• minLength:minLength(4) (4文字以上)
• maxLength:maxLength(15) (15文字未満)

ではないと、エラーが表示されます。
ただし、requiredのようにエラーが表示されるため
その文字列を変更します。

任意のエラーメッセージに変更する

<v-text-field 
  v-model="state.id" 
  variant="solo"
  label="input" 
  :counter="15" 
  required 
  @input="v$.id.$touch" 
  @blur="v$.id.$touch"
  errorMessageConnect(v$.id.$errors)
></v-text-field>
...
<script setup>
import {
  useVuelidate
} from '@vuelidate/core'
import {
  required,
  maxLength,
  minLength
} from '@vuelidate/validators'
export default {
 setup(props,context) {
  const initialState = {
   id: '',
 }
const state = reactive({
 ...initialState,
})
const rules = {
id: {
 required,
 minLength:minLength(4),
 maxLength:maxLength(15),
 }
}
const errorMessage = {
 id:{
  required:'入力必須です。',
  minLength:'4文字以上で入力してください。',
  maxLength:'15文字以内で入力してください。',
  }
 }
 const errorMessageConnect = (obj) =>{
  if(obj == []) return [];
  const el = obj.map(e => e.$property)[0];
  const validator = obj.map(e => e.$validator)[0];
  return errorMessage?.[el]?.[validator]
 }
const v$ = useVuelidate(rules, state)
return {
  state,
  errorMessageConnect,
  v$
 }
}
</script>

以上のように書きました。
具体的に、
errorMessageに添字でrulesで指定した添字を入れます。
そして、それぞれキーに、rulesと同じキーを指定します。
値にエラー時に表示されたい文字列を指定します。

const errorMessage = {
  id:{ 
    required:'入力必須です。',
    minLength:'4文字以上で入力してください。',
    maxLength:'15文字以内で入力してください。'
   }
 }

他の項目についても同様に
エラー表示を指定するのであれば、id:{}に続く形で
id:{},name:{}のように記せば、任意の文字列で表示できます。

おわりに

v$をtemplate内で出力してあげると、オブジェクトがリアクティブで
どのような値がどんなふうに変化しているか把握できます。

Vuelidateは、非同期処理にも対応しているので
dbにリクエストしてIDの不一致等調べることができます。

やはり、フロントエンドとバックエンドそれぞれでバリデーションは必要ですので
出力だけでもかなり煩雑なります。共通して利用できるので非常に便利です。