Uncaught TypeError: callback is not a function

问题描述:

在对注册页面时进行邮箱格式验证,IDEA不报错,但是浏览器没有页面,并且报错如下: 

 解决方案:

<template>
  <div  class="register-box">
      <el-card shadow="never">
        <el-form ref="registerForm" :model="registerUser" :rules="registerUserRules">
            <div class="title">
              <h1>九洞阅坛用户注册</h1>
            </div>
            <el-form-item prop="email">
              <el-input v-model="registerUser.email" placeholder="邮箱" type="email"></el-input>
            </el-form-item>
          <el-form-item prop="phone">
            <el-input v-model="registerUser.phone" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item prop="nickName">
            <el-input v-model="registerUser.nickName" placeholder="昵称"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="registerUser.password" placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item prop="confirmPassword">
            <el-input v-model="registerUser.confirmPassword" placeholder="确认密码"></el-input>
          </el-form-item>
          <el-form-item style="position: relative; left: 35%" >
            <el-button style="padding: 10px 28px" type="primary" @click="regist">注册</el-button>
          </el-form-item>
        </el-form>
        <div class="regist-tip">注册即表示您同意并愿意遵守 <a href="#">用户协议</a> 与 <a href="#">隐私政策</a></div>
        <div class="space"> </div>
        <div class="font-14 third-service">
          <span>第三方登录/注册</span>
          <div class="third-link">
            <div class="border">
              <a href="#">
                <img src="../assets/imgs/WeChat.png">
              </a>
            </div>
            <div class="border">
              <a href="#">
                <img src="../assets/imgs/QQ.png">
              </a>
            </div>
            <div class="border">
              <a href="#">
                <img src="../assets/imgs/GitHub.png">
              </a>
            </div>
          </div>
        </div>
        <div class="font-14 left">已有账户,<a href="/">立即登录</a></div>
      </el-card>
  </div>
</template>

<script>
import {validateEMail} from "@/utils/validate";

export default {
  name: "RegisterView",
  data: ()=>({
    registerUser:{
      email: '',
      phone: '',
      nickName: '',
      password: '',
      confirmPassword: '',
      whoiam: "regist"
    },
    registerUserRules:{
      email: [
        {
          required:true,
          message:'请输入邮箱地址'
        },
        {
          validator: validateEMail,
          trigger: 'blur'
        }
      ]
    }
  }),
  methods: {
    regist(){
      this.$refs.registerForm.validate(async valid =>{
        if(!valid){
          return;
        }
        console.log("发送注册请求");

        this.axios.post('/jiudong',this.registerUser);
        // 通过store统一管理数据的操作
        // await this.$store.dispatch('login',this.loginUser);
        // // 跳转页面
        // await this.$router.push('/index.ejs');
      });
    }
  }
}
</script>

注意事项:

只在这个文件中引入验证的js文件。

main.js中不需要引入。如下图:

猜你喜欢

转载自blog.csdn.net/weixin_52875840/article/details/123402886