模板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实现登录注册模板的示例代码的文章就介绍到这了,更多相关vue 登录注册模板内容请搜索站长技术以前的文章或继续浏览下面的相关文章希望大家以后多多支持站长技术!
一、前言 中大型项目中,一旦遇到数据量比较大,小伙伴应该都知道就应该对数据进...
本文实例讲述了Java Web开发之图形验证码的生成与使用方法。分享给大家供大家参...
使用AJAX完成用户名是否存在异步校验: 1.事件触发: * onblur 2.编写AJAX代码: * ...
最近在做一个视频网站,需要实现视频的点赞功能,我是结合ajax和数据库实现的,...
作者: BUILDER.COM JSP提供了很多简单实用的工具,其中包括从数据库中读出数据...
ajax返回,自动添加pre标签 ajax返回的内容,居然自动添加了pre标签 在FF,ie,...
我们在使用Ajax的时候,通常需要获取表单元素值,然后发送给后台的服务器端程序...
当用户在应用市场里下载APP体验了免费的基础功能和服务后通过自主选择付费以获取...
而Easp类中提供了大量实用的ASP通用过程及方法,可以简化大部分的ASP操作。目前...
致广大CVT用户 为了进一步促进CVT在国际市场的价值自由流通CyberVein与Coinsuper...