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

Question

这是我的代码笔链接https://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 中提供的代码运行良好。但是需要为 confirmPassword 文件添加一项功能。即，在确认密码字段中，我需要检查每个带有密码字段的字符，然后我需要显示我们输入错误的字符。

Answer 1

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

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

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

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

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

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

(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