前端小学鸡
2021-08-08 23:31
采纳率: 75%
浏览 163
已结题

$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配置中
    第三种 检查一下打包看看,是不是在打包的时候做了处理

    已采纳该答案
    评论
    解决 无用 3
    打赏 举报
  • 崽崽的谷雨 2021-08-09 09:14

    你这个form表单一直存在吗,还是有显示与隐藏的地方。可能,元素refs没有渲染就执行了,验证事件

    评论
    解决 1 无用
    打赏 举报
  • gzczzzzzz 2021-08-09 09:28

    重新build下呢

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题