ES6と正規表現を使用して有効なメールかどうかを確認するメール入力のある(Vuetify)フォームがあります。別のemailConfirmationRules
ルールセットを設定して、emailConfirmation
入力がemail
入力と一致するかどうかを確認するにはどうすればよいですか?
<template>
<v-form v-model="valid">
<v-text-field label="Email Address"
v-model="email"
:rules="emailRules"
required></v-text-field>
<v-text-field label="Confirm Email Address"
v-model="emailConfirmation"
:rules="emailConfirmationRules"
required></v-text-field>
</v-form>
<template>
export default {
data () {
return {
valid: false,
email: '',
emailConfirmation: '',
emailRules: [
(v) => !!v || 'E-mail is required',
(v) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
],
emailConfirmationRules: [
(v) => !!v || 'Confirmation E-mail is required',
] (v) => ??? || 'Confirmation E-mail does not match'
}
}
計算されたルールでも同じことができます。
computed: {
emailConfirmationRules() {
return [
() => (this.email === this.emailToMatch) || 'E-mail must match',
v => !!v || 'Confirmation E-mail is required'
];
},
}
ルールは、フィールド確認を処理する適切な方法ではありません。 emailConfirmationRulesはemailConfirmationが変更された場合にのみトリガーされますが、再度emailを変更すると、ルールに違反しない限りフィールドは一致しなくなります。
これは手動で処理する必要があります。
_methods: {
emailMatchError () {
return (this.email === this.emailConfirmation) ? '' : 'Email must match'
}
}
_
<v-text-field v-model='emailConfirmation' :error-messages='emailMatchError()'></v-text-field>
Vee-validateでもこれを行う別の方法があるかもしれません。
emailConfirmationRules: [
(v) => !!v || 'Confirmation E-mail is required',
(v) => v == this.email || 'E-mail must match'
],
<template>
<v-text-field
v-model="employee.email"
:rules="emailRules"
required
validate-on-blur
/>
</template>
<script>
data() {
return {
emailRules: [
v => !!v || "E-mail is required",
v =>
/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
"E-mail must be valid"
],
}
</script>