简介：Element Plus 中的 el-form 是一个表单组件，用于快速构建表单并进行数据校验。它提供了丰富的表单元素和验证规则，使表单开发变得更加简单和高效。可以搭配el-dialog实现当前页面的登录、注册页 ，这两天在vue3中用到了表单登录，特意记录一下，这里没有封装，直接使用的。
效果：
1、登录页面，弹出框表单
<el-dialog v-model="dialogFormVisible" class="poup_box">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="登录" name="login_one">
<el-form ref="ruleFormRef" :model="loginForm" :rules="loginRules" class="login_one">
<el-form-item label="用户" prop="username" v-if="loginStatus">
<el-input clearable v-model="loginForm.username" autocomplete="off" placeholder="请输入用户名" />
</el-form-item>
<el-form-item label="邮箱" prop="email" v-else>
<el-input v-model="loginForm.email" autocomplete="off" placeholder="请输入邮箱" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="loginForm.password" type="password" show-password autocomplete="off"
placeholder="请输入密码" />
</el-form-item>
<el-form-item class="forget_item">
<div @click="changeEmail">
<span v-if="loginStatus">邮箱登录</span>
<span v-else>用户名登录</span>
</div>
</el-form-item>
<el-form-item class="checks_box">
<el-checkbox v-model="checked1" size="large" class="checks_inpt" />
<div class="checks_text">
<span>我已阅读并同意</span>
<b @click="changeAgreement">服务条款、</b>
<b>隐私政策</b>
</div>
<div class="userDeal" v-if="userDeal">请阅读并同意协议</div>
</el-form-item>
<el-form-item class="login_item">
<el-button @click="userLogin(ruleFormRef)" :loading="isLoading">
<span v-if="isLoading">登录中......</span>
<span v-else>登录</span>
</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="注册" name="register_two">
<el-form ref="ruleFormRef2" :model="registerForm" :rules="registerRules" class="register_two">
<el-form-item label="用户" prop="username">
<el-input clearable v-model="registerForm.username" autocomplete="off" placeholder="请输入用户名" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="registerForm.email" autocomplete="off" placeholder="请输入邮箱" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="registerForm.password" type="password" show-password autocomplete="off"
placeholder="密码由字母、数字或符号组成" />
</el-form-item>
<el-form-item label="邮箱验证码" prop="smsCode" class="auth_code">
<el-input v-model="registerForm.smsCode" autocomplete="off" placeholder="请输入验证码" />
<div class="auth_text">
<span @click="getAuthCode(ruleFormRef2)" v-if="authCodeNum">获取验证码</span>
<span class="auth_time" v-else>{
{ registerNum }}秒后重发</span>
</div>
</el-form-item>
<el-form-item class="checks_box">
<el-checkbox v-model="registerCks" size="large" class="checks_inpt" />
<div class="checks_text">
<span>我已阅读并同意</span>
<b @click="changeAgreement">服务条款、</b>
<b>隐私政策</b>
</div>
<div class="userDeal" v-if="registerDeal">请阅读并同意协议</div>
</el-form-item>
<el-form-item class="login_item register_item">
<el-button @click="registerUser(ruleFormRef2)">注册</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</el-dialog>2、相关参数，多去少补
import { ElMessage } from 'element-plus'
//import { ref,reactive,toRefs,computed } from 'vue';
//import { useStore } from 'vuex';
import { useRouter, useRoute } from 'vue-router';
//const store = useStore();
const router = useRouter();
//const route = useRoute();
//const state = reactive({});
import { reactive, ref, onMounted } from 'vue';
import func from 'vue-temp/vue-editor-bridge';
const loginStatus = ref(true);//用户/邮箱
const isLoading = ref(false); //按钮loading
import type { FormInstance, FormRules } from 'element-plus';
const ruleFormRef = ref<FormInstance>()
const ruleFormRef2 = ref<FormInstance>()
// 用户登录还是邮箱登录
function changeEmail() {
loginStatus.value = !loginStatus.value;
}
// 登录
const loginForm = reactive({
code: "",
email: "",
password: "",
smsCode: "",
username: "",
uuid: ""
})
const loginRules = reactive({
username: [
{
required: true,
message: '用户名为4~16字符之间（中文、字母、数字或下划线）',
min: 6, max: 18,
trigger: 'blur',
},],
email: [
{ required: true, message: '请填写正确的邮箱格式', trigger: 'blur' },
{ min: 6, max: 18, message: '邮箱字符为6~18之间', trigger: 'blur' },
],
password: [
{
required: true,
message: '密码为6~18位字母、数字和符号',
min: 6, max: 18,
trigger: 'blur',
},
// { min: 6, max: 18, message: '密码字符为6~18之间', trigger: 'blur' },
],
})
// 注册
const registerForm = reactive({
code: "",
email: "",
password: "",
smsCode: "",
username: "",
uuid: ""
})
const registerRules = reactive({
username: [
{ required: true, message: '用户名为4~16位之间字符', trigger: 'blur', },
{ min: 4, max: 16, message: '4~16位中文、字母、数字或下划线', trigger: 'blur' },
],
email: [
{ required: true, message: '请填写正确的邮箱格式', trigger: 'blur' },
{ min: 6, max: 18, message: '邮箱为6~18位之间字符', trigger: 'blur' },
],
password: [
{
required: true,
message: '密码为6~18位字符，必须包含字母、数字和符号',
min: 6, max: 18,
trigger: 'blur',
},
],
smsCode: [
{
required: true,
message: '请输入验证码',
trigger: 'blur',
},
],
})
const checked1 = ref(false);//登录协议
const userDeal = ref(false);//提示用户
const registerCks = ref(false);//注册协议
const registerDeal = ref(false);//注册状态
const authInfo = reactive({})//注册uuid
//登录信息
const loginInfo = reactive({})
// const formLoading = ref(false);
//弹框默认
const dialogFormVisible = ref(false);
//tab默认选中
const activeName = ref('login_one')
//注册/登录
const loginOrRetister = ref(true);
//验证码时间
const registerNum = ref(180);
//文字还是验证码
const authCodeNum = ref(true);3、事件方法
<script setup lang='ts'>
// tab切换事件
function handleClick(tab, event) {
const iAgree = document.querySelector(".form_footer");
if (activeName.value === "register_two") {// 注册
loginOrRetister.value = true;
iAgree.style.display = "none";
} else if (activeName.value === "login_one") {// 登录
loginOrRetister.value = false;
iAgree.style.display = "block";
}
}
// 右上角注册/登录状态切换
function choseResgister() {
if (loginOrRetister.value === true) {
loginOrRetister.value = false;
activeName.value = "register_two";
} else if (loginOrRetister.value === false) {
loginOrRetister.value = true;
activeName.value = "login_one";
}
}
</script>这里的Element Plus组件使用的全局引入，所以可以直接使用；
样式大家自己写下吧！
然后点击登录、注册时，表单里的输入框验证，也有做，但是有时管用，有时不管用，这里给大家文档地址，自己看吧！
表单验证
https://element-plus.org/zh-CN/component/form.html#%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C