如何在vuetify文本字段中设置密码确认规则

Question

<v-text-field ref="password" append-icon="lock" v-model="password" label="Password"type="password":rules="PasswordRules" :error-messages="errorMessages" required >
</v-text-field> 
<v-text-field ref="password2" append-icon="lock" label="Confirm Password" v-model="password2" type="password" :rules="PasswordRules2" :error-messages="errorMessages" required >
</v-text-field> 

PasswordRules: v => !!v =“口令是必需的”，v => (v & v.length >= 8) \x{e76f}‘密码必须是有效的’，PasswordRules2: v =>！v =>！！

Answer 1

如果您有一个比较data对象中两个值的验证规则，则需要在methods或computed对象中使用一个函数，因为您将无法从data对象的闭包中访问其他data属性。

您可以创建如下方法：

methods: {
    validatePassword2(value) {
      return value == this.password || "Password is not identical. password2 must be indentical to password."
    },
}

将PasswordRules2设置为：

PasswordRules2: [ v => !!v || "Password incorrect" ],

然后使用您的方法作为这样的规则：

<v-text-field 
  ref="password2" 
  :rules="PasswordRules2.concat(validatePassword2)"
  ...your other properties here...
>

您可以查看我创建的这个科德芬，以证明它是有效的。