标签：功能 return 校验 Element valid 注册 blur message data
注册组件的基础布局
基于 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。