如何使用Vuejs中的每个字符验证密码字段?

问题描述

这是我的代码笔链接 https://codepen.io/santoshch/pen/bGgKNWV

代码已经在验证两个密码字段，如果输入不匹配，则显示为必须相同.

the code is already validating both password fields, if there is mismatch in input it display as must be identical.

但需要它例如我在密码字段中输入asdfg"；如果我输入asddd"，则在确认密码字段中然后在确认密码字段中，密码字段的第 4 个字符错误，然后错误消息应显示为必须相同".

But need it as For example i am entering in password field as "asdfg" and in confirm password field if i enter "asddd" then here in confirm password field, 4th character is wrong with password field, then error message should display like "must be identical".

尝试过长度，但不知道如何开始.

Tried with the length, but not sure how to start.

 <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>

推荐答案

在您的 repeatPassword 输入中添加 @change:

Put @change on your repeatPassword input:

v-model="repeatPassword"
@input="$v.repeatPassword.$touch"
@change="comparePasswords" // Add this trigger

并添加一个方法:

comparePasswords: function () {

  for (var i = 0; i < this.repeatPassword.length; i++) {
    if(this.password.charAt(i) != this.repeatPassword.charAt(i)) {
      alert("Char at pos " + (i + 1) + " does not match");
    }
  }

}

它将逐个字符进行比较.

It will compare char by char.

这篇关于如何使用Vuejs中的每个字符验证密码字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！