Vue2简易登录注册模版(基于ElementUI)

Vue简易登录注册模版(基于ElementUI)

目录

    • Vue简易登录注册模版(基于ElementUI)
    • Login.vue
    • Register.vue

Login.vue

<script>
import RegisterView from '@/components/register.vue'export default {name: 'LoginView',data() {// 用户名规则const checkUsername = (rule, value, callback) => {if (!value) {return callback(new Error('用户名不能为空'));}else {callback();}};// 密码规则const validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {callback();}};return {LoginComponents: true,ruleForm: {username: '',pass: '',},// 校验rules: {username: [{validator: checkUsername, trigger: 'blur'}],pass: [{validator: validatePass, trigger: 'blur'}],},}},methods: {toRegister() {this.LoginComponents = !this.LoginComponents}},components: {RegisterView}
}
</script><template><div class="main"><el-row :gutter="24"><el-col :span="8"><div class="grid-content bg-purple"></div></el-col><el-col :span="8" id="main_bord" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"><div class="grid-content bg-purple" v-if="LoginComponents"><el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"class="demo-ruleForm"><el-form-item label="用户名" prop="username"><el-input v-model.number="ruleForm.username"></el-input></el-form-item><el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary">登录</el-button><el-button @click="toRegister">注册</el-button></el-form-item></el-form></div><div class="grid-content bg-purple" v-else><RegisterView></RegisterView></div></el-col><el-col :span="8"><div class="grid-content bg-purple"></div></el-col></el-row></div>
</template><style scoped>
.grid-content {border-radius: 4px;min-height: 36px;
}
</style>

Register.vue

<script>
import LoginView from '@/views/Login.vue'
export default {data() {const checkUsername = (rule, value, callback) => {if (!value) {return callback(new Error('用户名不能为空'));} else {callback();}};const validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {if (this.ruleForm.checkPass !== '') {this.$refs.ruleForm.validateField('checkPass');}callback();}};const validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'));} else if (value !== this.ruleForm.pass) {callback(new Error('两次输入密码不一致!'));} else {callback();}};return {ruleForm: {pass: '',checkPass: '',username: ''},rules: {pass: [{ validator: validatePass, trigger: 'blur' }],checkPass: [{ validator: validatePass2, trigger: 'blur' }],username: [{ validator: checkUsername, trigger: 'blur' }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}
}
</script><template><el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="用户名" prop="username"><el-input v-model.number="ruleForm.username"></el-input></el-form-item><el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" autocomplete="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><style scoped></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/8319.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

node.js安装及环境配置超详细教程【Windows系统安装包方式】

Step1&#xff1a;下载安装包 https://nodejs.org/zh-cn/download/ 根据自己电脑系统及位数选择&#xff0c;我的电脑是Windows系统、64位、想下载稳定版的.msi&#xff08;LTS为长期稳定版&#xff09;这里选择windows64位.msi格式安装包。 .msi和.zip格式区别&#xff1a;…

3.yolov5训练前的图片处理详解(python)

其实&#xff0c;yolov5模型可以分为深度网络、数据处理&#xff08;图片处理&#xff09;、损失函数、优化器选择、训练和预测及部分构成&#xff0c;相信大家对训练和预测的代码比较熟悉。前面两章我们根据代码和结构图了解了yolov5的深度网络&#xff0c;接下来看数据处理的…

Linux is命令基础

Linux is命令基础 Linux操作系统是一个强大的开源操作系统&#xff0c;它提供了许多命令行工具&#xff0c;这些工具可以帮助我们管理系统&#xff0c;执行任务&#xff0c;以及进行编程。其中&#xff0c;is命令是一个非常重要的命令&#xff0c;它可以帮助我们查看文件和目录…

TouchDesigner Pro for Mac:创意无界,视觉编程新纪元

在数字化创意的海洋中&#xff0c;TouchDesigner Pro for Mac以其卓越的性能和丰富的功能&#xff0c;为设计师们打开了一个全新的视觉编程世界。 这款软件拥有强大的实时创作和视觉编程能力&#xff0c;通过拖拽和连接各种节点&#xff0c;用户可以轻松构建出复杂的实时交互系…

【触摸案例-手势解锁案例-连线到按钮 Objective-C语言】

一、接下来,我们接着来说这个,连线的问题啊, 1.连线的问题啊,也就是说,我现在点击一个按钮, 在移动到下一个按钮的时候,在两个按钮中间,在两个按钮都亮起来的时候呢,我们肯定是让它去画一条线的,那么, 1)首先,如果我现在从第一个按钮,连到第二个按钮,那么,这条…

MySQL复制与集群技术深度解析

MySQL作为一个广泛使用的开源关系型数据库管理系统&#xff0c;不仅提供了强大的数据存储和查询功能&#xff0c;还通过复制和集群技术实现了数据的高可用性、可扩展性和容错性。本文将详细介绍MySQL的主从复制配置与原理、读写分离的应用场景以及几种常见的MySQL集群解决方案。…

1. C++入门:命名空间及输入输出

