前端vue如何实现注册功能与正则校验规则

发布时间:2022-6-15 09:44

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

在这里插入图片描述

 一、注册表单

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 PostCSS的使用介绍 网站建设

Vue PostCSS的使用介绍

postcss 一种对css编译的工具,类似babel对js的处理,常见的功能如: 1 . 使用下一代css语法 2 . 自动补全浏览器前缀 3 . 自动把px代为转换成rem ...
Vue package.json配置深入分析 网站建设

Vue package.json配置深入分析

package.json是每个前端项目都会有的json文件,位于项目的根目录中。很多脚手架在创建项目的时候会帮我们自动初始化好 package.json。package.json有许多配置与项目息息相...