Vue 自定义rule不生效问题

代码

<template>
  <div id="retrievePassword">
    <div class="me-login-box me-login-box-radius">
      <h1>忘记密码</h1>

      <el-form ref="userForm" :model="userForm" :rules="rules">

         <el-form-item prop="account" v-if="msg">
           <el-input placeholder="账号" v-model="userForm.account"></el-input>
         </el-form-item>

         <el-form-item prop="phone_number" v-if="msg">
           <el-input placeholder="手机号" v-model="userForm.phone_number"></el-input>
         </el-form-item>

         <el-form-item prop="email" v-if="msg">
           <el-input placeholder="邮箱" v-model="userForm.email"></el-input>
         </el-form-item>

        <el-form-item size="small" class="me-login-button" v-if="msg">
          <el-button type="primary" @click.native.prevent="confirm()">确认</el-button>
        </el-form-item>
        <el-form-item size="small" class="me-login-button" v-if="!msg">
          <el-button type="primary" @click.native.prevent="updatePassword()">修改密码</el-button>
        </el-form-item>
        <el-form-item size="small" class="me-return-button">
          <el-button type="primary" @click.native.prevent="gohome()">返回</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>


import md5 from "js-md5";
import Vue from "vue";

export default {
  name: 'Register',
  data() {
    const validatepass = (rule, value, callback) => {
      if(!value){
        Vue.prototype.$message.error("密码不能为空");
        callback(new Error("密码不能为空"));
      } else {
        callback();
      }
    };

    const validatepass2 = (rule, value, callback) => {
      if(!value){
        Vue.prototype.$message.error("确认密码不能为空");
      } else if(value!==this.userForm.password){
        Vue.prototype.$message.error("两次密码不一致");
      } else {

      }
    };

    return {
      msg:1,
      aaa:'',
      userForm: {
        account: '',
        phone_number: '',
        email: '',
        confirm_password:'',
        password:''
      },
      rules: {
        account: [
          {required: true, message: '请输入账号', trigger: 'blur'},
        ],
        phone_number: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
        ],
        email: [
          {required: true, message: '请输入email', trigger: 'blur'},
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
            validator: validatepass
          },
        ],
        confirm_password: [
          {
            required: true,
            message: '请再次输入密码',
            trigger: ['blur', 'change'],
            validator: validatepass2
          },
        ]

      }

    }
  },
  methods: {
    confirm() {
      let that = this
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          let finalForm = {
            userAccount: this.userForm.account,
            userPhone: this.userForm.phone_number,
            userEmail: this.userForm.email
          };
        } else {
          return false;
        }
      });
  }
}
</script>

解决方法

有v-if存在时，应在外面建一层div并放到div中，el-form-item会存在冲突，记录一下