vue+elementui 登录注册页面实现

1.实现效果

2. 代码实现

2.1使用elementUI文档中Tabs标签页

2.2在components中新建两个文件 login.vue register.vue

login.vue

回车登录（ 按钮添加native-type="submit" 登录表单添加@submit.native.prevent）

<template><div class="login"><div class="login_form"><p>后台管理系统</p><el-tabs v-model="activeName" @tab-click="handleClick" ><el-tab-pane label="登录" name="first"><el-form:model="loginForm":rules="rules"ref="loginForm"@submit.native.prevent    ><el-form-item label="" prop="account" class="elItem"><el-inputtype="text"autocomplete="off"v-model="loginForm.account"prefix-icon="el-icon-user-solid"placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="" prop="password"><el-inputtype="password"autocomplete="off"v-model="loginForm.password"prefix-icon="el-icon-lock"placeholder="请输入密码"></el-input></el-form-item><el-form-item class="btns"><el-button type="primary" @click="goToLogin" native-type="submit">登录</el-button><el-button @click="resetLoginForm">重置</el-button></el-form-item></el-form></el-tab-pane><el-tab-pane label="注册" name="second">//注册组件<register></register></el-tab-pane></el-tabs></div></div>
</template><script>
//引入注册组件
import register from '@/components/register';
export default {data() {var validateAccount = (rule, value, callback) => {if (value === "") {return callback(new Error("账号不能为空"));} else if (value === "admin") {callback();} else {callback(new Error("请输入正确的用户名"));}};var validatePassword = (rule, value, callback) => {if (value === "") {callback(new Error("请输入密码"));} else if (value === "123456") {callback();} else {callback(new Error("请输入正确的密码"));}};return {loginForm: {account: "",password: "",},activeName:'first',//默认显示登录页面rules: {account: [{validator: validateAccount,trigger: "blur",},],password: [{validator: validatePassword,trigger: "blur",},],},};},methods: {
//固定的账户密码判断实现简单的登录跳转功能，只能测试用goToLogin() {this.$refs["loginForm"].validate((valid) => {if (valid) {if (this.loginForm.account != "admin" ||this.loginForm.password != "123456") {this.$message.error("账号密码不正确");return false;} else {this.$message({ message: "登陆成功", type: "success" });this.$router.push("/home");}} else {this.$message.error("登陆失败");return false;}});},resetLoginForm() {this.$refs["loginForm"].resetFields();},handleClick(){}},components:{register}
};
</script><style scoped lang='less'>
.login {width: 100%;height: 100vh;background-image: url("../assets/login/login.jpg");//背景图background-size: 100% 100%;background-position: center center;overflow: auto;position: relative;.login_form {width: 400px;height: 360px;position: absolute;left: 78%;top: 50%;margin-left: -200px;margin-top: -150px;padding: 10px;background: #fff;border-radius: 10px;box-shadow: 0 0 10px #ddd;.btns {display: flex;justify-content: flex-end;}}p {font-size: 24px;text-align: center;font-weight: 600;}
}
</style>

register.vue


<template><el-form:model="ruleForm":rules="rules"ref="ruleForm"class="demo-ruleForm"><el-form-item label="" prop="name"><el-inputtype="text"autocomplete="off"v-model="ruleForm.name"prefix-icon="el-icon-user-solid"placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="" prop="pass"><el-inputtype="password"autocomplete="off"v-model="ruleForm.pass"prefix-icon="el-icon-lock"placeholder="请输入密码"></el-input></el-form-item><el-form-item label="" prop="checkPass"><el-inputtype="password"autocomplete="off"v-model="ruleForm.checkPass"prefix-icon="el-icon-lock"placeholder="请输入密码"></el-input></el-form-item><el-form-item class="btns"><el-button type="primary" @click="submitForm('ruleForm')">注册</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form>
</template><script>
export default {data() {var validatePass = (rule, value, callback) => {if (value === "") {callback(new Error("请输入密码"));} else {if (this.ruleForm.checkPass !== "") {this.$refs.ruleForm.validateField("checkPass");}callback();}};var validatePass2 = (rule, value, callback) => {if (value === "") {callback(new Error("请再次输入密码"));} else if (value !== this.ruleForm.pass) {callback(new Error("两次输入密码不一致!"));} else {callback();}};return {activeName: "second",ruleForm: {name: "",pass: "",checkPass: "",},rules: {name: [{ required: true, message: "请输入您的名称", trigger: "blur" },{ min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },],pass: [{ required: true, validator: validatePass, trigger: "blur" }],checkPass: [{ required: true, validator: validatePass2, trigger: "blur" },],},};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {this.$message({type: "success",message: "注册成功",});// this.activeName: 'first',} else {console.log("error submit!!");return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},},
};
</script>
<style scoped lang="less">
.btns {display: flex;justify-content: flex-end;}
</style>

vue+elementui 登录注册页面实现相关推荐

Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（登录注册页面，验证码）
基于 Vue3.x + Vant UI 的多功能记账本(四) 文章目录基于 Vue3.x + Vant UI 的多功能记账本(四) 项目演示 1.登录注册页面 2.图片验证码 3.修改 axios ...
登录注册页面的示例代码
下面是使用Vue3和element-plus写登录注册页面的示例代码: 首先,在main.js文件中引入Vue和element-plus组件库: import { createApp } from ' ...
jsf登录注册页面_您将在下一个项目中使用JSF吗？
jsf登录注册页面上周有一篇很棒的stackoverflow博客文章,主题是" Javascript框架的残酷生命周期" . 这篇文章是关于Javascript UI框架(ang ...
php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
清爽登录界面html,基于css3实现扁平简洁清爽的登录注册页面代码
今天给大家分享一款基于css3实现扁平简洁清爽的登录注册页面代码,使用浅色设计,兼容移动设备,加入了基本的表单验证,适合大部分网站. 代码很简单有css样式,index.html两部分代码.感兴趣的朋 ...
JavaWeb项目(登录注册页面)全过程详细总结
文章目录 JavaWeb项目(登录注册页面)全过程总结一.环境准备与开发工具二.创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录 ...
php and mysql登录注册页面
本文将基于PHP以及mysql设计一个最最基础的登录注册页面,所用到的软件有wampserver以及各种PHP编译器,我选择的是,vscode. 第一部分先写个连接数据库文件. conn.php &l ...
【原型制作】无素材-纯原生制作-登录注册页面原型图
有一段时间没有做过原型图了,现在因为项目需要,得做一套完整的原型图,由于时间关系,考虑制作低保真的原型,虽然低保,还是得抓一把细节,嘻嘻,在这里记录下登录注册页面纯原生做法的全过程. 工具:Axure ...
登录注册页面，JS判断用户手机号码是否已经存在，或者格式不正确
现在的网站使用手机号码注册的越来越多,这就涉及到要在登录注册页面,判断用户手机号码是否已经存在,或者格式不正确,最近的系统里面正好遇到了,已经实现成功,在这里记录一下如果电话号码已经存在,页面: 如 ...

vue+elementui 登录注册页面实现

vue+elementui 登录注册页面实现相关推荐

最新文章

热门文章