Vee验证无法验证匹配密码

时间:2018-07-23 07:30:46

标签: vue.js vee-validate

我正在尝试验证match password,但没有成功……我错了吗? emailpassword验证可以,但match_password

无效

使用VeeValidate

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 () {
    }
  }
})

1 个答案:

答案 0 :(得分:1)

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

tarfet的“密码”必须具有ref =“密码”

这是更新的html代码

TObserver