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

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 虎子8 2022-07-03 18:16
    关注

    mapActions里面会不会也有一个 submitForm

    评论
  • 关注
    
    this.$refs[formName].validate
    

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

    评论 编辑记录
  • 你好!机器人 2022-07-04 10:13
    关注

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

    评论
查看更多回答(3条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥15 关于网上一个easyx制作的见缝插针小游戏(c++)
  • ¥15 开地址法双散列函数处理碰撞
  • ¥15 想问一下这个是什么情况 虚拟机Linux打不开了
  • ¥15 联通光猫掉注册了怎么重新注册上去
  • ¥15 关于unity开发steamvr程序遇到的问题
  • ¥60 求tc downloader的下载方式
  • ¥15 华为 快捷方式 手电筒 接口
  • ¥15 Qt6.5支不支持Android13开发啊
  • ¥20 网络只能跑一半,应该如何设置
  • ¥20 Python调用百度开发者平台人脸识别接口