Search code examples
vue.jsvuexvee-validate

passwordConfirm rules in vee-validate 4.0


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

Solution

  • 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 ) {