Vee-validate 无法验证匹配密码答案

【问题标题】：Vee-validate cannot validate match passwordVee-validate 无法验证匹配密码
【发布时间】：2018-12-30 14:25:21
【问题描述】：

我正在尝试验证 match password 没有任何成功...我错了吗？ email 和 password 验证可以，但 match_password 不行

HTML

<div id="app">
  <v-app id="inspire">
    <v-container mt-1 grid-list-xl">
      <v-layout row wrap justify-space-around>
        <v-flex d-flex sm6 md6>
          <v-layout row wrap>
            <v-flex d-flex>
              <v-card class="flexcard" dark tile flat>
                <v-card-title class="card__title justify-center">PROFILE</v-card-title>
                <form @submit.prevent="onSubmit()">
                 <v-card-text class="card__text grow">

                  <v-text-field 
                      label="Email" 
                      v-model="email" 
                      data-vv-name="email" 
                      v-validate="'required|email'" 
                      :error-messages="errors.collect('email')" 
                      prepend-icon="email"
                  ></v-text-field>

                  <v-text-field 
                      type="password" 
                      v-model="password" 
                      label="Password" 
                      v-validate="'required|min:6'"  
                      data-vv-name="password" 
                      :error-messages="errors.collect('password')" 
                      prepend-icon="lock"
                  ></v-text-field>  

                  <v-text-field 
                      type="password" 
                      v-model="match_password" 
                      label="Match Password" 
                      v-validate="'required|confirmed:password'" 
                      :error-messages="errors.collect('match_password')"
                      data-vv-as="password"
                      data-vv-name="match_password" 
                      prepend-icon="lock"
                   ></v-text-field>

                </v-card-text>
                <v-card-actions>
                <v-btn round  type="submit">SUBMIT</v-btn>
                </v-card-action>
                </form>
              </v-card>
            </v-flex>
          </v-layout>
        </v-flex>
     </v-layout>
      </v-container>
  </v-app>
</div>

脚本

Vue.use(VeeValidate, {
  errorBagName: 'errors'
})

new Vue({
  el: '#app',
  $_veeValidate: { validator: 'new' },
  data: () => ({
    email: '',
    password: '',
    match_password: ''
  }),
  computed: {
  },
  methods: {
    onSubmit () {
     console.log('SUBMIT')
    },
    cancel () {
    }
  }
})

【问题讨论】：

因为模板中缺少match-password。
不，它被隐藏在最右边。
Vue js vee validate password confirmation always false的可能重复
以下链接将解决问题https://logaretm.github.io/vee-validate/advanced/cross-field-validation.html#targeting-other-fields

标签： vue.js vee-validate

【解决方案1】：

在Vue js vee validate password confirmation always false找到答案

tarfet 'password' 必须有 ref="password"

这是更新后的html代码

<div id="app">
  <v-app id="inspire">
    <v-container mt-1 grid-list-xl">
      <v-layout row wrap justify-space-around>
        <v-flex d-flex sm6 md6>
          <v-layout row wrap>
            <v-flex d-flex>
              <v-card class="flexcard" dark tile flat>
                <v-card-title class="card__title justify-center">PROFILE</v-card-title>
                <form @submit.prevent="onSubmit()">
                <v-card-text class="card__text grow">
                  <v-text-field label="Email" v-model="email" data-vv-name="email" 
                     v-validate="'required|email'" :error-messages="errors.collect('email')" prepend-icon="email"></v-text-field>
                 <v-text-field type="password" v-model="password" label="Password" v-validate="'required|min:6'"  data-vv-name="password" :error-messages="errors.collect('password')" ref="password" prepend-icon="lock"></v-text-field>
                 <v-text-field type="password" v-model="match_password" label="Match Password" v-validate="'required|confirmed:password'" :error-messages="errors.collect('match_password')"data-vv-as="password"data-vv-name="match_password" prepend-icon="lock"></v-text-field>
                </v-card-text>
                <v-card-actions>
                <v-btn round  type="submit">SUBMIT</v-btn>
                </v-card-action>
                </form>
              </v-card>
            </v-flex>
          </v-layout>
        </v-flex>
     </v-layout>
      </v-container>
  </v-app>

【讨论】：