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

Question

我有一个使用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'
    }
}

- sternmd

Answer 1

规则不是处理字段确认的正确方式。当emailConfirmation发生变化时，只有emailConfirmationRules才会被触发，但是如果您再次更改email，那么您的字段将不再匹配，而不会违反任何规则。

您必须手动处理此问题：
```js //需要手动添加检查email和emailConfirmation是否相等的逻辑。 if(email.value !== emailConfirmation.value){ //做出错误处理的逻辑 } ```

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

---

这种方法是不错的，但最好的方法是将这个方法放在computed里面。 - John

这应该是被接受的答案，谢谢！因为就像你所说的，即使规则是计算属性，它们也不会对其他组件（字段）的更改做出反应。 - knary

Answer 2

您可以使用计算规则来实现相同的效果。

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

- Luis Molina

---

有没有办法使它再次变得原始？我的表单是可重复使用的，但当使用这些规则时，它总是会在第二个表单和其他表单上显示错误。 - Sae

Answer 3

查看这篇文章https://dev59.com/DLfna4cB1Zd3GeqPuIbY#58883995

<template>
  <v-input  v-model="firstPassword" />
  <v-input :rules=[rules.equals(firstPassword)] v-model="secondPassword" />
</template>

<script>    
  data() {
  firstPassword: '',
  secondPassword: '',
    rules: {
      equals(otherFieldValue) {
        return v =>  v === otherFieldValue || 'Not equals';
      }
    }
  }
</script>

- Miguel Galindo

Answer 4

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

- sternmd

---

我认为我更新了一些东西，解决方案一直有效，但现在我也得到了未定义的值。但不是“this”，只是该值始终未定义。属性本身具有正确的值。我认为我需要改变我的验证方式。也许是vee-validate。 - prdatur

答案错误。请参考Eiji Shinjo的答案。 - sureshvv

这对我没有用。我得到了以下错误：beforeMount钩子中的错误：“TypeError：_this未定义” - Julien Salinas

这是错误的答案。规则函数在没有上下文的情况下被调用（请参见 https://github.com/vuetifyjs/vuetify/blob/e60cf638dfd671af6fc8fa4ff01fe7addc914f9c/packages/vuetify/src/mixins/validatable/index.ts#L239） - disfated

箭头函数中不可用 this。 - Riza Khan

Answer 5

  <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>

- Atchutha rama reddy Karri