初级cv大师 2021-08-08 23:31 采纳率: 69.2%
浏览 1477
已结题

$refs.LoginFormRef.validate is not a function

#Form表单预验证报错:$refs.LoginFormRef.validate is not a function (在开发模式没有报错,弄到发布模式报错了)


<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/77.jpg" alt="" />
      </div>
      <!-- 登陆表单区域 -->
      <el-form ref="LoginFormRef" class="form_info" :rules="LoginFormRules" label-width="85px" :model="LoginForm">
        <!-- 用户名区域 -->
        <el-form-item label="用户账号:" prop="username" class="username">
          <el-input v-model="LoginForm.username" prefix-icon="el-icon-s-custom" placeholder="请输入用户账号"></el-input>
        </el-form-item>
        <!-- 密码区域 -->
        <el-form-item label="用户密码:" prop="password" class="password">
          <el-input type="password" v-model="LoginForm.password" prefix-icon="el-icon-lock" placeholder="请输入用户密码"></el-input>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item class="buttons">
          <el-button type="primary" plain @click="login">登录</el-button>
          <el-button type="info" plain @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  //登录表单数据的绑定
  data: function () {
    return {
      LoginForm: {
        username: "admin",
        password: "123456",
      },
      //表单验证规则
      LoginFormRules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ]
      }
    };
  },

  methods:{
    //表单重置
    resetLoginForm(){
      this.$refs.LoginFormRef.resetFields();
    },
    //表单预验证
    login(){
      console.log(11);
      console.log(this.$refs.LoginFormRef.validate);
      this.$refs.LoginFormRef.validate(async valid=>{
        if(!valid) return;
        let {data:res}=await this.$http.post('login',this.LoginForm);
        if(res.meta.status !==200) return this.$message.error('用户登陆失败!');
        this.$message.success('用户登陆成功');
        console.log(res);
        window.sessionStorage.setItem('token',res.data.token);
        this.$router.push('/home');
      });
    }
  }
}
</script>

开发模式下:

img

img

发布模式下:

img

img

  • 写回答

3条回答 默认 最新

  • 关注

    有以下几种可能
    第一种重新build
    第二种 把验证框架放在package.json dependencies配置中
    第三种 检查一下打包看看,是不是在打包的时候做了处理

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

报告相同问题?

问题事件

  • 系统已结题 8月31日
  • 已采纳回答 8月23日
  • 创建了问题 8月8日

悬赏问题

  • ¥15 铜与钢双金属板叠加在一起每种材料300mm长,18mm宽,4mm厚一端固定并加热至80℃,当加热端温度保持不变时另一端的稳态温度。ansys
  • ¥15 django5安装失败
  • ¥60 ios系统storm sniffer 写入http规则加密如何破解?
  • ¥15 Java与Hbase相关问题
  • ¥15 后缀 crn 游戏文件提取资源
  • ¥15 ANSYS分析简单钎焊问题
  • ¥20 bash代码推送不上去 git fetch origin master #失败了
  • ¥15 LOL外服加入了反作弊系统,现在游戏录像rofl文件离线都无法打开
  • ¥15 在centos7安装conda
  • ¥15 c#调用yolo3 dll文件获取的数据对不上