问题描述:
在对注册页面时进行邮箱格式验证,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中不需要引入。如下图: