简单的密码修改

news/2024/10/31 1:33:00/

废话不多说,直接看图:由上而下
第一步:点击编辑按钮,编辑按钮隐藏,文本框、取消按钮、提交按钮都显示如图二
图一
第二步:点击对号√在文本框内直接修改密码,修改完成,提交后如图三,点击叉号×,恢复图一
在这里插入图片描述图二
第三步:提交成功就如图三所示
在这里插入图片描述图三
先解说下:这里一个展示、一个输入框、三个按钮,主要是通过显隐来控制的(v-show字段),代码如下:
里面的

<div style="margin-top:3vh;"><h3><span>密码:<span v-show="span" style="color:#3884B7;">{{ this.workPoint_password }}</span></span><el-input v-show="inp_show" style="width:130px; margin:auto;" v-model="workPoint_password_value2"></el-input><!-- 验证码编辑按钮 --><el-button v-show="btu_password" type="text" style="color:orange;" class="el-icon-edit" @click="input_edit()"></el-button><!-- 验证码编辑取消 --><el-button v-show="close_password" type="text" style="color:red;" class="el-icon-close" @click="input_cancel()"></el-button><!-- 验证码编辑提交 --><el-button v-show="check_password" type="text" style="color:green;" class="el-icon-check" @click="input_check()"></el-button></h3></div>

事件代码如下:

		input_edit(){  //`打开验证码编辑按钮事件` this.inp_show = true   // `文本输入框的显隐`this.span = false          //`文本的显隐`this.btu_password = false    //`编辑按钮的显隐`this.close_password  =  true   //`取消编辑的按钮的显隐`this.check_password = true    //`提交编辑后的按钮的显隐`this.workPoint_password_value2 = this.workPoint_password    //`这显示的文本赋值给输入框`},input_cancel(){  //`取消验证码编辑框`this.inp_show = false   //this.btu_password = true    //this.close_password  =  false     //this.span = true    //this.check_password = false    //},input_check(){  //`验证码编辑后提交`let m = this.workPoint_password_value2let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/   //`正则验证:只能是大小写字母和数字三种格式同时组成,并长度为6~10位`var va = reg.test(m)console.log(va);if(m.length >= 6 && m.length <= 10){console.log("1");if(va === true){console.log("2");const params = {new_password: this.workPoint_password_value2}this.$http.put("api/api/api/" + this.work_point.id, params).then(res => {console.log(res);if(res.data.code === 200) {this.btu_password = true    //验证码的编辑按钮显示this.close_password = false,   //验证码取消按钮this.check_password = false,  //验证码提交按钮this.inp_show = false,  //验证码的编辑框this.span = truethis.workPoint_password = res.data.data[0]this.$notify({title:"温馨提示",type:"success",message:this.$createElement("i",{style:"color:green"},res.data.msg)})}})}else{this.$notify({title:"温馨提示",type:"warning",message:this.$createElement("i",{style:"color:orange"},"请按照正确的密码规则输入\n密码只能由大小写字母[A~Z,a~z]及数字[0~9]同时组成\n并密码长度必须为6~10位")})alert("请按照正确的密码规则输入\n密码只能由大小写字母[A~Z,a~z]及数字[0~9]同时组成\n并密码长度必须为6~10位")}}else{this.$notify({title:"温馨提示",type:"warning",message:this.$createElement("i",{style:"color:orange"},"填报密码长度为:6~10位数")})}console.log(va);}

http://www.ppmy.cn/news/354517.html

相关文章

腾讯qq对计算机进行更改,腾讯QQ电脑修改密码图文教程

如何在计算机上修改QQ密码&#xff1f;我相信有许多用户有腾讯QQ&#xff0c;虽然定期修改QQ密码可以帮助用户更好地保护他们的帐户安全&#xff0c;许多小伙界经常使用手机来修改QQ密码&#xff0c;然后今天Xiaobian拍了一场比赛&#xff0c;看看如何使用你的电脑修改&#xf…

电脑上qq,pc电脑上qq怎么改密码?

QQ是大家最经常用的PC聊天软件&#xff0c;很多刚刚接触QQ的小伙伴还不知道在PC电脑上QQ要怎么改密码&#xff0c;其实步骤还是很简单的&#xff0c;今天就来为大家分享一下PC电脑上改QQ密码的图文教程。 1、把鼠标悬停到右上角&#xff0c;这时候你QQ就会跳出来&#xff0c;在…

使用QQ邮箱修改密码

后端 from rest_framework.response import Response from rest_framework.views import APIView from rest_framework_jwt.authentication import jwt_decode_handler from rest_framework_jwt.utils import jwt_decode_handlerfrom userapp.ser import * import jwt #自己封…

修改密码了

(用户名从session获取&#xff0c;然后根据用户名查询对应user信息做验证) 页面构建 复制代码 1 <!DOCTYPE html>2 <html class"x-admin-sm" xmlns:th"http://www.thymeleaf.org">3 <head>4 <meta charset"UTF-8&…

修改密码的流程

一般用户修改密码都是要有一下步骤的。 一丶填写原密码 二丶填写新密码并填写确认密码。 如下图。 当密码都填写完成了之后就可以去判断这些密码然后到数据库去修改了。 第一步判断数据是否填写完整。新密码与确认新密码是否一致。如果不一致那么就无法修改。如下代码 var Yp…

怎么修改SQL的密码?

先修改成一下复杂的密码 &#xff08;大小写复杂一些&#xff09; mysql> set passwordpassword("VIYUviyf-"); 查看相关密码配置地方在哪 mysql> show variables like %password%; 密码长度改成4位 mysql> set global validate_password_length4; 密…

修改密码,更换密码

import java.util.Scanner;public class scduixiang {String account "zsl";String password "123456";public void accountInfo() {System.out.println("账号" account "\t密码&#xff1a;" password);}public static void mai…

用户修改密码

用户-修改密码-持久层 1.1 规划需要执行的SQL语句 用户修改密码时需要执行的SQL语句大致是&#xff1a; update t_user set password ?,modified_user?,modified_time? where uid?在执行修改密码之前&#xff0c;还应检查用户数据是否存在、并检查用户数据是否被标记为…