测试 Vee-Validate 确认规则

Question

我在使用 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
    });
  });

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

Answer 1

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

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

我会把它留在这里以防其他人遇到这个问题。

Answer 2

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

<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">

Answer 3

以下修复了我在 chrome 中遇到的问题，即使使用 Chrome 禁用时也会显示验证错误，这是由于 required 和 confirmed:password 的组合] 作为 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">

测试 Vee-Validate 确认规则

Testing Vee-Validate confirmed rule

vue.js

mocha.js

vee-validate

vue-test-utils