メールフィールドがあります
<template>
<v-form v-model="valid">
<v-text-field
label="Name"
v-model="name"
:rules="nameRules"
:counter="10"
required
></v-text-field>
<v-text-field
label="E-mail"
v-model="email"
:rules="emailRules"
></v-text-field>
</v-form>
</template>
とのような検証ルール、
<script>
export default {
data: () => ({
valid: false,
name: '',
nameRules: [
v => !!v || 'Name is required',
v => v.length <= 10 || 'Name must be less than 10 characters'
],
email: '',
emailRules: [
v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
]
})
}
</script>
ただし、フォームを送信するたびにフォームを検証します。email.length> 0の場合にのみ電子メールを検証する必要があります。つまり、電子メールは必須フィールドではありませんが、電子メールを入力した場合は、検証する必要があります。
このようにスクリプトで:rules="[emailRules.em]"
を変更すると、
emailRules: {
em:v => {
if(v.length > 0 && /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) )
return ''E-mail must be valid';
return true;
}
}
常にtrueを返します
ルールの先頭に条件!vを追加するだけです:
emailRules: [
v => !v || /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
]
これは私のために働いた。
email: value => {
if(value.length > 0) {
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.';
}
}
私は自分の関数をこのように監視し、次のように空でない場合にのみ電子メールルールを適用します。
テンプレート:
<v-text-field
v-model="e_Mail"
:rules="emailRules"
prepend-icon="mail"
label="Email Address"
></v-text-field>
脚本:
<script>
export default {
data () {
return {
e_Mail: '',
emailRules:[],
}
},
watch: {
e_Mail: function (mail) { // e_Mail is the exact name used in v-model
if (mail !== '') {
this.emailRules = [ v => (v.match(/^(([^<>()[\]\\.,;:\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,}))$/)) || 'Invalid Email address']
} else if (mail === '') {
this.emailRules = []
}
}
}
}
</script>
これは私のために働いた、それがあなたのために働くことを願っています:)
それを見てください。
emailRules: [ v => /.+@.+/.test(v) || 'Invalid Email address' ]