Vuefityでのバリデーションをまとめる。最初にバリデーションの一連の流れを紹介し、その後それぞれのフィールドのバリデーションを確認する。

多言語対応させた時のものを別でまとめておいた。

バリデーションの流れ

vuetify rules

メールアドレスのフィールドを例にする

template

  <v-form ref="form" v-model="valid" lazy-validation>
    <v-text-field
      v-model="email"
      :rules="emailRules"
    ></v-text-field>
    <v-btn class="mr-4" @click="submit">submit</v-btn>
  </v-form>

script

<script>
  export default {
    data: () => ({
      valid: true,
      email: null,
      emailRules: [
        value => !!value || 'Required.',
        value => (value || '').length <= 20 || 'Max 20 characters',
        value => {
          const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
          return pattern.test(value) || 'Invalid e-mail.'
        },
      ],
    }),
    mounted(){
      //エラーをリセット
      this.$refs.form.resetValidation()
    },
    methods: {
      submit() {
        if(this.$refs.form.validation()){
          //送信処理
        }
       },
    },
  }
</script>

もう一つの書き方、個人的にはこっちの方が見やすいのでこっちが好き

rulesをobjectで定義してtemplateのruleでそれぞれ個別に指定している

template

<v-form ref="form" v-model="valid" lazy-validation> 
      <v-text-field 
      v-model="email"
      :rules="[emailRules.required, emailRules.regex]"
      >
      </v-text-field> 
      <v-btn class="mr-4" @click="submit">submit</v-btn> 
 </v-form>

script

<script> 
export default { 
  data: () => ({
    valid: true,
    email: null, 
    emailRules: {
      required: v => !!v || 'E-mail is required',
      regex: v => /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(v) || 'E-mail must be valid',
    },
  }),
  mounted(){
    //エラーをリセット
    this.$refs.form.resetValidation()
  },
  methods: {
    submit() {
      if(this.$refs.form.validation()){
      //送信処理
      }
    },
  }, 
} 
</script>

それぞれのバリデーション

よく使うものをいくつか

min

v => (v && v.length >= 2) || ‘error message’

max

v => (v && v.length <= 32) || ‘error message’

required

v => (v && !!v) || ‘error message’

regex

email

v => /.+@.+\..+/.test(v) || ‘error message’

password(半角の大文字/小文字/記号をそれぞれ1つ以上含む8文字以上32文字以下の文字列)

v => /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)[a-zA-Z\d]{8,32}$/.test(v) || ‘error message’

filesize

2MBまでのファイル

v => !v || v.size < 2000000 || ‘error message’

nullableはできないみたいなのでバックエンド側で処理する必要がある。

laravelでのバリデーションを別でまとめておく。