Vue js vee의 암호 확인은 항상 false

Vue js vee의 암호 확인은 항상 false

vee validate를 사용하여 이 코드를 사용하여 비밀번호를 확인하려고 합니다.

<div>
    <input type="password"
           placeholder="Password"
           v-model="password"
           v-validate="'required|min:6|max:35|confirmed'"
           name="password" />
</div>
<div>
    <span>{{ errors.first('password') }}</span>
</div>
<div>
    <input type="password"
           placeholder="Confirm password"
           v-model="confirmPassword"
           v-validate="'required|target:password'"
           name="confirm_password" />
</div>
<div>
    <span>{{ errors.first('confirm_password') }}</span>
</div>

하지만 항상 "비밀번호 확인이 일치하지 않습니다"라고 표시되어 있습니다.내 코드에 무엇이 잘못되었습니까?

비밀번호 입력에는 다음 항목이 필요합니다.ref="password"- 이렇게 해서 vee-backs는 대상을 찾습니다.

<input v-validate="'required'" ... ref="password">(고마워요, 라일리).

확인됨: {target} - 입력은 {target}에서 대상 필드의 이름으로 지정한 대상 입력과 동일한 값을 가져야 합니다.

또한 Vee Validate 구문에서 오류가 발생했습니다. 변경하십시오.target:로.confirmed:

v-validate="'required|target:password'"

그래야 한다

v-validate="'required|confirmed:password'"

아래의 기본 예를 보면 두 가지 사항을 확인할 수 있습니다.

• 두 번째 입력 필드에 입력 값이 있습니까?
• 네, 두 번째 입력값이 첫 번째 입력값과 일치합니까?

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

body {
  background: #20262E;
  padding: 15px;
  font-family: Helvetica;
}

#app {
  width: 60%;
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  margin: auto;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.1.1/vee-validate.js"></script>
<script>
  Vue.use(VeeValidate);
</script>


<div id="app">

  <form id="demo">

    <!-- INPUTS -->
    <div class="input-group">
      <h4 id="header"> Enter Password</h4>

      <div class="input-fields">
        <input v-validate="'required'" name="password" type="password" placeholder="Password" ref="password">

        <input v-validate="'required|confirmed:password'" name="password_confirmation" type="password" placeholder="Password, Again" data-vv-as="password">
      </div>
    </div>

    <!-- ERRORS -->
    <div class="alert alert-danger" v-show="errors.any()">
      <div v-if="errors.has('password')">
        {{ errors.first('password') }}
      </div>
      <div v-if="errors.has('password_confirmation')">
        {{ errors.first('password_confirmation') }}
      </div>
    </div>

  </form>
</div>

자세한 것은, https://baianat.github.io/vee-validate/guide/rules.html#confirmed 를 참조해 주세요.

다음 코드가 도움이 됩니다.https://logaretm.github.io/vee-validate/advanced/cross-field-validation.html#targeting-other-fields

<template>
  <ValidationObserver>
    <ValidationProvider rules="required|password:@confirm" v-slot="{ errors }">
      <input type="password" v-model="password" />
      <span>{{ errors[0] }}</span>
    </ValidationProvider>

    <ValidationProvider name="confirm" rules="required" v-slot="{ errors }">
      <input type="password" v-model="confirmation" />
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
  </ValidationObserver>
</template>

<script>
import { extend } from 'vee-validate';

extend('password', {
  params: ['target'],
  validate(value, { target }) {
    return value === target;
  },
  message: 'Password confirmation does not match'
});

export default {
  data: () => ({
    password: '',
    confirmation: ''
  })
};
</script>

언급URL : https://stackoverflow.com/questions/51265450/vue-js-vee-validate-password-confirmation-always-false