Vuetify 自定义验证以确认密码

Question

我正在使用 Vue.js 模板和注册页面，我需要在用户注册时比较密码，因此，我添加了自定义验证规则，如下面的代码：

<v-text-field 
    label="Password" 
    v-model="password" 
    :rules="passwordRules" 
    type="password" 
    required
></v-text-field>
<v-text-field 
    label="Confirm Password" 
    v-model="confirmPassword" 
    :rules="[confirmPasswordRules,passwordConfirmationRule]"
    type="password" 
    required
></v-text-field>

脚本：

data() {
    return {
        password: "",
        confirmPassword: "",
        passwordRules: [v => !!v || "Password is required"],
        confirmPasswordRules: [v => !!v || "Password is required"],
    };
},

在计算中比较密码方法：

computed: {
    passwordConfirmationRule() {
        return () => (this.password === this.confirmPassword) || 'Password must match'
    },
}

我使用计算方法确认密码它工作正常并完美地比较密码但它在控制台中显示错误[Vuetify] Rules should return a string or boolean, received 'object' instead 所以我该如何解决这个问题？

Answer 1

您收到错误消息是因为rules“确认密码”输入的属性不包含包含规则的一维数组，而是包含confirmPasswordRules哪个是数组本身加上passwordConfirmationRule规则。

所以基本上这个

:rules="[confirmPasswordRules, passwordConfirmationRule]"

包含这个：

:rules="[[v => !!v || "Password is required"], (this.password === this.confirmPassword) || 'Password must match']"

您希望所有规则都包含在一个数组中。您可以使用该concat方法将 加入passwordConfirmationRule到confirmPasswordRules数组中，如下所示：

:rules="confirmPasswordRules.concat(passwordConfirmationRule)" 

我创建了一个 Codepen 来证明这在这里有效。

Answer 2

您可以使用

模板 ：

<v-text-field
  v-model="password"
  label="Password"
  name="password"
  prepend-icon="mdi-lock"
  type="password"
  :rules="passwordRules"
/>

<v-text-field
  v-model="confirmPassword"
  label="Confirm Password"
  name="confirmPassword"
  prepend-icon="mdi-lock"
  type="password"
  :rules="confirmPasswordRules"
/>

脚本：

data() {
    return {
      password: '',
      confirmPassword: '',
      passwordRules: [
        (value) => !!value || 'Please type password.',
        (value) => (value && value.length >= 6) || 'minimum 6 characters',
      ],
      confirmPasswordRules: [
        (value) => !!value || 'type confirm password',
        (value) =>
          value === this.password || 'The password confirmation does not match.',
      ],
    }
},

Answer 3

模板

<v-text-field
  label="Password"
  v-model="password"
  :rules="[rules.passwordRules]"
  type="password"
  required>
</v-text-field>
<v-text-field
  label="Confirm Password"
  v-model="confirmPassword"
  :rules="[rules.confirmPasswordRules, passwordConfirmationRule]"
  @update:error="checkPassword"
  type="password"
  required>
</v-text-field>

脚本

data() {
  return {
    password: "",
    confirmPassword: "",
    validPassword: "",
    rules: {
      passwordRules: v => !!v || "Password is required",
      confirmPasswordRules: v => !!v || "Password is required"
    }
  };
},
methods: {
  checkPassword(invalid) { 
    // correct: false
    if (true == invalid) {
      this.validPassword = false;
    } else {
      this.validPassword = true;
    }
   },
 }

文本字段提供“update:error”事件。如果密码有效，它将执行该事件的函数并返回 false。当函数从有效密码更改为无效密码时，返回 true。