【案例】登录注册

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<template><div class="loginhome"><Header :butShow="butShow"></Header><div class="formdiv"><div style="text-align:center;padding:10px;"><h3>你好登录账号{{ stauts == 3? '注册':'登录' }}</h3><el-divider>{{ stauts == 1 ?'账号登录':stauts == 2 ?'短信登录':stauts == 3 ?'立即注册':'--' }}</el-divider></div><el-form :model="Form"><!-- 账号密码登录 --><template v-if="stauts == 1"><table class="table" cellspacing="3"><tr><td colspan="5"><el-form-item prop="phone" :rules="[{ required: true, message: '输入手机号', trigger: 'blur' },{type:'phone', max: 12, message: '输入正确的11位手机号', trigger: 'blur'}]"><el-input type="phone" placeholder="手机号" maxlength="11" v-model="Form.phone"></el-input></el-form-item></td></tr><tr><td colspan="5"><el-form-item prop="password" :rules="[{ required: true, message: '输入密码', trigger: 'blur' },{min:8, max: 20, message: '输入8~20位', trigger: 'blur'}]"><el-input :type="eyeshow ? 'text':'password'" maxlength="20" placeholder="密码" v-model="Form.password" show-password><!-- <el-button slot="suffix" type="text"><i  :class="eyeshow ? 'el-icon-key':'el-icon-unlock'" @click="iClick"></i></el-button> --></el-input></el-form-item></td></tr><tr><td></td><td colspan="3"></td><td><el-button type="text" @click="stauts = 2">短信登录</el-button></td></tr><tr><td colspan="5"><el-button style="width:100%;" type="primary" @click="CodeLoginClick()">登录</el-button></td></tr><tr><td class="table_td"></td><td class="table_td"><el-button type="text" @click="stauts = 3; eyeshow = false;">立即注册</el-button></td><td class="table_td"><el-button type="text" :disabled="true">忘记密码</el-button></td><td class="table_td"><el-button type="text" :disabled="true">修改密码</el-button></td><td class="table_td"></td></tr></table></template><!-- 短信验证码登录 --><template v-else-if="stauts == 2"><table class="table" cellspacing="3"><tr><td colspan="5"><el-form-item prop="telephone" :rules="[{ required: true, message: '输入手机号', trigger: 'blur' },{type:'number', max: 11, message: '输入正确的11位手机号', trigger: 'blur'}]"><el-input type="text" placeholder="手机号" v-model="Form.telephone"></el-input></el-form-item></td></tr><tr><td colspan="5"><el-form-item prop="code" :rules="[{ required: true, message: '输入验证码', trigger: 'blur' },{type:'number',  message: '请输入正确的', trigger: 'blur'}]"><el-input :type="eyeshow ? 'text':'password'" placeholder="验证码" v-model="Form.code"><el-button slot="suffix" type="text" @click="iClick">获取验证码</el-button></el-input></el-form-item></td></tr><tr><td></td><td colspan="3"></td><td><el-button type="text" @click="stauts = 1">账号登录</el-button></td></tr><tr><td colspan="5"><el-button style="width:100%;" type="primary">登录</el-button></td></tr><tr><td class="table_td"></td><td class="table_td"></td><td class="table_td"><el-button type="text" @click="stauts = 3; eyeshow = false;">立即注册</el-button></td><td class="table_td"></td><td class="table_td"></td></tr></table></template><!-- 立即注册 --><template v-else-if="stauts == 3"><table class="table" cellspacing="3"><tr><td colspan="5"><el-form-item prop="register_telephone" :rules="[{ required: true, message: '输入手机号', trigger: 'blur' },{type:'number', max: 11, message: '输入正确的11位手机号', trigger: 'blur'}]"><el-input type="text" placeholder="手机号" v-model="Form.register_telephone"></el-input></el-form-item></td></tr><tr><td colspan="5"><el-form-item prop="register_password" :rules="[{ required: true, message: '设置密码', trigger: 'blur' },{min:8, max: 11, message: '输入8~11位', trigger: 'blur'}]"><el-input :type="eyeshow ? 'text':'password'" placeholder="设置您的密码" v-model="Form.register_password" show-password><!-- <el-button slot="suffix" type="text"><i  :class="eyeshow ? 'el-icon-key':'el-icon-unlock'" @click="iClick"></i></el-button> --></el-input></el-form-item></td></tr><tr><td colspan="5"><el-form-item prop="register_again_password" :rules="[{ required: true, message: '输入密码', trigger: 'blur' },{min:8, max: 11, message: '请输入8~11位', trigger: 'blur'}]"><el-input :type="eyeshow ? 'text':'password'" placeholder="再次输入您的密码" v-model="Form.register_again_password" show-password><!-- <el-button slot="suffix" type="text"><i  :class="eyeshow ? 'el-icon-key':'el-icon-unlock'" @click="iClick"></i></el-button> --></el-input></el-form-item></td></tr><tr><td colspan="5"><el-form-item prop="register_code" :rules="[{ required: true, message: '输入验证码', trigger: 'blur' },{ type:'number',min:6, max: 6, message: '输入完整的验证码', trigger: 'change'}]"><el-input type="text" placeholder="验证码" v-model="Form.register_code"><el-button slot="suffix" type="text" @click="SendCodeClick">获取验证码</el-button></el-input></el-form-item></td></tr><tr><td></td><td colspan="3"></td><td></td></tr><tr><td colspan="5"><el-button style="width:100%;margin-top:3px;" type="primary">注册</el-button></td></tr><tr><td class="table_td"><el-button type="text" @click="stauts = 1; eyeshow = false;">账号登录</el-button></td><td class="table_td"></td><td class="table_td"></td><td class="table_td"></td><td class="table_td"><el-button type="text" @click="stauts = 2">短信登录</el-button></td></tr></table></template></el-form><el-divider></el-divider></div></div>
</template>
<script>
import Header from '@/components/header.vue'
export default {components: {Header},data() {return {stauts: 1,  // 模式butShow: 1,eyeshow: false,againPassword_message: '',Form: {phone: '', password: '',  // 账号登录telephone: '',  code: '',  // 短信登录register_password: '', register_again_password: '', register_telephone:'', register_code:'',  // 立即注册},}},methods: {iClick() {console.log(this.eyeshow);this.eyeshow = !this.eyeshow},// 获取验证码SendCodeClick() {console.log('获取验证码');},//  账号登录CodeLoginClick() {if (this.Form.phone =='17602931841' &&  this.Form.password == '17602931841') {this.$notify.success('登录成功')setTimeout(() => {this.$router.push('/fristhome')},1000)} else {this.$notify.warning('账号或密码错误!!')}}}
}
</script>
<style scoped>
.loginhome { width: 100%;height: calc(100vh); background-color: rgb(243, 248, 250); }
.formdiv { width: 500px; height: 550px; background-color: rgb(253, 253, 253); position: relative; top: 5%; left: calc((100vw - 500px) / 2); }
#i { position: relative; top: 0; right: 0; }
.table { width:80%;margin:0 10%;text-align:center; }
.table_td { width: 25%; }
.input_btu { position: relative; top: 0; right: 0; }
#suffix { position: absolute; top: 0; right: 0; color: red; }
.show-pwd {position: absolute;right: 10px;top: 7px;font-size: 16px;color: red;cursor: pointer;user-select: none;}
</style>
<style>
.table .el-form-item__error {color: #F56C6C;font-size: 12px;line-height: -1;padding-top: 4px;position: absolute;top: 100%;left: 0;
}
.table .el-form-item {margin-bottom: 0px;
}
</style>

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

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

相关文章

servlet介绍,tomcat容器下载启动

1.1servlet是什么&#xff1f; servlet是一种java程序类&#xff0c;这些类继承了httpservlet类。这些类没有main方法&#xff0c;有两大对象request请求&#xff0c; response响应对象。这些类需要servlet容器才可以运行。 servlet 2.5 servlet 3.0 WEB-INF/web.xml <…

UE4与pycharm联合仿真的调试问题及一些仿真经验

文章目录 ue4与pycharm联合仿真的调试问题前言ue4端的debug过程pycharm端 一些仿真经验小结 ue4与pycharm联合仿真的调试问题 前言 因为在实验中我需要用到py代码输出控制信息给到ue4中&#xff0c;并且希望看到py端和ue端分别在运行过程中的输出以及debug调试。所以&#xf…

IntelliJ IDEA maven配置,设置pom.xml的配置文件

IntelliJ IDEA项目&#xff0c;选择 文件 设置&#xff0c;弹窗 构建、执行、部署 构建工具 Maven就可以 maven配置好以后&#xff0c;在pom.xml的配置文件中就可以设置对应的jar包了&#xff0c;这样构建的时候自动需要的jar&#xff0c;在项目中导入即 需要的jar包设置在po…

AVL——平衡搜索树

✅<1>主页&#xff1a;我的代码爱吃辣&#x1f4c3;<2>知识讲解&#xff1a;数据结构——AVL树☂️<3>开发环境&#xff1a;Visual Studio 2022&#x1f4ac;<4>前言&#xff1a;AVL树是对二叉搜索树的严格高度控制&#xff0c;所以AVL树的搜索效率很高…

图床项目进度(一)——UI首页

1. 前言 前面我不是说了要做一个图床吗&#xff0c;现在在做ui。 我vue水平不够高&#xff0c;大部分参考b站项目照猫画虎。 vue实战后台 我使用ts&#xff0c;vite&#xff0c;vue3进行了重构。 当然&#xff0c;我对这些理解并不深刻&#xff0c;许多代码都是游离于表面&am…

小白到运维工程师自学之路 第七十九集 (基于Jenkins自动打包并部署Tomcat环境)2

紧接上文 4、新建Maven项目 clean package -Dmaven.test.skiptrue 用于构建项目并跳过执行测试 拉到最后选择构建后操作 SSH server webExec command scp 192.168.77.18:/root/.jenkins/workspace/probe/psi-probe-web/target/probe.war /usr/local/tomcat/webapps/ /usr/loca…

mysql基本操作

常用的数据类型 int 整型用于定义整数类型的数据float 单精度浮点4字节32位 准确表示到小数点后六位 double 双精度浮点8字节64位双精度浮点8字节64位char 固定长度的字符类型用于定义字符类型数据varchar可变长度的字符类型 text文本image图片de…

Java IO流(五)Netty实战[TCP|Http|心跳检测|Websocket]

Netty入门代码示例(基于TCP服务) Server端 package com.bierce.io.netty.simple; import io.netty.bootstrap.ServerBootstrap; import io.netty.buffer.ByteBuf; import io.netty.buffer.Unpooled; import io.netty.channel.*; import io.netty.channel.nio.NioEventLoopGro…

使用动态IP是否会影响网络

今天我们要谈论的话题是关于动态IP和网络的关系。也许有些小伙伴对这个概念还比较陌生&#xff0c;但别担心&#xff0c;我会简单明了的给你理清楚。让我们一起看看动态IP到底能否影响到网络。 首先&#xff0c;我们先来搞明白什么是动态IP。在互联网世界中&#xff0c;每一个连…

跨越边界:从前端切图仔走进iOS开发(Swift版--上集)

本文简介 点赞 关注 收藏 学会了 本文将以前端开发者的视角&#xff0c;和各位工友进入iOS开发的世界。 本文以实战为导向&#xff0c;快速掌握iOS开发这个技能。 无论你是想要扩展技能领域&#xff0c;还是对iOS开发充满好奇&#xff0c;花一个下午学习本文都能打开iOS开…

【consul】

consul 一、什么是服务注册与发现1.11.2 二、 什么是consul2.1定义2.2特性2.2.1服务注册与发现&#xff1a;2.2.2健康检查&#xff1a;2.2.3Key/Value存储&#xff1a; 三、consul部署-datacenter &#xff1a;指定数据中心名称&#xff0c;默认是dc1。consul &#xff1a;指定…

flask获取请求对象的get和post参数

前言 get请求参数是在URL里面的&#xff0c;post请求参数是放在请求头里面的 get请求&#xff1a; index_page.route("/get") def get():var_a request.args.get("a", "jarvis")return "request:%s,params:%s,var_a:%s" %(request…

接口自动化如何封装mysql操作

数据查询类封装 1. 功能分析 可以连接不同sql数据库查一条数据&#xff0c;多条数据可以获取不同格式的数据 2. 封装成数据库查询类 封装思路: 数据库查询模块有多个功能&#xff0c;且需要复用&#xff0c;所以封装成类创建对象方法实现各种查询在构造方法中创建连…

Word中对象方法(Methods)的理解及示例(上)

【分享成果&#xff0c;随喜正能量】奋斗没有终点,任何时候都是一个起点&#xff0c;沉潜是为了蓄势待发&#xff0c;沉潜是为了等待因缘。鲸豚沉潜于大海&#xff0c;幽兰深藏于山谷&#xff0c;能够经得起沉潜的人&#xff0c;才会有更高的成就。正如一年的树木只能当柴烧&am…

基于Jenkins自动打包并部署docker环境

目录 1、安装docker-ce 2、阿里云镜像加速器 3、构建tomcat 基础镜像 4、构建一个Maven项目 实验环境 操作系统 IP地址 主机名 角色 CentOS7.5 192.168.200.111 git git服务器 CentOS7.5 192.168.200.112 Jenkins git客户端 jenkins服务器 CentOS7.5 192.168…

TCP最大连接数问题总结

最大TCP连接数量限制有&#xff1a;可用端口号数量、文件描述符数量、线程、内存、CPU等。每个TCP连接都需要以下资源&#xff0c;如图所示&#xff1a; 1、可用端口号限制 Q&#xff1a;一台主机可以有多少端口号&#xff1f;端口号与TCP连接&#xff1f;是否能修改&#x…

Wireshark数据抓包分析之互联网协议(IP协议)

一、实验目的&#xff1a; 通过wireshark抓包分析IP协议的具体内容 二、预备知识&#xff1a; 1.IP地址存在的意义&#xff0c;就是为了弥补mac地址的不足&#xff0c;用于区分不同的网络 2.还有一些ip协议、ip数据包这些东西 三、网络拓扑 四、实验过程&#xff1a; part1&…

Docker容器与虚拟化技术:Gitlab账户注册

目录 一、实验 1.gitlab 一、实验 1.gitlab (1) 概念 GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xff0c;并在此基础上搭建起来的Web服务。 &#xff08;2&#xff09;官网 The DevSecOps Platform | GitLab &#xff08;3&#…

OpenAI推出GPT-3.5Turbo微调功能并更新API;Midjourney更新局部绘制功能

&#x1f989; AI新闻 &#x1f680; OpenAI推出GPT-3.5Turbo微调功能并更新API&#xff0c;将提供GPT-4微调功能 摘要&#xff1a;OpenAI宣布推出GPT-3.5Turbo微调功能&#xff0c;并更新API&#xff0c;使企业和开发者能够定制ChatGPT&#xff0c;达到或超过GPT-4的能力。通…

uniapp - 实现卡片式胶囊单选后右上角出现 “√“ 对勾对号选中效果功能,适用于小程序h5网页app全平台通用(一键复制组件源码,开箱即用!)

效果图 uniapp全平台兼容(小程序/h5网页/app)实现点击选择后,右上角出现 √ 对号效果(角标形式展现),功能组件, 改个样式,直接复制使用该组件。 组件源码 在 components 组件文件夹下,随便建立一个 .vue 文件,一键复制下方源码。