时间戳

首页 > 解决方案 > 如何使用 Vuejs 中的每个字符验证密码字段？

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

问题描述

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

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

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

尝试了长度，但不知道如何开始。

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

标签： javascriptvue.jsvuelidate

解决方案

将 @change 放在您的 repeatPassword 输入上：

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");
    }
  }

}

它将逐个字符比较。

推荐阅读