vue提交表单的错误解决不了，谁能帮我看看

vue的，请问我这个一运行就报提交表单错误，大家能帮我看看是什么问题吗

<template>
  <el-form
    :model="ruleForm"
    status-icon
    :rules="rules"
    ref="ruleForm"
    label-width="0px"
    class="demo-ruleForm manger-container">
    <h1 class="title">后台管理员登录</h1>
    <el-form-item  prop="mangerName">
      <el-input type="text" placeholder="请输入用户名" v-model="ruleForm.mangerName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item  prop="password">
      <el-input type="password" placeholder="请输入密码" v-model="ruleForm.password" autocomplete="off" @keyup.enter.native="submitForm('ruleForm')"></el-input>
    </el-form-item>
    
    <el-form-item style="width:100%;">
      <el-button type="primary" style="width:100%;" @click="submitForm('ruleForm')" >登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import md5 from 'md5'
  import {mapActions} from 'vuex'
  export default {
    name: 'manger',
    data () {
      const validateMangerName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'))
        } else {
          if (this.ruleForm.mangerName !== '') {
            this.$refs.ruleForm.validateField('checkPass')
          }
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.ruleForm.password!== '') {
            this.$refs.ruleForm.validateField('checkPass')
          }
          callback()
        }
      }    
      return {
        ruleForm: {
          mangerName: '',
          password: ''
        },
        codeImg: '',
        rules: {
          mangerName: [
            {validator: validateMangerName, trigger: 'blur'}
          ],
          password: [
            {validator: validatePassword, trigger: 'blur'}
          ]
    },
    mounted () {
      this.draw()
    },
    methods: {
      ...mapActions(['Manger']),
      submitForm (formName) {
        const {Manger} = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const MangerParam = {}
            MangerParam['mangerName'] = this.ruleForm.mangerName
            MangerParam['password'] = md5(this.ruleForm.password)
            Manger(MangerParam).then(data => {
              this.$router.push('/views/MangerPro', () => {
                this.$notify({
                  title: '成功',
                  message: '登陆成功',
                  type: 'success'
                });
              })
            }).catch(error => {
              this.ruleForm.password = ''
              this.draw()
              this.$message.error({
                message: error.msg
              })
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
        }
     }
 }
    }
  }
</script>

<style scoped>
  .manger-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 350px;
    padding: 30px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  }
  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .remember {
    margin: 0px 0px 35px 0px;
  }
  .codeimg {
    height: 40px;
  }

  
</style>

先做一些简单的尝试，改下名称
然后将 ...mapActions(['Manger']), 注释
submitForm (formName) { 里面只console.log('submitForm')

mapActions里面会不会也有一个 submitForm

this.$refs[formName].validate

上面表单的ref是叫ruleForm，试试直接写，不用传值方式

把ref="ruleForm"的ruleForm换成其它名字试试
ref="ruleFormRef" 下面也改下
@click="submitForm('ruleFormRef')"