前端vue实现注册功能与正则校验规则
2023-09-27 14:27:10 时间
有志者事竟成，破釜沉舟百二秦关终属楚
苦心人天不负，卧薪尝胆三千越甲可吞吴。
📌博主介绍
💒首页:水香木鱼
🛫专栏：后台管理系统
✍简介: 博主姓：陈，名：春波。花名 “水香木鱼”，星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”
🔰 格言: 生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。
🔋 小目标: 成为 会设计 、会开发的 “万能钥匙”
📝文章内容
本期文章演示，木鱼就带着大家直奔主题啦！文中的注释，在等着大家去阅读。👇内容很简单的噢
✍ 一、注册表单
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]\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加密版】