1

我试图验证match password没有任何成功......我错了吗？email和验证都可以，password但不是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 () {
    }
  }
})
4

1 回答 1

2

在 Vue js vee 中找到答案验证密码确认始终为假

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>
于 2018-07-23T09:57:21.550 回答