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

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 的参考资料， 如何使用 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。 从您的数据 object 中删除属性confirmPasswordRules 。 因为他们什么也没做，只是在浪费空间。

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

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

要使用 Vuelidate 执行此操作，我们需要创建一个自定义 function 以返回 boolean 值。 所以我们创建了内联 function：

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

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

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

我们将把这个 function 放在您的validations代码中，在repeatPassword下。 这将使我们的repeatPassword object 看起来像这样：

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

这是一个完整的代码框