如何使用密码验证确认密码并在每个字符处显示错误消息？

Question

这是我的码笔linkhttps://codepen.io/santoshch/pen/bGgKNWV

 <label class="form__group is-required">
    <span class="form__label">Password</span>
    <input
      class="form__input" type="password" name="form-password"
      v-model="password" @input="$v.password.$touch"
    >
    <p v-if="$v.password.$dirty">
      <span class="form__alert" v-if="!$v.password.required">Required.</span>
      <span class="form__alert" v-if="!$v.password.minLength">
        {{$v.password.$params.minLength.min}} letters at least.
      </span>
    </p>
  </label>
  <!-- Repeat Password -->
  <label class="form__group is-required">
    <span class="form__label">Repeat<br>password</span>
    <input
      class="form__input" type="password" name="form-repeat-password"
      v-model="repeatPassword" @input="$v.repeatPassword.$touch"
    >
    <p v-if="$v.repeatPassword.$dirty">
      <span class="form__alert" v-if="!$v.repeatPassword.required">Required.</span>
      <span class="form__alert" v-if="!$v.repeatPassword.sameAsPassword">
        Must be identical.
      </span>
    </p>
  </label>

得到了 Vuetify 的参考， How to validate password field with every character in Vuejs?

export default {
    data() {
        return {
        confirmPasswordRules: [
           (value) => !!value || 'type confirm password',
           (value) =>
           value === this.password ||
           'The password confirmation does not match.',
        ],
}

:rules="confirmPasswordRules"

Codepen 中提供的 Ya 代码运行良好。但还需要为 confirmPassword 文件添加一项功能。即，在 confirmpassword 字段中，我需要检查密码字段中的每个字符，然后我需要显示我们输入错误的字符。

Answer 1

首先从 HTML 中删除 :rules，然后只使用 vuelidate。从数据对象中删除属性 confirmPasswordRules。因为他们什么都没做，只是在浪费 space.

<span class="form__label">
  Repeat<br />
  password
</span>

现在比较你的两个密码时，如果你想逐个字符地检查，你会想要得到你现有密码字符串的子字符串。例如，假设密码是 test1234，如果用户开始在您的重复密码字段中输入 tes，您将密码的子字符串匹配相同的长度，这样您就不会比较 "test1234" == "tes"，取而代之的是你要比较的子字符串 "tes"=="tes"。我们通过调用 .substring(start, end) 来做到这一点。我们的起点将始终为 0，而我们的终点将是 repeatPassword 的当前长度，因此我们将获得从起点到用户重复输入密码的那一点的字符串。

要使用 Vuelidate 做到这一点，我们需要创建一个 returns 布尔值的自定义函数。所以我们创建内联函数：

(value) => value === this.password.substring(0, value.length+1)

但是，由于 vuelidate 的工作方式 this will be inaccessible。所以我们需要再传递一个参数给包含 Vue 实例的函数。我们可以通过更改我们的函数以期望两个变量来做到这一点，一个包含对象的当前值，另一个包含 Vue 实例。然后我们将用 Vue 实例的变量替换 this。

(value,vm) => value === vm.password.substring(0, value.length+1)

我们会将这个函数放在您的 validations 代码中，在 repeatPassword 下。这将使我们的 repeatPassword 对象看起来像这样：

repeatPassword: {
  required: required,
  sameAsPassword: (value, vm) =>
      value === vm.password.substring(0, value.length+1),
},

这里是完整的codesandbox

如何使用密码验证确认密码并在每个字符处显示错误消息？

How to validate confirm password with password and show error message at every character?

javascript

vue.js

vuelidate