如何在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）|| “密码必须有效”]，PasswordRules2：[v => !! v || “密码错误”，v => v === this.password || “密码不相同”]，密码2必须与密码相同

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

您可以查看我创建的此Codepen，以表明它可以正常工作。