Vuetify 表单验证——定义匹配输入的 ES6 规则

Question

我有一个带有电子邮件输入的 (Vuetify) 表单，该表单使用 ES6 和正则表达式来检查它是否是有效的电子邮件。我将如何设置另一个 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'
    }
}

原文由 sternmd 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用计算规则完成相同的操作。

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

原文由 Luis Molina 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

规则不是处理字段确认的正确方法。 emailConfirmationRules 仅在 emailConfirmation 更改时触发，但如果您再次更改 _电子邮件_，您的字段将不再匹配而不会违反任何规则。

您必须手动处理：

 methods: {
  emailMatchError () {
    return (this.email === this.emailConfirmation) ? '' : 'Email must match'
  }
}

 <v-text-field v-model='emailConfirmation' :error-messages='emailMatchError()'></v-text-field>

可能还有另一种方法可以使用 vee-validate 来执行此操作。

原文由 Eiji Shinjo 发布，翻译遵循 CC BY-SA 4.0 许可协议