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

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

悬赏问题

  • ¥20 请问这种量表怎么用spss量化分析(作为中介模型的因变量
  • ¥55 AD844 howland电流源如何驱动大额负载
  • ¥15 C++ /QT 内存权限的判断函数列举
  • ¥15 深度学习GFnet理解问题
  • ¥15 单细胞小提琴堆叠图代码
  • ¥50 升级strust2版本到2.3.15.1后使用ognl3.0.6.jar windows环境中没有问题,但部署到linux环境报错
  • ¥15 vue页面,node封装接口
  • ¥15 求TMS320F280039C工程模板!
  • ¥15 delphi+fastreport实现分组补空打印问题
  • ¥15 使用python把两台mysql数据库服务器数据导出和导入