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

密码规则：[v=>！！v | |“密码是必需的”，v=>（v&&v.length>=8）| |“密码必须有效”]，密码规则2：[v=>！！v | |“密码不正确”，v=>v==此。密码| |“密码不相同”]，密码2必须与密码一致

---

如果您有一个比较

数据

对象中两个值的验证规则，则需要在

方法

或

计算的

对象中使用函数，因为您无法从

数据

对象的闭包中访问其他

数据

属性

您可以创建如下方法：

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

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

将

密码规则2

设置为：

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

然后将您的方法用作如下规则：

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

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

你可以查看我创建的这个来证明它是有效的