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>
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>

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

よく使うものをいくつか

minlength

v => (v && v.length >= 2) || \'error message\' #### max

maxlength

v => (v && v.length <= 32) || \'error message\' #### required

required

v => (v && !!v) || \'error message\'

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でのバリデーションを別でまとめておく。