前端vue实现注册功能与正则校验规则
Posted 水香木鱼
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端vue实现注册功能与正则校验规则相关的知识,希望对你有一定的参考价值。
有志者事竟成,破釜沉舟百二秦关终属楚
苦心人天不负,卧薪尝胆三千越甲可吞吴。
📌博主介绍
💒首页:水香木鱼
🛫专栏:后台管理系统
✍简介: 博主姓:陈,名:春波。花名 “水香木鱼”,星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”
🔰 格言: 生活是一面镜子。 你对它笑, 它就对你笑; 你对它哭, 它也对你哭。
🔋 小目标: 成为 会设计 、会开发的 “万能钥匙”
📝文章内容
本期文章演示,木鱼就带着大家直奔主题啦!文中的注释,在等着大家去阅读。👇内容很简单的噢
✍ 一、注册表单
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-input
v-model="registerForm.username"
placeholder="请输入账号"
@blur="userAccount"
clearable
></el-input>
</el-form-item>
<el-form-item label="姓名" prop="nickName">
<el-input
v-model="registerForm.nickName"
placeholder="请输入姓名"
@blur="userName"
clearable
></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
type="password"
v-model="registerForm.password"
placeholder="请输入密码(支持8-18位数字、字母组合)"
autocomplete="off"
clearable
></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input
v-model="registerForm.phone"
placeholder="请输入手机号"
@blur="sendPhone"
clearable
></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="ciphers">
<el-input
type="password"
v-model="registerForm.ciphers"
placeholder="请再次输入密码"
autocomplete="off"
clearable
></el-input>
</el-form-item>
<el-form-item label="公司/学校" prop="companyOrSchool">
<el-input
v-model="registerForm.companyOrSchool"
placeholder="请输入公司/学校"
@blur="getCompany"
clearable
></el-input>
</el-form-item>
<!--@blur="sendEmail"-->
<el-form-item label="邮箱" prop="email">
<el-input
v-model="registerForm.email"
placeholder="请输入邮箱"
@blur="sendEmail"
clearable
></el-input>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input
v-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]\\d9$/; //不带区号校验
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密码右侧添加小眼睛切换状态
🈯前端echarts大小屏自适应与自定义Tab切换hover效果
以上是关于前端vue实现注册功能与正则校验规则的主要内容,如果未能解决你的问题,请参考以下文章