web-dev-qa-db-ja.com

Vuetifyフォーム検証-入力を照合するためのES6ルールの定義

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'
    }
}
validationecmascript-6vue.jsvuejs2vuetify.js
11
sternmd

計算されたルールでも同じことができます。

computed: {
    emailConfirmationRules() {
      return [
        () => (this.email === this.emailToMatch) || 'E-mail must match',
        v => !!v || 'Confirmation E-mail is required'
      ];
    },
}
5
Luis Molina

ルールは、フィールド確認を処理する適切な方法ではありません。 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でもこれを行う別の方法があるかもしれません。

11
Eiji Shinjo
  emailConfirmationRules: [
    (v) => !!v || 'Confirmation E-mail is required',
    (v) => v == this.email || 'E-mail must match'
  ],
1
sternmd
  <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>
0
Atchutha rama reddy Karri