Почему это не работает, когда sameAs используется в vuelidate?

Question

fieldName не найдено для проверки того же метода.

sameAs (блаб)

blabla = 'internalFormData.password', 'internalFormData.password.value', 'this.internalFormData.password', 'this.internalFormData.password.value', 'password', 'this.password', 'password.value'

-----------script----------
data () {
  return {
     internalFormData: {
        password: '',
        repassword: ''
      }
   }
},


validations: {
      password: {
        value: {
          required,
          minLength: minLength(8)
        }
      },
      repassword: {
        value: {
          required,
          minLength: minLength(8),
          sameAs: sameAs('internalFormData.password')
        }
      }
    }
  },



---------------template--------------
<error
   v-if="!$v.internalFormData.repassword.value.sameAs"
>
  비밀번호가 일치하지 않습니다.
<error>

Ошибка не исчезнет.

Answer 1

Простой пример с API композиции:

      import { useVuelidate } from '@vuelidate/core'
import { email, required, sameAs } from '@vuelidate/validators'

const form = {
    email: '',
    confirm_email: '',
}
const rules = {
    email: { required, email },
    confirm_email: { required, sameAs(computed(()=> form.email))) },
}
const v$ = useVuelidate(rules, form)

Answer 2

Ваш validations структура должна отражать объект (ы) в dataпри этом должно быть:

validations: {
  internalFormData: {
    password: {
      required,
      minLength: minLength(8)
    },
    repassword: {
      required,
      minLength: minLength(8),
      sameAs: sameAs('internalFormData.password')
    }
  }
}

Answer 3

Вам нужно указать свой вложенный атрибут с помощью функции. Нравится:

data(){return {
 password :{
  new: '',
  newRepeated:''
 }
}},    
validations : {
 password: {
  new : {required},
  newRepeated : {
   required,
   sameAs : sameAs( function(){return this.password.new} )
  }
 }
}

Я также предлагаю вам взглянуть на этот закрытый вопрос.https://github.com/vuelidate/vuelidate/issues/252

Answer 4

Пример для vue3:

      validations () {
    return {
        admin: { 
            type: {
                required
            },
            email: {
                required,
                email
            },
            password: { 
                required, 
                minLength: minLength(10) 
            },
            confirmPassword: { 
                required, 
                sameAs: sameAs(this.admin.password)
            }
        }
    }
}

Answer 5

Замените эту строку:

      sameAs: sameAs('internalFormData.password')

С

      sameAs: sameAs(this.internalFormData.password)

Параметр должен быть не строкой, а фактическим атрибутом, использующим this. Я не уверен, повлияют ли проверки, не идентичные данным internalFormData, на его работу, но я предлагаю вам убедиться, что они соответствуют, как показано ниже:

        validations: {
  internalFormData: {
    password: {
      required,
      minLength: minLength(8)
    },
    repassword: {
      required,
      minLength: minLength(8),
      sameAs: sameAs(this.internalFormData.password)
    }
  }
}

Answer 6

Я обнаружил, чтоsameAsбудет работать только в том случае, если ваш объект проверки является функцией.

      validations() {
  //your validations
}

вместо:

      validations: {
  //your validations
}

Answer 7

Вы должны использовать.value

      sameAs: sameAs('internalFormData.value.password')

Answer 8

попробуйте это решение:

      <template>
       <div>
            <div>
                <label>Current Password:</label>
                <input type="password" v-model="updatePassword.CurrentPassword"/>
        
                <div v-if="updatePasswordValidate.CurrentPassword.$errors.length">
                    {{ updatePasswordValidate.CurrentPassword.$errors[0].$message }}
                </div>
            </div>
            <div class="mb-4">
                <label>New Password:</label>
                <input type="password" v-model="newPassword"/>
        
                <div v-if="updatePasswordValidate.NewPassword.$errors.length">
                    {{ updatePasswordValidate.NewPassword.$errors[0].$message }}
                </div>
            </div>
            <div>
                <label>Re-type New Password:</label>
           <input type="password" v-model="updatePasswordValidate.retypePassword.$model"/>
        
                <div v-if="updatePasswordValidate.retypePassword.$errors.length">
                    {{ updatePasswordValidate.retypePassword.$errors[0].$message }}
                </div>
            </div>

            <div>
                <button
                    id="updatePassBtn"
                    @click="updateUserPassword"
                    type="button">Change Password</button>
            </div>
        </div>
 </template>


<script>
import useVuelidate from "@vuelidate/core";
import {required, sameAs, minLength} from "@vuelidate/validators";
export default {
    data() {
        return {
            updatePasswordValidate: null,
            newPassword: "",
            updatePassword: {
                CurrentPassword: null,
                NewPassword: null,
            },
        };
    },
    components: {BaseAlert},
    watch: {
        newPassword(newV) {
            this.updatePassword.NewPassword = newV;
            this.loadValidation();
        },
    },
    computed: {
        rulesUpdatePassword() {
            return {
                CurrentPassword: {
                    required,
                    minLength: minLength(8),
                },
                NewPassword: {
                    required,
                    minLength: minLength(8),
                },
                retypePassword: {
                    required,
                    minLength: minLength(8),
                    sameAs: sameAs(this.updatePassword.NewPassword, "New Password"),
                },
            };
        },
    },
    props: {
        token: {
            required: true,
        },
    },
    methods: {
        updateUserPassword() {
          console.log('handle update button')   
        },
        loadValidation() {
            this.updatePasswordValidate = useVuelidate(
                this.rulesUpdatePassword,
                this.updatePassword
            );
        },
    },
    created() {
        this.loadValidation();
    },
};
</script>