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 中比较密码的方法：

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

我使用computed方法来确认密码，它能够很好地比较并匹配密码，但是在控制台中显示错误[Vuetify]规则应返回字符串或布尔值，而不是'对象'，那么我该如何解决呢？

- Varinder Sohal

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展示这个工作这里.

- D Malan

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.',
      ],
    }
},

- Mahdad

---

this.password 在 confirmPasswordRules 中始终为空，你们知道为什么吗？ - Sri

有趣的是，如果我将该规则放在标签本身中，它就有效了。 例如： :rules="[!!confirmPassword ||'输入确认密码', password === confirmPassword || '密码确认不匹配。']" - Sri

当第一个密码被更改时，第二个字段的规则不会触发，导致其无法正常工作。 - ivop

我认为每当第一个字段更改时，我会清除第二个字段。或者，我可以在第一个更改后触发表单验证。 - ivop

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;
    }
   },
 }

text-field提供了"update:error"事件。如果密码有效，它会执行该事件的函数并返回false。当从有效密码更改为无效密码时，返回true给一个函数。

- DongHak

---

那么我该如何实现我想要的呢？如果规则应该返回字符串或布尔值，却收到了“函数”。根据你的回答，我只验证必填字段，但我还需要确认密码以及必填字段。 - Varinder Sohal

很抱歉，我犯了一个错误。我把计算属性误认为是方法了。我已经更新了我的文章。 - DongHak

我不想检查有效或无效的密码，我只想比较两个密码来进行注册，但是你的代码没有在任何地方比较密码。 - Varinder Sohal

Answer 4

我找到了另一种解决问题的方法，我认为这对于任何寻求解决方案的人都是值得的。

在我的模板中，我有以下内容：

<v-text-field
   v-model.trim="passwordRepeat"
   label="Confirm Password"
   type="password"
   autocomplete="new-password"
   prepend-icon="mdi-lock-check"
   required
   :rules="repeatPasswordRules"
/>

而在我的脚本部分：

computed: {
  repeatPasswordRules() {
    return [
      (v) => !!v || 'Senha não informada',
      (v) => (v && v.length >= 8) || 'A senha deve ter no mínimo 8 caracteres',
      (v) => (v === this.password) || 'Senhas diferentes!',
    ];
  },
},

当然，不要忘记验证调用

validate() {
  const valid = this.$refs.signup.validate();
  if(valid) {      
    //your actions after validation
  }
}

- tonhozi