I'm using vue3 and vee-validate 4.0

This is my code.

If the password is the same, return the true and If the passwords are not the same I want to return 'password is not same'

But In the rules named validatePasswordConfirm, I want to compare the password I entered with the passwordConfirm I entered, but I think I'm referring to the wrong value.

How can I compare password and 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
    },

CodePudding user response：

Looking at your v-models it seems the structure of your data function is this:

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

So you have to refer to the properties of info object. Change your condition to this:

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