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