1. Register.vue
<template>
<div>
<el-row>
<el-col :span="12" :offset="6">
<el-card class="box-card" shadow="always">
<div slot="header" class="has-text-centered has-text-weight-bold">
用户注册
</div>
<div>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="register-ruleForm"
>
<el-form-item label="账号" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input
type="password"
v-model="ruleForm.checkPass"
auto-complete="off"
></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input type="email" v-model="ruleForm.email"></el-input>
</el-form-item>
</el-form>
<el-row type="flex" justify="space-around" align="middle">
<el-col :span="4">
<el-button type="primary" @click="submitForm('ruleForm')">
立即注册
</el-button>
</el-col>
<el-col :span="4">
<el-button @click="resetForm('ruleForm')">
重置
</el-button>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import { userRegister } from "@/api/auth.js";
export default {
name: "Register",
data() {
var validateCheckPass = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次密码"));
} else if (value !== this.ruleForm.pass) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
};
return {
ruleForm: {
name: "",
pass: "",
checkPass: "",
email: "",
},
rules: {
name: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 1, max: 15, message: "长度在1到15位之间", trigger: "blur" },
],
pass: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, message: "长度不少于6位", trigger: "blur" },
],
checkPass: [
{ required: true, message: "请再次确认密码", trigger: "blur" },
{ validator: validateCheckPass, trigger: "blur" },
],
email: [
{ required: true, message: "请输入邮箱", trigger: "blur" },
{ type: "email", message: "邮箱格式不正确", trigger: "blur" },
],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("submit!");
//与后端交互
userRegister(this.ruleForm);
} else {
console.log("error!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script>
<style scoped>
.el-card {
margin-top: 30px;
height: 400px;
width: 600px;
text-align: center;
}
.button-center {
display: block;
margin: 0 auto;
}
</style>
2. auth.js
//auth:认证
import request from '@/utils/request'
export function userRegister(userData) {
return request({
url: '/ums/user/register',
method: 'post',
data: userData
})
}
3. 设置路由
{
path: '/register',
name: 'Register',
component: () => import('@/views/auth/Register'),
meta: { title: '注册页面'}
},
4. 页面效果