element callback无法正常显示内容

<template>
  <el-form ref="AccountFrom" 
           :model="account" 
           :rules="rules" 
           label-position="left" 
           label-width="0px"
           class="demo-ruleForm login-container">
    <h3 class="title">系统登录</h3>
    <el-form-item prop="username">
      <el-input type="text" v-model="account.username" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="pwd">
      <el-input type="password" v-model="account.pwd" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item prop="verifycode">
      <el-input 
      type="verity" 
      v-model="account.verifycode" 
      auto-complete="off" 
      placeholder="验证码"
      class="verify1">
      </el-input>
      <div class="verify2" @click="refreshCode">
        <Sidentify :identifyCode="identifyCode"></Sidentify>
      </div>
    </el-form-item>
      <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
    <el-form-item style="width:100%;">
      <el-button type="primary" style="width:100%;" @click.native.prevent="handleLogin" :loading="logining" >登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {requestLogin} from '../api/api';
  //引用图形验证码
  import Sidentify from '../components/identify.vue';
  //import NProgress from 'nprogress'
  export default {
    data() {
      // 验证码自定义验证规则
      const validateVerifycode = (rule, value, callback) => {
        if (value=='') {
          callback(new Error('请输入验证码'));
          console.log('你有', value);
        } else if (value !== this.identifyCode) {
          callback(new Error('验证码不正确!'));
          console.log('validateVerifycode:', value);
        } else {
          callback(new Error('验证码不正确!'));
        }
      }
      return {
        logining: false,
        account: {
          username: 'admin',
          pwd: '123456',
          verifycode:''
        },
        rules: {
          username: [
            {required: true, message: '请输入账号', trigger: 'blur'},
            //{ validator: validaePass }
          ],
          pwd: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            //{ validator: validaePass2 }
          ],
          verifycode: [
            {
              trigger: 'blur',
              validator: validateVerifycode
            }
          ]
        },
        checked: true,
        identifyCodes: "1234567890",
        identifyCode: ""
      };
    },
    mounted() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    methods: {
      // 图形验证码
      randomNum(min, max) { 
        return Math.floor(Math.random() * (max - min) + min); 
      }, 
      refreshCode() { 
        this.identifyCode = ""; 
        this.makeCode(this.identifyCodes, 4); 
      }, 
      makeCode(o, l) { 
        for (let i = 0; i < l; i++) { 
          this.identifyCode += this.identifyCodes[ 
            this.randomNum(0, this.identifyCodes.length) 
          ]; 
        } 
         // console.log(this.identifyCode); 
       },
      // 图形验证码E
      handleLogin() {
        this.$refs.AccountFrom.validate((valid) => {
          if (valid) {
            this.logining = true;
            //NProgress.start();
            var loginParams = { username: this.account.username, password: this.account.pwd };
          //    let loginParams = new URLSearchParams();
          //    loginParams.append("username",this.account.username);
           //   loginParams.append("password",this.account.pwd);
            requestLogin(loginParams).then(data => {
              this.logining = false;
              let { msg, code, token } = data;
              if(code == '200'){
                //登录成功，把用户信息保存在sessionStorage中
                sessionStorage.setItem('access-token', token);
                //跳转到后台主界面
                this.$router.push({ path: '/home' });
              }else{
                this.$message({
                  message: msg,
                  type: 'error'
                });
              }
            });

          } else {
            this.$message({
                  message: '输入有误，请重新填写！',
                  type: 'error'
                });
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    components:{
      Sidentify
    }
  }

</script>


<style>
body{
  background:url(../assets/login/lgbg.png);
}
.login-container{
  width:350px;
  margin-left:35%;
}
.el-checkbox{
  float: left;
}
.verify1 {
  width:64%;
}
.verify2 {
  width:35%;
  float: right;
}
</style>

在 rules 里面 不加相关message相关信息绑定 才可正常使用callback