web-dev-qa-db-ja.com

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>

しかし、それは常にパスワードの確認が一致しません。私のコードで何が間違っていましたか？

validationvue.jsvuejs2vee-validate
12
Pathum Kalhan

パスワード入力にはref="password"が必要です-これは、vee-validateがターゲットを見つける方法です。

<input v-validate="'required'" ... ref="password">（ありがとう、 ライリー ）。

確認済み：{target}-入力は、ターゲットフィールドの名前として{target}で指定されたターゲット入力と同じ値でなければなりません。

また、Vee Validate構文にエラーがあります。target:をconfirmed:に変更します

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

あるべき

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

以下の基本的な例を見てください。2つのことを確認します。

  • 2番目の入力フィールドには入力値がありますか？
  • はいの場合、2番目の入力値は最初の入力値と一致しますか？
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/[email protected]/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

32
Bennett Dams