如何驗證 Vuejs 中第 4 個字符的確認密碼字段？

Question

 password: { required: required, minLength: minLength(8), },

 <.-- Password --> <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> </div> </form>

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

我想驗證 Vuejs 中第 4 個字符的確認密碼字段？ 目前它從第一個字符開始檢查，嘗試使用 value.length < 5 但它不起作用。

我已經用 vuelidate 代碼更新了我的輸入字段

Answer 1

如果您不想在repeatPassword包含少於 4 個字符時顯示驗證（這很奇怪為什么您需要那個 btw），那么只需在代碼上添加它&& repeatPassword.length >= 4就可以了。

<p v-if="$v.repeatPassword.$dirty && repeatPassword.length >= 4"> 
<!-- only display the validation when length >= 4 -->
  <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>

Answer 2

這是一個簡單的If()else{}方式

      watch: {
        repeatPassword(v) {
//checking repeat password length is 4 or greater then 4
          if(v.length >= 4){
//then checking if repeat password is same as password
            if(v === this.password){
              console.log('Passwords are same')
            }else{
              console.log('No a same password')
            }
          }else{
            console.log('validate start after Repeat password length 4')
          }
        },
      },

工作示例： 演示