C相比C的变化 兼容C面向对象泛型C的不足的弥补 为什么要有命名空间 在C/C中&#xff0c;变量、函数和后面要学到的类都是大量存在的&#xff0c;这些变量、函数和类的名称将都存在于全局作用域中&#xff0c;可能会导致很多冲突。使用命名空间的目的是对标识符的名称进行本地…

聊聊BitLocker

最近有消息称微软决定在Windows 11 24H2中默认开启BitLocker&#xff0c;这个消息在网上引起了不小的波澜。有人说&#xff0c;对于我们这些普通用户来说&#xff0c;BitLocker真的有必要吗&#xff1f; 什么是BitLocker BitLocker 是一项 Windows 安全功能&#xff0c;可为整…

CTF-WEB(MISC)

安全攻防知识——CTF之MISC - 知乎 CTF之MISC杂项从入门到放弃_ctf杂项 你的名字-CSDN博客 CTF MICS笔记总结_archpr 掩码攻击-CSDN博客 一、图片隐写 CTF杂项---文件类型识别、分离、合并、隐写_ctf图片分离-CSDN博客 EXIF&#xff08;Exchangeable Image File&#xff09;是…

React 之 <Suspense>(十三)

React内置组件 <Suspense> 允许在子组件完成加载前展示后备内容。 和Vue的<Suspense>相似。 使用 React.lazy 和 <Suspense> 的代码示例&#xff1a; // MyComponent.js const MyComponent () > { // ... 你的组件代码 ... return <div>Hello…

企业网站从传统服务器迁移到弹性云有什么优势呢?

现代企业对于网站和应用程序的可用性和性能要求越来越高&#xff0c;传统基础设施可能无法满足这些需求。弹性云作为一种新兴的云计算服务模式&#xff0c;对于企业网站的运行和管理带来了许多优势。下面是企业网站从传统服务器迁移到弹性云的五大优势&#xff1a; 灵活弹性&a…

npm安装指定版本,npm删除依赖,卸载依赖

安装指定版本 npm中安装指定的版本号&#xff0c;格式为 ‘包名版本号’ npm install 包名称版本号 --save 例如安装jquery: npm install jquery3.0.0 --save在package.json里面可以看到对应的包&#xff1a; "jquery": "^3.0.0"注意&#xff1a;已有…

软胶囊弹性检测:确保药品质量与患者安全的关键步骤

软胶囊弹性检测&#xff1a;确保药品质量与患者安全的关键步骤 在医药领域&#xff0c;软胶囊作为一种常见的药物载体&#xff0c;其质量的优劣直接关系到药物的有效性和患者的安全。软胶囊的弹性作为其质量评估的重要指标之一&#xff0c;不仅影响其储存和运输的稳定性&#x…

C语言内存泄漏查找

在C语言中查找内存泄漏可能是一个相当复杂的任务,因为C语言不提供像一些高级语言(如Java或C#)那样的内置内存管理或垃圾回收机制。然而,你仍然可以使用一些工具和策略来检测内存泄漏。 1.使用内存检测工具 有很多工具可以帮助你检测C程序中的内存泄漏,例如Valgrind,Dr. M…

AI大模型应用与实践指南

大家好&#xff0c;我是爱编程的喵喵。双985硕士毕业&#xff0c;现担任全栈工程师一职&#xff0c;热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。…

虚拟机镜像文件格式qcow2转zst

一、使用qcow2文件还原出pve虚拟机 1.1、在pve上创建一个空的新虚拟机 把虚拟机的网卡和磁盘删除 将外部磁盘镜像为vm中未使用的磁盘。这个镜像格式必须是qemu-img支持的镜像格式(qcow2/raw/vmdk) qm importdisk 101 bigdata-ubuntu-x86.qcow2 local-lvm此时查看pve上虚拟机…

Leetcode167两数之和

题目链接&#xff1a; 167两数之和 解题思路: 缩减空间法 // 167 两数之和 缩减搜索空间方法 vector<int> twoSum(vector<int>& numbers, int target) {int i 0;int j numbers.size() - 1;while (i < j){int tmp numbers[i] numbers[j];if (tmp tar…

3D人体展示仪

网址 https://3dbodyvisualizer.com/ 可以根据身高体重之类的在线生成人体的3D模型&#xff0c;感兴趣的可以试试

Flutter-Statewidget 创建State过程State<XXXX> createState() => _XXXXState()的解释

文章目录 创建widget 的状态对象示例代码解析 完整的代码示例总结 创建widget 的状态对象 今天有个同学问了我下State createState() > _XXXXState()时什么意思。这个代码在flutter开发中一直看到&#xff0c;很多人都不关心这个&#xff0c;直接当模板使用。今天来介绍下这…

2024蓝桥杯CTF writeUP--packet

根据流量分析&#xff0c;我们可以知道129是攻击机&#xff0c;128被留了php后门&#xff0c;129通过get请求来获得数据 129请求ls Respons在这 里面有flag文件 这里请求打开flag文件&#xff0c;并以base64编码流传输回来 获得flag的base64的数据 然后解码 到手