有志者事竟成，破釜沉舟百二秦关终属楚
苦心人天不负，卧薪尝胆三千越甲可吞吴。

📌博主介绍

💒首页:水香木鱼

🛫专栏：后台管理系统

✍简介: 博主姓：陈，名：春波。花名 “水香木鱼”，星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”

🔰 格言: 生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。

🔋 小目标: 成为 会设计 、会开发的 “万能钥匙”

📝文章内容

本期文章演示，木鱼就带着大家直奔主题啦！文中的注释，在等着大家去阅读。👇内容很简单的噢

✍ 一、注册表单

template

            <div class="registerForm"> <el-form   :model="registerForm"   :rules="registerRules"   ref="registerForm"   label-width="90px"   status-icon   class="demo-ruleForm" >   <el-form-item label="账号" prop="username">     <el-inputv-model="registerForm.username"placeholder="请输入账号"@blur="userAccount"clearable     ></el-input>   </el-form-item>   <el-form-item label="姓名" prop="nickName">     <el-inputv-model="registerForm.nickName"placeholder="请输入姓名"@blur="userName"clearable     ></el-input>   </el-form-item>   <el-form-item label="密码" prop="password">     <el-inputtype="password"v-model="registerForm.password"placeholder="请输入密码(支持8-18位数字、字母组合)"autocomplete="off"clearable     ></el-input>   </el-form-item>   <el-form-item label="手机号" prop="phone">     <el-inputv-model="registerForm.phone"placeholder="请输入手机号"@blur="sendPhone"clearable     ></el-input>   </el-form-item>   <el-form-item label="确认密码" prop="ciphers">     <el-inputtype="password"v-model="registerForm.ciphers"placeholder="请再次输入密码"autocomplete="off"clearable     ></el-input>   </el-form-item>   <el-form-item label="公司/学校" prop="companyOrSchool">     <el-inputv-model="registerForm.companyOrSchool"placeholder="请输入公司/学校"@blur="getCompany"clearable     ></el-input>   </el-form-item>      <el-form-item label="邮箱" prop="email">     <el-inputv-model="registerForm.email"placeholder="请输入邮箱"@blur="sendEmail"clearable     ></el-input>   </el-form-item>   <el-form-item label="地址" prop="address">     <el-inputv-model="registerForm.address"placeholder="请输入地址"clearable     ></el-input>   </el-form-item> </el-form>      </div>      <div class="register_bottom"> <div class="left">   <el-button     type="primary"     @click="getRegister('ruleForm')"     class="left-btn"     >注册 <i class="iconfont icon-denglu"></i   ></el-button> </div> <div class="right">   <p class="right_p shapeHand" @click="getToBack()">     返回<i class="iconfont icon-back right_i"></i>   </p> </div>      </div>

script

data(){   //确认密码校验    const validatePass2 = (rule, value, callback) => {      if (value === "") { callback(new Error("请再次输入密码"));      } else if (value !== this.registerForm.password) { callback(new Error("两次输入密码不一致!"));      } else { callback();      }    };  return { //注册表单 registerForm: { username: "", //账号 nickName: "", //姓名 password: "", //密码 phone: "", //手机号 ciphers: "", //确认密码 companyOrSchool: "", //公司/学校 email: "", //邮箱 address: "", //地址 roles: [{ id: 9 }], // 默认角色 enabled: 1, // 默认激活      },//注册表单校验      registerRules: { username: [   { required: true, message: "请输入账号", trigger: "blur" },   { min: 6, max: 18, message: "账号必须为6-18位字母和数字组合" }, ], nickName: [   { required: true, message: "请输入姓名", trigger: "blur" },   { min: 2, max: 8, message: "姓名只能为中文且2-8字符" }, ], //手机号 phone: [   { required: true, message: "请输入手机号", trigger: "blur" },   { min: 11, max: 11, message: "手机号格式不正确且不满足11位数字" }, ], //输入密码 password: [   { required: true, message: "请输入密码", trigger: "blur" },   { min: 6, max: 18, message: "密码长度在6-18字符" }, ], //确认密码 ciphers: [   { required: true, trigger: "blur", validator: validatePass2 }, ], //公司/学校 校验 companyOrSchool: [   {     required: true,     message: "请输入公司/学校且只能为中文",     trigger: "blur",   }, ], //邮箱 email: [   {     required: true,     message: "请输入邮箱且保证邮箱为有效格式",     trigger: "blur",   },   {     min: 6,     max: 18,     message: "邮箱格式：test001@163.com /@126.com /@qq.com等 ",   }, ],  }}

✍ 二、校验规则

methods:{ /*------校验规则------*/    //1、账号校验    userAccount() {      const regPhone = /^[a-zA-Z0-9_-]{6,18}$/;      if ( this.registerForm.account != "" && !regPhone.test(this.registerForm.account)      ) { this.registerForm.account = "";      }    },    //2、姓名校验    userName() {      const regPhone = /[\u4E00-\u9FA5]/;      if ( this.registerForm.nickName != "" && !regPhone.test(this.registerForm.nickName)      ) { this.registerForm.nickName = "";      }    },    //3、手机号校验    sendPhone() {      const regPhone = /^1[34578]\d{9}$/; //不带区号校验      if ( this.registerForm.phone != "" && !regPhone.test(this.registerForm.phone)      ) { this.registerForm.phone = "";      }    },    //4、公司/学校校验    getCompany() {      const regPhone = /^[\u4E00-\u9FA5]+$/;      if ( this.registerForm.companyOrSchool != "" && !regPhone.test(this.registerForm.companyOrSchool)      ) { this.registerForm.companyOrSchool = "";      }    },    //5、邮箱校验 ×    sendEmail() {      const regEmail = /^[A-Za-z0-9._%-]+@([A-Za-z0-9-]+\.)+[A-Za-z]{2,4}$/;      if ( this.registerForm.email != "" && !regEmail.test(this.registerForm.email)      ) { this.registerForm.email = "";      }    },}

✍ 三、注册功能实现

methods:{    //注册    getRegister() {      let url = "/api/v1/admin/users/createUser";      let postData = this.registerForm;      post(url, postData).then((res) => { if (res.code == 200) {   this.$message({ message: '注册成功', type: 'success' });   this.getToBack(); }      });    },}

📢博主致谢

非常感谢小伙伴们阅读到结尾，本期的文章就分享到这里，总结了【前端vue实现注册功能与正则校验规则】，希望可以帮到大家，谢谢。
如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧! 点击【关注+点赞+收藏+评论+转发 】支持一下哟
🙏您的支持就是我更新的最大动力。⭐⭐⭐记得一键三连呦!⭕

💡往期精彩

🈯前端vue实现登录前，记住密码功能案例【存储cookies与base64加密版】

🈯前端element组件库中el-input密码右侧添加小眼睛切换状态

🈯前端css实现角标效果

🈯前端css解决背景图、图片自适应的问题【通用】

🈯前端echarts大小屏自适应与自定义Tab切换hover效果