nuxt 登录注册加重置密码
<!-- 登录弹框 -->
<div class="mask" v-show="flag">
<div class="mask_content" v-show="type_d == 'sign'">
<p class="mask_gb" @click="cloces">
<img src="../static/img/home/gw_icon.png" alt="" />
</p>
<div class="mas_title">
<h3 class="mas_title_nav">登录</h3>
<img class="mas_title_img" src="../static/img/home/logo.png" alt="" />
</div>
<div class="mask-title">
<h3 @click="typ = 0" :class="{ mk_a: typ === 0 }">手机快速登录</h3>
<h3 @click="typ = 1" :class="{ mk_a: typ === 1 }">账号密码登录</h3>
</div>
<!-- 手机快速登录 -->
<div class="mask-meuns font14" v-show="typ == 0">
<p class="ks_tels fe_tel">
<img class="tel_icon tel" src="../static/img/home/tel.png" alt="" />
<input
class="inp_tel"
v-model="phone"
@input="form_mobile(phone)"
type="text"
maxlength="11"
placeholder="+86 手机号"
/>
</p>
<p class="p_inp">
<input
class="inp_getS"
v-model="yzm"
type="text"
placeholder="手机验证码"
/><span
class="yz"
@click="send(1)"
:class="color ?'actives_color': ''"
>{{ sms_interval }}</span
>
</p>
<button class="font16 sign" @click="phone_login">登录</button>
</div>
<!-- 账号密码登录 -->
<div class="mask-meuns" v-show="typ == 1">
<p class="ks_tels">
<img
class="tel_icon icon"
src="../static/img/home/pep.png"
alt=""
/>
<input
class="inp_tel"
v-model="username"
type="text"
maxlength="11"
placeholder="请输入账号"
/>
</p>
<p class="ks_tels">
<img class="tel_icon icon" src="../static/img/home/mn.png" alt="" />
<input
v-model="passwords"
class="inp_tel inp_pass"
type="password"
maxlength="12"
placeholder="请输入密码"
/>
</p>
<div
class="wj_ma"
@click="type_d = 'chongzhi'"
>
忘记密码
</div>
<button class="font16 sign" @click="pwd_login">登录</button>
</div>
<p class="font14 goreg" @click="goto_regist">
还没有账号？<span class="mf_reg">免费注册</span>
</p>
</div>
<!-- 注册账号 -->
<div class="mask_content" v-show="type_d == 'register'">
<p class="mask_gb" @click="cloces">
<img src="../static/img/home/gw_icon.png" alt="" />
</p>
<div class="mas_title">
<h3 class="mas_title_nav">注册</h3>
<img class="mas_title_img" src="../static/img/home/logo.png" alt="" />
</div>
<div class="reg_title">
<h3 class="font20 ks_title">快速注册</h3>
<div class="mask-top-link"></div>
</div>
<form class="mask-meuns reg_ma font14">
<p class="ks_tels">
<img class="tel_icon tel" src="../static/img/home/tel.png" alt="" />
<input
v-model="mobile"
@input="form_mobile(mobile)"
maxlength="11"
class="inp_tel"
type="text"
placeholder="+86 手机号"
/>
</p>
<p class="p_inp">
<input
class="inp_getS"
v-model="sms"
type="text"
placeholder="手机验证码"
/>
<span
class="yz reg_yz"
@click="send(2)"
:class="color ?'actives_color': ''"
>{{ sms_interval }}</span
>
</p>
<p class="ks_tels">
<img
class="tel_icon icon"
src="../static/img/home/mn.png"
alt=""
/><input
v-model="password"
class="inp_tel inp_pass"
type="password"
maxlength="12"
placeholder="设置密码"
/>
</p>
<form class="font14 regulations">
<input
class="inp_check"
type="checkbox"
v-model="checked_zc"
/><span
>我已阅读并接受<b class="clause" @click="is_kxy = true"
>《XXX注册条款》</b
></span
>
<p class="font16 sign reg_zc" @click="register">注册</p>
</form>
</form>
<p class="font14 reg_sign" @click="goto_sign">
已有账号？<span class="mf_reg">立即登录</span>
</p>
</div> <!-- 重置密码 -->
<div class="mask_content" v-show="type_d == 'chongzhi'">
<p class="mask_gb" @click="cloces">
<img src="../static/img/home/gw_icon.png" alt="" />
</p>
<div class="mas_title">
<h3 class="mas_title_nav">重置</h3>
<img class="mas_title_img" src="../static/img/home/logo.png" alt="" />
</div>
<div class="reg_title">
<h3 class="new_reg_h3 font20">
<span @click="go_back">←</span>重置密码
</h3>
<div class="mask-top-link"></div>
</div>
<form class="mask-meuns reg_ma font14">
<p class="ks_tels">
<img class="tel_icon tel" src="../static/img/home/tel.png" alt="" />
<input
v-model="new_mobile"
@input="form_mobile(new_mobile)"
maxlength="11"
class="inp_tel"
type="text"
placeholder="+86 手机号"
/>
</p>
<p class="p_inp">
<input
class="inp_getS"
v-model="captcha_sms"
type="text"
placeholder="手机验证码"
/>
<span
class="yz reg_yz"
@click="send(3)"
:class="color ?'actives_color': ''"
>{{ sms_interval }}</span
>
</p>
<p class="ks_tels">
<img
class="tel_icon icon"
src="../static/img/home/mn.png"
alt=""
/><input
v-model="new_password"
class="inp_tel inp_pass"
type="password"
maxlength="12"
placeholder="设置新密码"
/>
</p>
<form class="font14 regulations">
<p class="font16 sign reg_zc" @click="new_register">确定</p>
</form>
</form>
</div>
</div>
<!-- 隐私协议 -->
<div class="xiey" v-show="is_kxy">
<div class="xiey_cont" @click="is_kxy = false">
<p class="xiey_top">
<span class="mask_gb"
><img src="../static/img/home/gw_icon.png" alt=""
/></span>
</p>
<!-- <p class="mask_gb"></p> -->
<div class="xieyi_content" v-html="xiey.content">
{{ xiey.content }}
</div>
</div>
</div>
data(){
return {
mobile: "",
sms: "",
password: "",
sms_interval: "获取验证码",
is_send: false,
phone: "",
passwords: "",
username: "",
yzm: "",
login_method: "is_pwd",
color: 0,
checked_zc: false,
xiey: "",
}
}
methods:{
//重置密码
new_register() {
var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if(this.new_mobile){
if(!isNaN(this.new_mobile)){
if(myreg.test(this.new_mobile)){
if(this.captcha_sms){
if(this.new_password){
if(6 <= this.new_password.length){
if(this.new_password.length <= 12){
//请求数据
this.chz_reg()
}else{
that.$message.error("密码设置范围为6-12");
}
}else{
that.$message.error("密码设置范围为6-12");
}
}else{
this.$message.error("请输入密码！");
}
}else{
this.$message.error("请输入验证码！");
}
}else{
this.$message.error("手机号输入不正确！");
}
}else{
this.$message.error("手机号格式不正确！");
}
}else{
this.$message.error("请输入手机号！");
}
},
//重置密码的后台接口
chz_reg() {
return post("api/user/resetPwd", {
mobile: this.new_mobile,
captcha: this.captcha_sms,
newpassword: this.new_password,
}).then((res) => {
if (res.code == 1) {
this.$message({
message: "重置成功",
type: "success",
});
//关掉注册框
this.type_d = "sign";
this.typ = 1;
(this.new_mobile = ""),
(this.captcha_sms = ""),
(this.new_password = "");
} else {
this.$message({
message: "重置失败，请稍后再试",
type: "error",
});
}
});
},
//倒计时
hqyzm_zc(){
var that = this;
var time = 60;
that.sms_interval = '('+time+')秒后重新发送';
that.color = false;
that.is_send = true;
var zc_time = setInterval(function () {
time-=1;
that.sms_interval = '('+time+')秒后重新发送';
that.color = false;
that.is_send = true;
if(time==0){
clearInterval(zc_time);
that.sms_interval = '发送验证码';
that.color = true;
that.is_send = false;
}
},1000);
},
//手机号验证
form_mobile(value){
var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if(value.length==11){
if(myreg.test(value)){
if(this.sms_interval=='发送验证码'){
this.color = true;
}else {
this.color = false;
}
}else {
this.color = false;
}
}else {
this.color = false;
}
},
mobile_phone(phone,type){
var that = this;
return post('/api/Sms/send', {mobile: phone,event:type})
.then((res) => {
if(res!=0){
that.hqyzm_zc();
}
}
);
},
//发送验证码请求
send(key){
if(!this.is_send){
if(this.color){
if(key==1){
this.mobile_phone(this.phone,'mobilelogin');
}else if(key==2){
this.mobile_phone(this.mobile,'register');
}else if(key==3){
this.mobile_phone(this.new_mobile,'resetpwd');
}
}else {
this.$message.error("手机号输入不正确");
}
}else {
this.$message.error("验证码发送中...");
}
},
//注册
register() {
var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if(this.mobile){
if(!isNaN(this.mobile)){
if(myreg.test(this.mobile)){
if(this.sms){
if(this.password){
if(6 <= this.password.length){
if(this.password.length <= 12){
if(this.checked_zc){
//请求数据
this.is_reg()
}else{
this.$message.error("请阅读并勾选隐私协议！");
}
}else{
this.$message.error("密码设置范围为6-12");
}
}else{
this.$message.error("密码设置范围为6-12");
}
}else{
this.$message.error("请输入密码！");
}
}else{
this.$message.error("请输入验证码！");
}
}else{
this.$message.error("手机号输入不正确！");
}
}else{
this.$message.error("手机号格式不正确！");
}
}else{
this.$message.error("请输入手机号！");
}
},
//注册接口
is_reg() {
return post("api/User/register", {
mobile: this.mobile,
code: this.sms,
password: this.password,
}).then((res) => {
if (res.code == 1) {
this.$message({
message: "注册成功",
type: "success",
});
//关掉注册框
this.flag = false;
this.xisign = 1;
localStorage.setItem("token", res.data.userinfo.token);
this.$router.push({
name: "index",
});
(this.mobile = ""), (this.sms = ""), (this.password = "");
} else {
this.$message({
message: "注册失败，请稍后再试",
type: "error",
});
}
});
},
// 密码 登录
pwd_login() {
var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if(this.username){
if(!isNaN(this.username)){
if(myreg.test(this.username)){
if(this.passwords){
if(6 <= this.passwords.length){
if(this.passwords.length <= 12){
//请求数据
this.phone_pwd()
}else{
this.$message.error("密码设置范围为6-12");
}
}else{
this.$message.error("密码设置范围为6-12");
}
}else{
this.$message.error("请输入密码！");
}
}else{
this.$message.error("手机号输入不正确！");
}
}else{
this.$message.error("手机号格式不正确！");
}
}else{
this.$message.error("请输入手机号！");
}
},
//手机密码登录接口
phone_pwd(){
return post("api/User/login", {
account: this.username,
password: this.passwords,
}).then((res) => {
if (res.code == 1) {
//登录成功
this.$message({
message: res.msg,
type: "success",
});
localStorage.setItem("token", res.data.userinfo.token);
//2 销毁框
this.flag = false;
this.xisign = 1;
this.username = "";
this.passwords = "";
} else {
this.$message({
message: res.msg,
type: "error",
});
}
});
},
//手机号 验证码登录
phone_login() {
var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if(this.phone){
if(!isNaN(this.phone)){
if(myreg.test(this.phone)){
if(this.yzm){
this.phone_yzm()
}else{
this.$message.error("请输入验证码！");
}
}else{
this.$message.error("手机号输入不正确！");
}
}else{
this.$message.error("手机号格式不正确！");
}
}else{
this.$message.error("请输入手机号！");
}
},
//手机验证码登录接口
phone_yzm(){
return post("api/user/mobileLogin", {
mobile: this.phone,
captcha: this.yzm,
}).then((res) => {
if (res.code == 1) {
//登录成功
this.$message({
message: res.msg,
type: "success",
});
localStorage.setItem("token", res.data.userinfo.token);
this.flag = false;
this.xisign = 1;
(this.phone = ""), (this.yzm = "");
} else {
this.$message({
message: res.msg,
type: "error",
});
}
});
},
//退出登录
out_login() {
return get("api/User/logout").then((res) => {
if (res.code == 1) {
this.$message({
message: res.msg,
type: "success",
});
this.$router.push({
name: "index",
});
localStorage.removeItem("token");
this.xisign = 0;
} else {
if (res.code == 10401) {
localStorage.removeItem("token");
this.xisign = 0;
} else {
this.$message({
message: res.msg,
type: "error",
});
}
}
});
},
mo_flag() {
var that = this;
that.mo_isflag = !that.mo_isflag;
},
close_mo_isflag() {
var that = this;
that.mo_isflag = !that.mo_isflag;
},
//登录
go_sign() {
var that = this;
that.flag = true;
that.type_d = "sign";
},
go_register() {
var that = this;
that.flag = !that.flag;
that.type_d = "register";
},
go_back() {
this.type_d = "sign";
this.typ = 1;
},
//关闭弹窗
cloces() {
var that = this;
that.flag = false;
},
//去注册页面
goto_regist() {
var that = this;
that.flag = true;
that.type_d = "register";
},
//去登录页面
goto_sign() {
var that = this;
that.flag = true;
that.type_d = "sign";
},
flag_tel() {
this.isShows = true;
},
no_flag_tel() {
this.isShows = false;
},
flag_wechat() {
this.isFlag = true;
},
no_flag_wechat() {
this.isFlag = false;
},
}
此登录注册要求：点击其中一个验证码按钮，所有带验证码的地方都会倒计时60s，重复点击会出现 验证码发送中... 的提示
nuxt 登录注册加重置密码的更多相关文章
- django登录注册验证之密码包含特殊字符，确认密码一致实现，Form验证
Form验证的原理 首先用户在注册界面提交表单,后台收到表单之后通过request.post取到数据然后传入已经写好的Form类 执行obj.is_valid()这里的obj为Form的实例,在For ...
- Azure AD B2C（二）使用Azure AD B2C为ASP.NET Core 应用设置社交帐户（邮箱）登录/注册
一,引言 上次关于Azure AD B2C 讲到一些概念,有介绍到,Azure AD B2C 也是一种身份验证的解决方案,但是它运行客户使用其首选的社交,企业或者本地账户标识对应用程序和API进行单一 ...
- App测试经验分享之登录注册
要诀 另外自己总结了一些要诀,仅供参考: 1)快:快速操作,营造冲突的场景,例如加载过程中返回键交互,快速点击登录按钮,快速切换菜单项,快速多次上下拉刷新 2)变:手机横竖屏.手机切换语言.手机调整字 ...
- Mysql8.0.17忘记密码情况下重置密码
1.以管理员身份打开命令窗口cmd,输入命令: net stop mysql 2.开启跳过密码验证登录的mysql服务,输入命令 mysqld --console --skip-grant-table ...
- Android高效率编码-第三方SDK详解系列(二)——Bmob后端云开发，实现登录注册，更改资料，修改密码，邮箱验证，上传，下载，推送消息，缩略图加载等功能
Android高效率编码-第三方SDK详解系列(二)--Bmob后端云开发,实现登录注册,更改资料,修改密码,邮箱验证,上传,下载,推送消息,缩略图加载等功能 我的本意是第二篇写Mob的shareSD ...
- CBV加装饰器解决登录注册问题和 <<中间件>>
文本目录 CBV加装饰器解决登录注册问题 一:什么是中间件 二:中间件有什么用 三:自定义中间件 四:中间件应用场景 五:SCRF TOKEN跨站请求伪造 六: 其他操作 CBV加装饰器解决登录注册问 ...
- mysql 忘记root密码，重置密码，及重置密码后权限问题不能登录的解决方案
由于一段时间没有使用MySQL,忘记了root登录密码. 决定重置下密码,搜索帮助. 参考文档: http://blog.csdn.net/odailidong/article/details/507 ...
- zabbix忘记admin登录密码重置密码
问题描述: 有时候忘记admin的密码了,因为账号太多 解决方案: 1.zabbix连接的是mysql数据库 [root@localhost /]# mysql -uroot -pAbc123 #-u ...
- 64位 windows10，MYSQL8.0.13重置密码（忘记密码或者无法登录）
上一节的MySQL的配置安装里,并没有用到配置文件my.ini.那在MYSQL8.0.13如何解决密码重置问题呢.我去网上搜了好多的资料都是改配置文件my.ini的,后来终于找到了一条命令:操作步骤如 ...
随机推荐
- python及第三方库交叉编译
一.前言: 网上关于python的交叉编译的文章很多,但是关于python第三库的交叉编译的文章就比较少了,而且很多标题是第三方库的交叉编译,但是实际上用到的都是不需要交叉编译就能用的库,可参考性不强 ...
- Makfile总结
Makfile总结 在前面的三篇文章彻底掌握Makefile(一).彻底掌握Makefile(二)和彻底掌握Makeifle(三)当中我们仔细介绍了Makefile各种使用方法,在本篇文章当中主要是对 ...
- 虚拟线程 - VirtualThread源码透视
前提 JDK19于2022-09-20发布GA版本,该版本提供了虚拟线程的预览功能.下载JDK19之后翻看了一下有关虚拟线程的一些源码,跟早些时候的Loom项目构建版本基本并没有很大出入,也跟第三方J ...
- 大数据技术之HBase原理与实战归纳分享-上
@ 目录 概述 定义 特点 数据模型 概述 逻辑结构 物理存储结构 数据模型 应用场景 基础架构 安装 前置条件 部署 启动服务 高可用 Shell操作 基础操作 命令空间 DDL DML 概述 定义 ...
- Hbase之命令
Hbase之命令 -- 查询数据量 hbase org.apache.hadoop.hbase.mapreduce.RowCounter '{namespaceName:tablename}' cou ...
- 备份 MySQL 的 shell 脚本(mysqldump版本) shell脚本
#!/bin/bash # 备份 MySQL 的 shell 脚本(mysqldump版本) # 定义变量 user(数据库用户名),passwd(数据库密码),date(备份的时间标签) # dbn ...
- Typora设置代码块Mac风格三个圆点
写作不停,美化不止! mac小圆点效果 原本代码块样式就挺....干净的,光秃秃的,太单调了: 是吧很丑,于是自己发挥改成了这样: 好吧还是太单调,也没好看到哪里去,于是隔了两天又重新改,DuangD ...
- 42.JSON Web Token认证
JSON Web Token认证介绍 简称JWT认证,一般用于用户认证 JWT是一种相当新的标准,可用于基于token的身份验证 与内置的TokenAuthentication方案不同,JWT不需要使 ...
- vuex和浏览器【sessionStorage，localStorage ..】 得区别
1.Vuex的主要作用是用来共享和管理数据,那为什么不直接使用浏览器缓存呢?2.Vuex和浏览器缓存策略的根本区别是什么?3.Vuex,state仓库中的数据流是单向同步的,那为什么可以在action ...
- SQL-GROUP BY语句在MySQL中的一个错误使用被兼容的情况
首先创建数据库hncu,建立stud表格. 添加数据: create table stud(sno varchar(30) not null primary key,sname varchar(30) ...