vue2.0 Element-ui中steps步骤插件和表单验证冲突?

Question

步骤描述

1.第一步

2.第二步

3.第三步

正常效果

第三步中无论哪一个输入框的值改变都会提示

问题描述

一.手动设置 active=3 (也就是刷新页面直接显示输入密码这个界面)这个效果没有问题,也不报错误,但是按照步骤一步一步走过来就报错了,请问是我哪里错了?

二.具体错误

1.设置密码输入1,失去焦点,确认新密码没有任何操作,什么显示和报错都没有

2.设置密码和确认新密码都输入1,在失去焦点的时候都没有显示和报错

3.设置密码为空失去焦点,显示提示错误,但是确认新密码失去焦点没有任何显示和报错

4.设置新密码和确认新密码有值,不为空时,让设置新密码失去焦点就报错,并且没有任何显示提示

代码

<script type="text/ecmascript-6">
  export default {
    data () {
      /*用户验证*/
      const userValidate = (rule, value, callback) => {
        let userRule = value.replace(/[0-9a-zA-Z]{6,16}/g,'');
        if (value === '') {
          callback(new Error('请输入用户名'));
        } else {
          if (userRule) {
            callback(new Error('用户名为长度在 6 到 16 位的英文字母和数字'));
          } else {
            let para = this.passResetForm.userName;
            userReqVal(para).then( response =>  {
              if(response.status > 199 && response.status < 300){
                callback();
              }
            }).catch( err => {
              if(err.response.status > 399 && err.response.status < 500){
                callback(new Error('用户名不存在'));
              }
            });
          }
        }
      };
      /*密码验证*/
      let passValidate = (rule, value, callback) => {
        let passRule = value.replace(/[0-9a-zA-Z]{1,16}/g,'');
        if (!value) {
          callback(new Error('请输入密码'));
        } else {
          if (passRule) {
            callback(new Error('密码为长度在 1 到 16 位的英文字母和数字'));
          } else if(this.passResetForm.checkPass !== '') {
            this.$refs.passResetForm.validateField('checkPass');
          }
        }
        callback();

      };
      /*二次密码验证*/
      let chePassVal = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.passResetForm.passWord) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };

      return {
        active: 1,
        labelPosition: 'right',
        passResetForm: {
          userName: '',
          passWord: '',
          checkPass: '',
          question: '',
          answer: '',
          id: '',
        },
        passResetRules: {
          userName: [
            { required: true, validator: userValidate ,trigger: 'blur' },
          ],
          passWord: [
            { required: true, validator: passValidate, trigger: 'blur' },
          ],
          checkPass: [
            { required: true, validator: chePassVal, trigger: 'blur' },
          ],
        },
      }
    },
    methods: {
      // 密码找回
      subPassReset () {
        if (this.active === 1) {
          this.active++
        } else if (this.active === 2) {
          this.active++
        } else if (this.active === 3) {
          this.active++
        } else if (this.active === 4){
          this.$router.push('/login');
        }
      },
    },
  }
</script>

求大神帮忙!!!

Answer 1

原因终于找到了,归根结底是v-if和v-show的区别.
1.v-if是动态向DOM树中添加或者删除元素,而v-show则是通过设置DOM元素的display样式控制显隐
2.v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
3.也就是说用v-if的时候影响了数据的双向绑定,不知道是不是这么解释

Answer 2

你好这种表单提交 步骤的有demo吗