m0_56047852 2022-07-03 18:06 采纳率: 87.5%
浏览 57
已结题

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

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

img

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


  • 写回答

4条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-07-03 19:06
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 7月13日
  • 已采纳回答 7月5日
  • 创建了问题 7月3日

悬赏问题

  • ¥15 Arduino,利用modbus的RS485协议,进行对外置的温湿度传感器进行数据读取
  • ¥15 vhdl+MODELSIM
  • ¥20 simulink中怎么使用solve函数?
  • ¥30 dspbuilder中使用signalcompiler时报错Error during compilation: Fitter failed,求解决办法
  • ¥15 gwas 分析-数据质控之过滤稀有突变中出现的问题
  • ¥15 没有注册类 (异常来自 HRESULT: 0x80040154 (REGDB_E_CLASSNOTREG))
  • ¥15 知识蒸馏实战博客问题
  • ¥15 用PLC设计纸袋糊底机送料系统
  • ¥15 simulink仿真中dtc控制永磁同步电机如何控制开关频率
  • ¥15 用C语言输入方程怎么