4

我在使用 Vuetify 构建的 Vue 表单上测试 Vee-Validate 确认功能时遇到了一些困难。我要测试的组件如下所示：

<template>
    <form novalidate ref="loginForm" v-model="formValid" @submit.stop.prevent="formSubmitted" @keyup.enter="formSubmitted">
      <v-container grid-list-md text-xs-center>
        <v-layout column>
          <v-flex>
            <v-text-field
              name="passwordField"
              label="Enter your Password"
              hint="At least 6 characters"
              v-model="submissionDetails.password"
              :type="passwordShown ? 'text' : 'password'"
              min="6"
              required
              :append-icon="passwordShown ? 'visibility_off': 'visibility'"
              :append-icon-cb="()=>(passwordShown = !passwordShown)"
              v-validate="'required|min:6'"
              data-vv-name="password"
              :error-messages="errors.collect('password')"
              ref="password"
              @change="inputTriggered"
              @input="inputTriggered"
            />
          </v-flex>
          <v-flex v-show="createAccountTicked">
            <v-text-field
              name="confirmPasswordField"
              label="Confirm your Password"
              hint="At least 6 characters"
              v-model="confirmPassword"
              :type="passwordShown ? 'text' : 'password'"
              min="6"
              required
              :append-icon="passwordShown ? 'visibility_off': 'visibility'"
              :append-icon-cb="()=>(passwordShown = !passwordShown)"
              v-validate="'required|confirmed:$password'"
              data-vv-name="confirmPassword"
              :error-messages="errors.collect('confirmPassword')"/>
          </v-flex>
        </v-layout>
      </v-container>
    </form>
  </template>
  <script>
  export default {
    name: 'email-password-form',
    data () {
      return {
        submissionDetails: {
          email: '',
          password: ''
        },
        confirmPassword: '',
        passwordShown: false,
        createAccountTicked: false
      };
    }
  };
</script>

以上工作正常，错误消息正确显示在屏幕上并在密码匹配时删除，但以下测试失败：

 describe.only('validation', () => {
    it('should not attach an error to confirm password when it does match the password', async () => {
      const wrapper = mount(EmailPasswordForm, { localVue });
      wrapper.setData({
        submissionDetails: {
          password: 'wwwwww'
        },
        createAccountTicked: true,
        confirmPassword: 'wwwwww'
      });
      // await wrapper.vm.$validator.validateAll();
      // await wrapper.vm.$validator.validate('password');

      await wrapper.vm.$validator.validate('confirmPassword');

      console.log(wrapper.vm.errors.collect('confirmPassword'));
      // ['The confirmPassword confirmation does not match.']

      console.log(wrapper.vm.submissionDetails.password === wrapper.vm.confirmPassword);
      // true

      expect(wrapper.vm.errors.has('confirmPassword')).to.be.false;
      // AssertionError: expected true to be false
    });
  });

从上面的代码可以看出，虽然密码和确认密码字符串匹配，但验证器仍然将确认密码字段标记为有错误。我不明白为什么会这样，但我们将不胜感激。

4

3 回答 3

14

所以事实证明，这种行为是由于 Vee-Validate 如何比较多字段验证的值，以及这些值是如何传播的。（见本期）

最简单的解决方案是使用新的is验证规则，它允许我与模型进行比较，而不是字段的内容。我只是将v-validate规则内容从更改'required|confirmed:$password'为v-validate="{required: true, is: submissionDetails.password}"

我会把这个留在这里，以防其他人有这个问题。

于 2018-01-05T12:27:35.380 回答
1

就我而言，这两种方法中的任何一种都适用于我：

<input 
 v-validate="{ required : true,  confirmed: 'password'}" 
 type="password" name="confirm_password"  
 class="form-control" 
 placeholder="Confirm Password" 
 v-model="field.confirm_password" 
 data-vv-as="confirm password">

<input 
 v-validate="{ required : true,  confirmed: field.password}" 
 type="password" name="confirm_password"  
 class="form-control" 
 placeholder="Confirm Password" 
 v-model="field.confirm_password" 
 data-vv-as="confirm password">
于 2018-06-18T22:58:16.430 回答
0

以下解决了我在 chrome 中遇到的问题，即使在使用 Chrome 禁用时也会显示验证错误，这是由于required和confirmed:passwordas的组合v-validate="'required|confirmed:password'"

 <input

 v-validate="{ required : true,  confirmed: field.password}" 

 type="password" name="confirm_password"  
 class="form-control" 
 placeholder="Confirm Password" 
 v-model="field.confirm_password" 
 data-vv-as="confirm password">
于 2019-03-07T15:31:32.927 回答