Element实现注册功能
作者:互联网
注册组件的基础布局
基于 element-ui 组件库,渲染出注册表单的 DOM 结构:
1.静态标签+样式
- <el-form ></el-form > 来一组表单标签
- <el-form-item></el-form-item> 有几个项目来几组<el-form-item>
- 每个item下面建<el-input/>
- <el-form label-width="80">可以修改表单的宽度;
- <el-input prefix-icon="el-icon-user" />给input添加前置图标;
- <el-input/>上绑 show-password 可以让input框铭文显示;
2.收集表单数据(v-model)
- <el-input v-model="regForm.username"/>绑定数据;
<template>
<!-- 注册页面的整体盒子 -->
<div class="register-container">
<!-- 注册的盒子 -->
<div class="register-box">
<!-- 标题的盒子 -->
<div class="title-box"></div>
<div class="haha"></div>
<!-- 注册的表单区域 -->
<el-form label-width="80">
<el-form-item>
<el-input
prefix-icon="el-icon-user"
placeholder="请输入账号"
v-model="regForm.username"
/>
</el-form-item>
<el-form-item >
<el-input
prefix-icon="el-icon-unlock"
placeholder="请输入密码"
v-model="regForm.password"
show-password
/>
</el-form-item>
<el-form-item >
<el-input
prefix-icon="el-icon-unlock"
placeholder="请确认密码"
v-model="regForm.repassword"
show-password
/>
</el-form-item>
<el-form-item>
<el-button type="primary">注册</el-button>
</el-form-item>
<el-form-item>
<el-link type="primary">去登录</el-link>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
//写个名字后,可以在vue面板找到这个组件Register;
name: "Register",
data() {
return {
regForm: {
username: "",
password: "",
repassword: "",
},
regFormRules: {
};
};
},
};
</script>
<style lang="less" scoped>
.register-container {
//在样式中引入src下的文件或目录,需要把@变成-@ (js文件@就可以了)
background: url("~@/assets/images/login_bg.jpg") center;
background-size: cover;
height: 100%;
.register-box {
width: 400px;
height: 405px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 0 30px;
box-sizing: border-box;
.title-box {
height: 60px;
background: url("~@/assets/images/login_title.png") center no-repeat;
}
.el-button {
width: 100%;
}
.haha {
height: 1px;
background-color: red;
margin-bottom: 20px;
}
}
}
</style>
校验表单数据
1.校验表单输入规范
(1)给el-form绑定model和rules属性,并在data中声明rules规则<el-form :model="regForm" :rules="regFormRules" label-width="80" >
(2)给每个el-form--item绑定prop属性,表示当前需要校验的字段(与data中声明保持一致)
<el-form-item prop='username'>
(3)给每一个el-input绑定v-model (对象.属性)
<el-input prefix-icon="el-icon-user" placeholder="请输入账号" v-model="regForm.username" />
(4)将注册表单的校验规则声明在data()中(注册),与后台接口保持一致。
- 声明表单数据
regForm: { username: "", password: "", repassword: "", },
- 声明表单规则
regFormRules: { username: [ // 失去焦点时:显示“请输入用户名”;校验长度; { required: true, message: "请输入用户名", trigger: "blur" }, // 自定义校验规则: { pattern: /^[a-z\d]{1,10}$/i, message: "用户名由数字跟字母组成,长度1-10", trigger: "blur", }, ], password: [ { required: true, message: "请输入密码", trigger: "blur" }, { pattern: /^\S{6,15}$/i, message: "密码需由6-15位的非空字组成", trigger: "blur", }, ], repassword: [ { required: true, message: "请再次输入密码", trigger: "blur" }, { pattern: /^\S{6,15}$/i, message: "密码需由6-15位的非空字组成", trigger: "blur", }, ], },
2.校验两次密码是否一致
(1)在data函数里,return之前定义一个校验函数,然后在需要校验的repassword中进行调用
//自定义确认密码的,value当前字段的值,callback回调函数 //https://element.eleme.cn/#/zh-CN/component/form 复制 var validatePass2 = (rule, value, callback) => { if (value === "") { callback(new Error("请再次输入密码")); } else if (value !== this.regForm.password) { callback(new Error("两次输入密码不一致!")); } else { //调用callback不传值表示校验通过 callback(); } }; *************************************************** 注意位置是在 data(){ (这里放上面那一段代码!!!) return }
(2)在定义的regFormRules的repassword里定义一个新对象,进行调用
// 确认密码需要跟原密码保持一致,调用一下上面定义的函数 { validator: validatePass2, trigger: "blur" }, **************完整如下,位置别放错了************************** repassword: [ { required: true, message: "请再次输入密码", trigger: "blur" }, { pattern: /^\S{6,15}$/i, message: "确认密码需由6-15位的非空字组成", trigger: "blur", }, // 确认密码需要跟原密码保持一致,调用一下上面定义的函数 { validator: validatePass2, trigger: "blur" }, ],
兜底校验
简而言之:它可以对表单进行兜底校验。使用validata方法,会得到一个布尔值,只有所有的都符合规则,返回true。
ref--->获取Dom标签,就可以操作它,使用它的方法。
<el-form :model="regForm" :rules="regFormRules" ref="regFormReg" label-width="80" >
派发一个事件,监听表单提交。给提交按钮添加一个点击事件@click="handleReg";
<el-button type="primary" @click="handleReg">注册</el-button>
在methods中定义,进行validata方法调用,进行表单校验。
methods: { handleReg() { // 兜底校验 this.$refs.regFormReg.validate((valid) => { //valid: true全部通过校验;否则不通过校验 //通过校验,发请求;否则直接return if (!valid) return; console.log("验证成功,符合规范,发注册请求"); }); }, },
如果通过校验了发请求
1.新建文件src/api/register.js
2.在src/api/register.js中定义注册的接口函数(很后台接口保持一致)
- 导入封装好的request函数(request是默认导出,按需导出)
- 定义注册接口函数
- 按需导出
//1.导入封装好的request函数(request是默认导出,按需导出) import request from '@/utils/request'; //2.定义注册接口函数 // 以后谁用,在伟指出直接调用reqAPI即可 const reqAPI = (regForm)=>{ //request是后台返回结果的promise实例,需要return一下 // 箭头函数需要return,除非去掉箭头后面的大括号 return request({ method: "POST", url:"/api/reg", // data是个对象,把Register>index.vue中的data()里面的regForm对象中的值传给后台 // 定义好之后去Register>index.vue中调用接口,发请求 data: regForm // 也可以写成data:{...regForm},把对象中的值展开,传过去 }) } //3.按需导出 export {reqAPI}
3.导入regAPI接口函数--按需导入(src/Register/index.vue)
import { reqAPI } from "@/api/register.js";
4.兜底校验通过之后,发请求(src/Register/index.vue)
通过校验,发请求;否则直接return
methods: { handleReg() { // 兜底校验 this.$refs.regFormReg.validate((valid) => { //valid: true全部通过校验;否则不通过校验 //通过校验,发请求;否则直接return if (!valid) return; console.log("验证成功,符合规范,发注册请求"); } } }
5.async + await的目的是简化then的写法,可以用async+await替代
- await异步等待(axiox是异步),可以拿到数据
- 在接口函数前面使用await关键字,await关键字就近的函数必须用async修饰
- 使用await必须给方法名加一个修饰符async,加给就近的函数
- (当前最近是回调函数)----> async(valid)
methods: { handleReg() { // 兜底校验 this.$refs.regFormReg.validate(async(valid) => { if (!valid) return; await reqAPI(this.regForm).then((resp) => { console.log("看一下拿到了什么", resp); }); } } }
6.调用接口函数,获取后台数据,解构赋值
methods: { handleReg() { // 兜底校验 this.$refs.regFormReg.validate(async (valid) => { if (!valid) return; // 调用接口函数,获取后台数据 //const接收一下.then((resp)的值,内部二次解构拿到code跟message const { data: { code, message }, } = await reqAPI(this.regForm); }); }, },
7.接收后台返回的结果,根据code判断,О成功,1佚败
methods: { handleReg() { // 兜底校验 this.$refs.regFormReg.validate(async (valid) => { if (!valid) return; const { data: { code, message }, } = await reqAPI(this.regForm); if (code === 0) { // 成功,给个注册成功的弹窗提示 // $message是element自带的 this.$message.success(message); //然后自动回到登录页,声明式导航 this.$router.push("/login"); } else { // 失败,弹窗提示失败 this.$message.warning(message); } }); }, },
5.跳转到登录页
this.$router.push("/login");
注意啊:src/login/index.vue内部必须生成文件结构,不然会找不到<template>导致报错。
标签:功能,return,校验,Element,valid,注册,blur,message,data 来源: https://blog.csdn.net/qq_42779182/article/details/122099986