网站插件代码怎么用,永久免费建个人网站,购物网站产品做促销能赚钱吗,山西太原最新消息简介#xff1a;Element Plus 中的 el-form 是一个表单组件#xff0c;用于快速构建表单并进行数据校验。它提供了丰富的表单元素和验证规则#xff0c;使表单开发变得更加简单和高效。可以搭配el-dialog实现当前页面的登录、注册页 #xff0c;这两天在vue3中用到了表单登…简介Element Plus 中的 el-form 是一个表单组件用于快速构建表单并进行数据校验。它提供了丰富的表单元素和验证规则使表单开发变得更加简单和高效。可以搭配el-dialog实现当前页面的登录、注册页 这两天在vue3中用到了表单登录特意记录一下这里没有封装直接使用的。 效果 1、登录页面弹出框表单
el-dialog v-modeldialogFormVisible classpoup_boxel-tabs v-modelactiveName classdemo-tabs tab-clickhandleClickel-tab-pane label登录 namelogin_oneel-form refruleFormRef :modelloginForm :rulesloginRules classlogin_oneel-form-item label用户 propusername v-ifloginStatusel-input clearable v-modelloginForm.username autocompleteoff placeholder请输入用户名 //el-form-itemel-form-item label邮箱 propemail v-elseel-input v-modelloginForm.email autocompleteoff placeholder请输入邮箱 //el-form-itemel-form-item label密码 proppasswordel-input v-modelloginForm.password typepassword show-password autocompleteoffplaceholder请输入密码 //el-form-itemel-form-item classforget_itemdiv clickchangeEmailspan v-ifloginStatus邮箱登录/spanspan v-else用户名登录/span/div/el-form-itemel-form-item classchecks_boxel-checkbox v-modelchecked1 sizelarge classchecks_inpt /div classchecks_textspan我已阅读并同意/spanb clickchangeAgreement服务条款、/bb隐私政策/b/divdiv classuserDeal v-ifuserDeal请阅读并同意协议/div/el-form-itemel-form-item classlogin_itemel-button clickuserLogin(ruleFormRef) :loadingisLoadingspan v-ifisLoading登录中....../spanspan v-else登录/span/el-button/el-form-item/el-form/el-tab-paneel-tab-pane label注册 nameregister_twoel-form refruleFormRef2 :modelregisterForm :rulesregisterRules classregister_twoel-form-item label用户 propusernameel-input clearable v-modelregisterForm.username autocompleteoff placeholder请输入用户名 //el-form-itemel-form-item label邮箱 propemailel-input v-modelregisterForm.email autocompleteoff placeholder请输入邮箱 //el-form-itemel-form-item label密码 proppasswordel-input v-modelregisterForm.password typepassword show-password autocompleteoffplaceholder密码由字母、数字或符号组成 //el-form-itemel-form-item label邮箱验证码 propsmsCode classauth_codeel-input v-modelregisterForm.smsCode autocompleteoff placeholder请输入验证码 /div classauth_textspan clickgetAuthCode(ruleFormRef2) v-ifauthCodeNum获取验证码/spanspan classauth_time v-else{{ registerNum }}秒后重发/span/div/el-form-itemel-form-item classchecks_boxel-checkbox v-modelregisterCks sizelarge classchecks_inpt /div classchecks_textspan我已阅读并同意/spanb clickchangeAgreement服务条款、/bb隐私政策/b/divdiv classuserDeal v-ifregisterDeal请阅读并同意协议/div/el-form-itemel-form-item classlogin_item register_itemel-button clickregisterUser(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 refFormInstance()
const ruleFormRef2 refFormInstance()
// 用户登录还是邮箱登录
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 langts// 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
表单校验详情页https://element-plus.run/#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J0xlbmd0aCBzaG91bGQgYmUgMyB0byA1JywgdHJpZ2dlcjogJ2JsdXInIH0sXG4gIF0sXG4gIHJlZ2lvbjogW1xuICAgIHtcbiAgICAgIHJlcXVpcmVkOiB0cnVlLFxuICAgICAgbWVzc2FnZTogJ1BsZWFzZSBzZWxlY3QgQWN0aXZpdHkgem9uZScsXG4gICAgICB0cmlnZ2VyOiAnY2hhbmdlJyxcbiAgICB9LFxuICBdLFxuICBjb3VudDogW1xuICAgIHtcbiAgICAgIHJlcXVpcmVkOiB0cnVlLFxuICAgICAgbWVzc2FnZTogJ1BsZWFzZSBzZWxlY3QgQWN0aXZpdHkgY291bnQnLFxuICAgICAgdHJpZ2dlcjogJ2NoYW5nZScsXG4gICAgfSxcbiAgXSxcbiAgZGF0ZTE6IFtcbiAgICB7XG4gICAgICB0eXBlOiAnZGF0ZScsXG4gICAgICByZXF1aXJlZDogdHJ1ZSxcbiAgICAgIG1lc3NhZ2U6ICdQbGVhc2UgcGljayBhIGRhdGUnLFxuICAgICAgdHJpZ2dlcjogJ2NoYW5nZScsXG4gICAgfSxcbiAgXSxcbiAgZGF0ZTI6IFtcbiAgICB7XG4gICAgICB0eXBlOiAnZGF0ZScsXG4gICAgICByZXF1aXJlZDogdHJ1ZSxcbiAgICAgIG1lc3NhZ2U6ICdQbGVhc2UgcGljayBhIHRpbWUnLFxuICAgICAgdHJpZ2dlcjogJ2NoYW5nZScsXG4gICAgfSxcbiAgXSxcbiAgdHlwZTogW1xuICAgIHtcbiAgICAgIHR5cGU6ICdhcnJheScsXG4gICAgICByZXF1aXJlZDogdHJ1ZSxcbiAgICAgIG1lc3NhZ2U6ICdQbGVhc2Ugc2VsZWN0IGF0IGxlYXN0IG9uZSBhY3Rpdml0eSB0eXBlJyxcbiAgICAgIHRyaWdnZXI6ICdjaGFuZ2UnLFxuICAgIH0sXG4gIF0sXG4gIHJlc291cmNlOiBbXG4gICAge1xuICAgICAgcmVxdWlyZWQ6IHRydWUsXG4gICAgICBtZXNzYWdlOiAnUGxlYXNlIHNlbGVjdCBhY3Rpdml0eSByZXNvdXJjZScsXG4gICAgICB0cmlnZ2VyOiAnY2hhbmdlJyxcbiAgICB9LFxuICBdLFxuICBkZXNjOiBbXG4gICAgeyByZXF1aXJlZDogdHJ1ZSwgbWVzc2FnZTogJ1BsZWFzZSBpbnB1dCBhY3Rpdml0eSBmb3JtJywgdHJpZ2dlcjogJ2JsdXInIH0sXG4gIF0sXG59KVxuXG5jb25zdCBzdWJtaXRGb3JtID0gYXN5bmMgKGZvcm1FbDogRm9ybUluc3RhbmNlIHwgdW5kZWZpbmVkKSA9PiB7XG4gIGlmICghZm9ybUVsKSByZXR1cm5cbiAgYXdhaXQgZm9ybUVsLnZhbGlkYXRlKCh2YWxpZCwgZmllbGRzKSA9PiB7XG4gICAgaWYgKHZhbGlkKSB7XG4gICAgICBjb25zb2xlLmxvZygnc3VibWl0IScpXG4gICAgfSBlbHNlIHtcbiAgICAgIGNvbnNvbGUubG9nKCdlcnJvciBzdWJtaXQhJywgZmllbGRzKVxuICAgIH1cbiAgfSlcbn1cblxuY29uc3QgcmVzZXRGb3JtID0gKGZvcm1FbDogRm9ybUluc3RhbmNlIHwgdW5kZWZpbmVkKSA9PiB7XG4gIGlmICghZm9ybUVsKSByZXR1cm5cbiAgZm9ybUVsLnJlc2V0RmllbGRzKClcbn1cblxuY29uc3Qgb3B0aW9ucyA9IEFycmF5LmZyb20oeyBsZW5ndGg6IDEwMDAwIH0pLm1hcCgoXywgaWR4KSA9PiAoe1xuICB2YWx1ZTogYCR7aWR4ICsgMX1gLFxuICBsYWJlbDogYCR7aWR4ICsgMX1gLFxufSkpXG48L3NjcmlwdD5cbiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHt9XG59IiwidHNjb25maWcuanNvbiI6IntcbiAgXCJjb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwiYWxsb3dKc1wiOiB0cnVlLFxuICAgIFwiY2hlY2tKc1wiOiB0cnVlLFxuICAgIFwianN4XCI6IFwicHJlc2VydmVcIixcbiAgICBcInRhcmdldFwiOiBcIkVTTmV4dFwiLFxuICAgIFwibW9kdWxlXCI6IFwiRVNOZXh0XCIsXG4gICAgXCJtb2R1bGVSZXNvbHV0aW9uXCI6IFwiQnVuZGxlclwiLFxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZSxcbiAgICBcInR5cGVzXCI6IFtcImVsZW1lbnQtcGx1cy9nbG9iYWwuZC50c1wiXVxuICB9LFxuICBcInZ1ZUNvbXBpbGVyT3B0aW9uc1wiOiB7XG4gICAgXCJ0YXJnZXRcIjogMy4zXG4gIH1cbn1cbiIsIl9vIjp7fX0
