Vuetifyでのバリデーションまとめ - inokawablog

    Vuetifyでのバリデーションまとめ

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