1.登录页面（opType.value==0）
2.注册页面（opType.value==1）
3.注意
el-form-item中的prop对应的是rules里面的key值
<el-form-item
label="邮箱"
prop="email"
label-width="100px"
>
</el-form-item>
4.代码
<template>
<div>
<div class="box">
<el-form
:model="formData"
:rules="rules"
ref="formDataRef"
label-width="80px"
@submit.prevent
>
<div class="title">信息</div>
<!--账号-->
<el-form-item
label="邮箱"
prop="email"
label-width="100px"
>
<span class="iconfont icon-user"></span>
<el-input
clearable
placeholder="请输入邮箱"
v-model.trim="formData.email"
size="larger"
>
<template #prefix>
<span class="iconfont icon-account"></span>
</template>
</el-input>
</el-form-item>
<template v-if="opType==1">
<!-- 密码 -->
<el-form-item
label="密码"
prop="password"
size="larger"
label-width="100px"
>
<el-input
clearable
placeholder="请输入密码"
v-model.trim="formData.password"
size="larger"
showPassword
>
<template #prefix>
<span class="iconfont icon-password"></span>
</template>
</el-input>
</el-form-item>
</template>
<!--input输入-->
<!-- 注册才显示 -->
<template v-if="opType==0">
<!--昵称-->
<el-form-item
label="昵称"
prop="nickName"
label-width="100px"
>
<el-input
clearable
placeholder="请输入你的昵称"
v-model.trim="formData.nickName"
>
<template #prefix>
<span class="iconfont icon-account"></span>
</template></el-input>
</el-form-item>
<!-- 注册密码 -->
<el-form-item
label="密码"
prop="rigPassword"
label-width="100px"
>
<el-input
clearable
placeholder="请输入你的密码"
v-model.trim="formData.rigPassword"
>
<template #prefix>
<span class="iconfont icon-password"></span>
</template></el-input>
</el-form-item>
<!-- 重复密码 -->
<el-form-item
label="重复密码"
prop="rePassword"
label-width="100px"
>
<el-input
clearable
placeholder="请再次输入你的密码"
v-model.trim="formData.rePassword"
>
<template #prefix>
<span class="iconfont icon-password"></span>
</template></el-input>
</el-form-item>
<!-- 验证码 -->
<el-form-item
label="验证码"
prop="code"
label-width="100px"
>
<div class="code">
<el-input
clearable
placeholder="请输入验证码"
v-model.trim="formData.code"
>
<template #prefix>
<span class="iconfont icon-checkcode"></span>
</template>
</el-input>
<el-button
type="primary"
@click=""
class="sendCode"
>发送验证码</el-button>
</div>
</el-form-item>
</template>
</el-form>
<div class="no-account">
<template v-if="opType==1">
<el-checkbox>记住我</el-checkbox>
<a
href="javascript:void(0)"
@click="showPanel(0)"
>去注册</a>
</template>
<template v-if="opType==0">
<a
href="javascript:void(0)"
@click="showPanel(1)"
>已有帐号？去登录</a>
</template>
</div>
<el-button
type="primary"
@click="doSubmit"
class="btn"
>
<span v-if="opType==1">登录</span>
<span v-if="opType==0">注册</span>
</el-button>
</div>
</div>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance();
// 默认为登陆页面
const opType = ref(1);
const formData = ref({});
const formDataRef = ref();
// 转换页面
const showPanel = (type) => {
opType.value = type;
};
// 判断注册重复密码是不是和注册密码一致
const checkRePassword = (rule, value, callback) => {
if (value != formData.value.rigPassword) {
callback(new Error(rule.message));
} else {
callback();
}
};
// 规则
const rules = {
email: [
{ required: true, message: "请输入邮箱" },
{ validator: proxy.Verify.email, message: "请输入正确的邮箱" },
],
password: [{ required: true, message: "请输入密码" }],
nickName: [{ required: true, message: "请输入昵称" }],
rigPassword: [
{ required: true, message: "请输入邮箱" },
{
validator: proxy.Verify.password,
message: "密码只能是数字，字母，特殊字符8-18位",
},
],
rePassword: [
{ required: true, message: "请再次输入密码" },
{ validator: checkRePassword, message: "两次输入密码不一致" },
],
};
const doSubmit = () => {
// 表单验证
formDataRef.value.validate(async (valid) => {
if (!valid) {
return;
}
let params = {};
Object.assign(params, formData.value);
// 注册
if (opType.value == 0 ) {
params.password = params.rigPassword;
delete params.rigPassword;
delete params.rePassword;
}
// 登录，将用户信息与VueCookies中比对
if (opType.value == 1) {
let cookieLoginInfo = proxy.VueCookies.get("loginInfo");
let cookiePassword =
cookieLoginInfo == null ? null : cookieLoginInfo.password;
if (params.password !== cookiePassword) {
params.password = params.password;
}
}
let url = null;
if (opType.value == 0) {
// 注册url处理
} else if (opType.value == 1) {
// 登录url处理
}
//TODO
});
};
</script>
<style lang="scss" scoped>
.box {
max-width: 500px;
width: 100%;
padding: 20px 20px 20px 0;
margin: 100px auto;
background-color: #f6f6f6;
border: 1px solid #eee;
.title {
font-size: 20px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
color: #616060;
}
.code {
width: 100%;
display: flex;
.sendCode {
margin-left: 5px;
}
}
:deep(.el-form-item__label) {
width: 100px;
}
}
.no-account {
width: 100%;
display: flex;
justify-content: space-between;
margin: 10px 0;
padding-left: 20px;
a {
text-decoration: none;
color: rgb(48, 142, 236);
font-size: 14px;
}
}
.btn {
width: 100%;
}
</style>
5.Verify.js
const regs = {
email: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
password: /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*_]{8,}$/
}
const verify = (rule, value, reg, callback) => {
if (value) {
if (reg.test(value)) {
callback()
} else {
callback(new Error(rule.message))
}
} else {
callback()
}
}
export default {
email: (rule, value, callback) => {
return verify(rule, value, regs.email, callback)
}
password: (rule, value, callback) => {
return verify(rule, value, regs.password, callback)
}
}