vee-validate 4.0 中的 passwordConfirm 规则

Question

我正在使用 vue3 和 vee-validate 4.0

这是我的代码。

如果密码相同，return为真，如果密码不相同，我要returnpassword is not same

但是在名为 validatePasswordConfirm 的规则中，我想将我输入的密码与我输入的 passwordConfirm 进行比较，但我认为我指的是错误的值。

如何比较 password 和 passwordConfirm？

          <div class="input-box">
            <span class="details">비밀번호</span>
            <Field
              :rules="validatePassword"
              type="password"
              placeholder="비밀번호를 입력하세요"
              v-model="info.password"
              name="password"
              required />
            <ErrorMessage name="password" />
          </div>
          <div class="input-box">
            <span class="details">비밀번호 확인</span>
            <Field
              :rules="validatePasswordConfirm"
              type="password"
              placeholder="비밀번호를 확인하세요"
              v-model="info.passwordConfirm"
              name="passwordConfirm"
              required />
            <ErrorMessage name="passwordConfirm" />
          </div>

    validatePassword(value) {
      if(!value) {
        return '필수 입력 사항입니다.'
      }
      if(!/^(?=.*[A-Za-z])(?=.*\d)(?=.*[~!@#$%^&*()+|=])[A-Za-z\d~!@#$%^&*()+|=]{8,15}$/i.test(value)) {
        return '영문 소문자, 숫자, 특수문자 최소 한 개를 포함한 8~15자의 비밀번호를 입력해주세요.'
      }
      return true
    },
    validatePasswordConfirm(value) {
      if(!value) {
        return '필수 입력 사항입니다.'
      }
      if( this.password != this.passwordConfirm ) {
        return '비밀번호가 일치하지 않습니다.'
      }
      return true
    },

Answer 1

查看您的 v-models，您的数据函数的结构似乎是这样的：

data() {
  return {
    info: {
      password: '',
      passwordConfirm: '',
    },
  };
},

所以你必须参考info对象的属性。将您的条件更改为：

if( this.info.password != this.info.passwordConfirm ) {

vee-validate 4.0 中的 passwordConfirm 规则

passwordConfirm rules in vee-validate 4.0

vue.js

vuex

vee-validate