vue实现登录注册模板
模板1:
login.vue
<template><p class="login"><el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane label="登录" name="first"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">登录</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></el-tab-pane><el-tab-pane label="注册" name="second"><register></register></el-tab-pane></el-tabs></p>
</template><script>
import register from '@/components/register';export default {data() {var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {if (this.ruleForm.checkPass !== '') {this.$refs.ruleForm.validateField('checkPass');}callback();}};return {activeName: 'first',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' }]}};},methods: {//选项卡切换handleClick(tab, event) {},//重置表单resetForm(formName) {this.$refs[formName].resetFields();},//提交表单submitForm(formName) {this.$refs[formName].validate(valid => {if (valid) {this.$message({type: 'success',message: '登录成功'});this.$router.push('home');} else {console.log('error submit!!');return false;}});}},components: {register}
};
</script><style lang="scss">
.login {width: 400px;margin: 0 auto;
}.el-tabsitem {text-align: center;width: 60px;
}
</style>
register.vue
//register组件<template><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="用户名" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input></el-form-item><el-form-item><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>
效果图
模板2:
login.vue
<template><el-row type="flex" justify="center"><el-form ref="formData" :model="formData" :rules="rules" label-width="80px" @keyup.enter.native="login()"><el-form-item prop="userName" label="用户名"><el-input v-model="formData.userName" placeholder="请输入用户名" prefix-icon="icon-login_user" clearable></el-input></el-form-item><el-form-item prop="password" label="密码"><el-input v-model="formData.password" placeholder="请输入密码" type="password" prefix-icon="icon-login_pwd" clearable></el-input></el-form-item></el-form-item><el-form-item><el-button type="primary" class="btn" @click="login('formData')" icon="el-icon-upload">登录</el-button><el-button @click="resetForm('formData')">重置</el-button></el-form-item></el-form-item><router-link to="register">没有密码?注册</router-link></el-form></el-row>
</template>
<script>
export default {data() {return {formData: {userName: '',password: ''},rules: {userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]}};},methods: {login(formName) {this.$refs[formName].validate(valid => {if (valid) {this.$message({type: 'success',message: '登录成功'});this.$router.push({name:'home'});} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}
};
</script>
register.vue
<template><el-row type="flex" justify="center"><el-form ref="formData" :model="formData" :rules="rules" label-width="80px" @keyup.enter.native="register()"><el-form-item prop="userName" label="用户名"><el-input v-model="formData.userName" placeholder="请输入用户名" prefix-icon="icon-login_user" clearable></el-input></el-form-item><el-form-item prop="password" label="密码"><el-input v-model="formData.password" placeholder="请输入密码" type="password" prefix-icon="icon-login_pwd" clearable></el-input></el-form-item><el-form-item prop="cheackPassword" label="确认密码"><el-input v-model="formData.cheackPassword" placeholder="再次输入密码" type="password" prefix-icon="icon-login_pwd" clearable></el-input></el-form-item></el-form-item><el-form-item><el-button type="primary" @click="register('formData')" icon="el-icon-upload">注册</el-button><el-button @click="resetForm('formData')">重置</el-button></el-form-item><router-link to="login">已有密码?登录</router-link></el-form></el-row>
</template>
<script>
export default {data() {var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'));} else if (value !== this.formData.password) {callback(new Error('两次输入密码不一致!'));} else {callback();}};return {formData: {userName: '',password: '',cheackPassword:''},rules: {userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],cheackPassword: [{ required: true, validator: validatePass, trigger: 'blur' }]}};},methods: {register(formName) {this.$refs[formName].validate(valid => {if (valid) {this.$message({type: 'success',message: '注册成功'});this.$router.push({name:'login'});} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}
};
</script>
效果图
vue实现登录注册模板相关推荐
- 基于Bootstrap的登录注册模板(html+css)
基于Bootstrap的登录&注册模板(html+css) 1.简介 2.功能 2.1 登录 2.2 注册 3.展示 4.下载地址 1.简介 基于Bootstrap的登录&注册模板(h ...
- vue+elementui 登录注册页面实现
1.实现效果 2. 代码实现 2.1使用elementUI文档中Tabs标签页 2.2在components中新建两个文件 login.vue register.vue ...
- Vue实现登录注册功能
1.效果展示 2.注意:vue登录注册用到了 Vuex + localstorage+router等,使用了vue2,创建项目 3.先是在router中的index.js中写路由配置 import V ...
- 写的一个网页登录注册模板(css+js),注册成功后把账号保存到MySQL数据库,登录时从数据库查找进行验证(jsp+javabean)
首先是网页前端的设计,使用css美化(字体使用Google font,图标使用font awemome,颜色使用palettes|flat ui colors,谷歌可找到,个人觉得挺好用) 使用了简单 ...
- Vue登录注册,并保持登录状态
关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法. 项目中有一 ...
- Vue登录注册,并保持登录状态 1
关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法. 项目中有一 ...
- Vue登录注册,并保存登录状态
项目中有一些路由是需要登录才可以进入的,比如首页,个人中心等等 有一些路由是不需要登录就可以进入,比如登录页,注册页,忘记密码等等 那如何判断路由是否需要登录呢? 在router.js中添加meta区 ...
- 快速上手Springboot项目(登录注册保姆级教程)
本文章对SpringBoot开发后端项目结构做了简单介绍,并示范了使用SpringBoot+MySQL实现登录的后端功能,与本博客的另一篇文章 Vue 实现登录注册功能(前后端分离完整案例) | Ma ...
- 22/10/08 vue2项目,登录注册路由守卫
写在router/index.js文件内 //导航守卫,前置处理 router.beforeEach((to, from, next) => {let isAuthenticated = !!l ...
- 基于Layui的登录注册页面模板
在layui 版本2.8+中,提供了好看的登录注册模板. 目录 1.登录模板 (1)效果预览 (2)完整代码 2.注册模板 (1)效果预览 (2)完整代码 1.登录模板 (1)效果预览 官网地址:表 ...
最新文章
- ubuntu14.04安装intel openCL
- virtualenv在windows10下面使用的注意事项
- With you With me
- 《为iPad而设计:打造畅销App》——了解客户
- 【手写数字识别】基于matlab RBF手写数字识别【含Matlab源码 471期】
- 《电力电子技术》王兆安 第二章
- oracle查询sql对应用户名,Oracle EBS-SQL (SYS-21):sys_用户名与人员对应关系查询.sql
- 齐全的降低笔记本电池损耗的方法
- 返回不大于log2N的最大整数
- java http请求发送unicode_c++ 使用httpclient获取网页及utf8与unicode之间转码
- 定义一个名为 Circle的类,编写程序测试这个圆类的所有方法。
- 基于主成分分析法的安全评价模型
- 微信翻译生日快乐的代码_广外,54岁生日快乐!校庆日专属头像上线!
- css应该写在html语言的哪个标记里,CSS布局的选择题
- 喂奶的母亲怎样通过食疗来促进宝宝的健康(三)
- 树莓派3 中文输入法安装教程
- Pix4Dmapper安装
- 【slam十四讲第二版】【课本例题代码向】【第七讲~视觉里程计Ⅱ】【使用LK光流(cv)】【高斯牛顿法实现单层光流和多层光流】【实现单层直接法和多层直接法】
- unreal 布料_Unreal | 布料角色交互
- 【论文复现】一步步详解用TD3算法通关BipedalWalkerHardcore-v2环境