【vue3】中实现 el-from “修改密码” 的步骤详情

已于 2023-03-09 09:35:09 修改
阅读量3.8k 收藏 21
点赞数 3
分类专栏： vue3+ts 文章标签： 前端
于 2022-05-26 10:37:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50450473/article/details/124980129
版权

 

 实现思路：

一、表单验证

1、手机号验证，满足11位，且第3位为 3578 这一个数字

// 表单格式验证
// 手机号验证
const validatePhone = (rule: any, value: any, callback: any) => {
  let str=new RegExp("^1[3578]\\d{9}$");
  if(!str.test(value)){
    callback(new Error('手机号错误！'))
  }else{
    callback()
  }
}

const rules = reactive({
  phone: [{ validator: validatePhone, trigger: 'blur' }]
})

2、新密码以及确认密码验证，请设置6-20位字母，数字的两种组合

// 新密码验证
const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('密码不能为空！'))
    } else {
        if (ruleForm.checkPass !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass', () => null)
        }
    }
    var str = RegExp("^[0-9a-zA-Z]*$")
    if(!str.test(value)||value.length<6||value.length>20){
        callback(new Error('当前密码格式不正确!'))
    }else{
        callback()
    }
}
// 确认密码验证
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码不能为空！'));
  } else if (value !== ruleForm.newPwd) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    callback()
  }
}
const rules = reactive({
  newPwd: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
})

二、输入手机号，点击获取验证码

发送请求给后台，后台通过程序发送短信，获取验证码，然后填写验证码

// 获取验证码
let timer:any = null
let VerCode= ()=>{
    if (!timer) {
        if(ruleForm.phone!==''){
            GetVerCode()
            timer = setTimeout(() => {
                clearTimeout(timer)
                timer = null
            }, 60000)
        }else{
            ElMessage('请输入手机号再试！')
        }
    }
}
// 发送验证码接口
let GetVerCode= async()=>{
    let res:TResponse<string>=await getVerCode({Mobile: ruleForm.phone})
    let {Code,Data,Message}= res
    if(Code===200){
        ruleForm.verCode=Data
        Time()
    }else{
        ElMessage(Message)
    }
}
// 设置倒计时60s
let Time=()=>{
    var codeBtn = document.getElementsByClassName('getYzm')[0]
    if (ruleForm.wait===0) {
        ruleForm.disabledValue=false
        codeBtn.innerHTML = "获取验证码"
        ruleForm.wait = 60
    }else{
        ruleForm.disabledValue=true
        codeBtn.innerHTML = ruleForm.wait + "秒后重试"
        ruleForm.wait--
        setTimeout(function(){
            Time()
        },1000)
    }
}

三、信息输入完成后，点击完成

1、md5加密：

A、安装 js-md5

cnpm install js-md5

B、main.js 引入

import md5 from 'js-md5'
const app = createApp(App)
app.config.globalProperties.$md5 = md5

C、局部引入

<script lang="ts" setup>
import md5 from "js-md5";
</script>

D、页面调用

// 全局引入调用方法
<script lang="ts" setup>
import { getCurrentInstance } from 'vue'

const { appContext } = getCurrentInstance()
let md5=appContext.config.globalProperties.$md5
md5('加密内容')
</script>

// 局部引入调用方法
<script lang="ts" setup>
md5('加密内容')
</script>

2、点击 “完成并登录” 按钮，空值校验

<el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
    <el-form-item>
        <el-button class="loginBtn" @click="ResetPwd(ruleFormRef)">完成并登录</el-button>
    </el-form-item>
</el-form>
// 重置密码
const ResetPwd = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid:any) => {
    if (valid) { // 提交成功
        GetResetPwd()
    } else {
      return false
    }
  })
}
// 提交接口
let GetResetPwd= async()=>{
    let res:TResponse<boolean>=await getResetPwd({Mobile: ruleForm.phone,SMSCode: ruleForm.verificationCode,Password: md5(ruleForm.checkPass).toUpperCase()})
    let {Code,Data,Message}= res
    if(Code===200){
        isShowDialog.value = false
        ElMessage('重置密码成功！')
    }else{
        ElMessage(Message)
    }
}

四、完整代码如下

<template>
    <div class="resetPassword">
        <el-dialog v-model="isShowDialog" :show-close="true" :close-on-press-escape="false" :close-on-click-modal="false">
            <div class="title">重置密码</div>
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
                <el-form-item label="" prop="phone">
                    <el-input v-model="ruleForm.phone" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <div class="row row2">
                    <el-input v-model="ruleForm.verificationCode" placeholder="请输入验证码"></el-input>
                    <div class="getYzm" @click="VerCode()">获取验证码</div>
                </div>
                <el-form-item label="" prop="newPwd">
                    <el-input type="password" v-model="ruleForm.newPwd" placeholder="请输入6-20位新密码" autocomplete="off"></el-input>
                    <div class="tips">请设置6-20位字母，数字的两种组合
                        <!-- ，不能与旧密码相同 -->
                    </div>
                </el-form-item>
                <el-form-item label="" prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass" placeholder="请再次输入密码" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="loginBtn" @click="ResetPwd(ruleFormRef)">完成并登录</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { defineEmits, ref, reactive, watch, getCurrentInstance } from 'vue'
// 引入泛型的类型验证
import { TResponse } from "@/module/common"
// 调API
import { getResetPwd, getVerCode } from "@/api/login";
// elmentui组件
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import md5 from "js-md5";

const props = defineProps({
    isShow: {
        type: Boolean,
        default: false,
    },
})
let isShowDialog = ref(props.isShow)
watch(() => props.isShow, (newVal) => {
    isShowDialog.value = newVal
});

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    phone: '',// 电话
    verificationCode: '',// 验证码
    newPwd: '',//新密码
    checkPass: '',//确认新密码
    wait: 60 // 倒计时
})

// 表单格式验证
// 手机号验证
const validatePhone = (rule: any, value: any, callback: any) => {
  let str=new RegExp("^1[3578]\\d{9}$");
  if(!str.test(value)){
    callback(new Error('手机号错误！'))
  }else{
    callback()
  }
}
// 新密码验证
const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('密码不能为空！'))
    } else {
        if (ruleForm.checkPass !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass', () => null)
        }
    }
    var str = RegExp("^[0-9a-zA-Z]*$")
    if(!str.test(value)||value.length<6||value.length>20){
        callback(new Error('当前密码格式不正确!'))
    }else{
        callback()
    }
}
// 确认密码验证
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码不能为空！'));
  } else if (value !== ruleForm.newPwd) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    callback()
  }
}
const rules = reactive({
  phone: [{ validator: validatePhone, trigger: 'blur' }],
  newPwd: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
})

// 获取发送验证码
let timer:any = null
let VerCode= ()=>{
    if (!timer) {
        if(ruleForm.phone!==''){
            GetVerCode()
            timer = setTimeout(() => {
                clearTimeout(timer)
                timer = null
            }, 60000)
        }else{
            ElMessage('请输入手机号再试！')
        }
    }
}
let GetVerCode= async()=>{
    let res:TResponse<string>=await getVerCode({Mobile: ruleForm.phone})
    let {Code,Data,Message}= res
    if(Code===200){
        Time()
    }else if(Message==='用户不存在'){
        ElMessage('用户不存在')
    }
}
// 设置倒计时60s
let Time=()=>{
    var codeBtn = document.getElementsByClassName('getYzm')[0]
    if (ruleForm.wait===0) {
        codeBtn.innerHTML = "获取验证码"
        ruleForm.wait = 60
    }else{
        codeBtn.innerHTML = ruleForm.wait + "秒后重试"
        ruleForm.wait--
        setTimeout(function(){
            Time()
        },1000)
    }
}

// 重置密码
const ResetPwd = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid:any) => {
    if (valid) { // 提交成功
        GetResetPwd()
    } else {
      return false
    }
  })
}
// 提交接口
let GetResetPwd= async()=>{
    let res:TResponse<boolean>=await getResetPwd({Mobile: ruleForm.phone,SMSCode: ruleForm.verificationCode,Password: md5(ruleForm.checkPass).toUpperCase()})
    let {Code,Data,Message}= res
    if(Code===200){
        isShowDialog.value = false
        ElMessage('重置密码成功！')
    }else{
        ElMessage(Message)
    }
}

</script>
<style lang="scss" scoped >
.resetPassword {
    .title {
        text-align: center;
        margin-bottom: 57px;
        font-weight: 600;
        font-size: 32px;
        line-height: 48px;
        letter-spacing: 0.065em;
        color: #434444;
    }

    /deep/ .el-dialog {
        padding: 34px 52px 0px 52px;
        margin-top: 190px !important;
        position: relative;
        width: 550px !important;
        height: 690px !important;
        background: #FFFFFF;
        border-radius: 20px;

        .el-dialog__body {
            padding: 0;
        }

        .row {
            margin-bottom: 30px;
        }

        .el-input__inner {
            width: 100% !important;
            height: 64px !important;
            border-radius: 10px;
            line-height: 64px;
            font-size: 20px;
            letter-spacing: 0.065em;
            color: #828282;
        }

        .row2 {
            display: flex;
            text-align: left;

            .el-input {
                width: 332px !important;
            }

            .el-input__inner {
                width: 332px !important;
            }

            .getYzm {
                width: calc(100% - 344px);
                height: 100%;
                border: 1px solid #3B86FF;
                border-radius: 10px;
                line-height: 64px;
                font-size: 16px;
                letter-spacing: 0.065em;
                color: #3B86FF;
                text-align: center;
                margin-left: 12px;
            }
        }

        .tips {
            font-size: 16px;
            line-height: 22px;
            letter-spacing: 0.065em;
            color: #3B86FF;
        }

        .loginBtn {
            width: 100%;
            height: 64px;
            text-align: center;
            background: #3B86FF;
            border-radius: 10px;
            font-size: 22px;
            color: #FBFBFB;
            cursor: pointer;
            border: 0;
        }
    }
}
</style>

其中文件 @/module/common.ts 

//接口返回的公共类型
export type TResponse<T> = {
    Code: number
    Data: T
    Message: string
}

文件 @/api/login.ts

 @/module/login， 根据后台返的接口来

        希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

禾小毅
关注
  • 3
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue实现 修改密码
lwg112233的博客
02-05 5001
1.定义一个对话框并绑定数据 <el-dialog title="重置密码" :visible.sync="ResetPwdDialogVisible" width="40%" @close="resetForm('pwdForm')"> <el-form :model="resetPwdForm" status-icon :rules="resetPwdRules
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
在本文中，我们将深入探讨如何在Vue.js项目中结合Element UI的`el-upload`组件实现图片的压缩功能，特别是在用户上传大尺寸图片时，确保前端能够处理并优化图片大小，减轻服务器负担。以下是一步步实现这个功能的...
vue后台管理修改密码
m0_61265297的博客
01-09 953
判断旧密码输入的是否正确是后端判断返回的，前端处理，输入的两次密码是否一直即可，使用自定义表单校验。
前端el-from的学习
qq_40293731的博客
01-13 2935
前端el-from的学习 element组件官网 <template> <el-form :model="ruleForm" //绑定ruleForm表单 :rules="rules" //绑定验证规则,通过rules属性传入约定的验证规则 :class="className" //绑定样式 status-icon //e...
vue3中el-form表单校验，再点击提交按钮的时候通过校验才进行提交
最新发布
李长渊的博客
05-24 1410
vue3中el-form表单校验，再点击提交按钮的时候通过校验才进行提交
Vue修改密码功能的源代码
withkai44的博客
11-29 1138
限定新密码的复杂度，这里是长度在 6 到 20 个字符。"长度在 6 到 20 个字符"旧密码表单提交时必须正确。"两次输入的密码不一致""确认密码不能为空"
VUE3+Element-plus中el-form的使用
nopyramid的博客
11-25 1688
Element-plus使用el-form必须配置ref和model属性，二者的值不能相同（在ElementUI中是可以相同的）。ref的值在声明的时候要引入FormInstance，这个又必须在script中声明lang为ts，不能使用js。2.每个el-form-item必须设置prop属性，否则重置方法resetFields不生效。4.要控制表单项的布局，使用el-row和el-col是不错的方法，易于控制。1.el-form的ref和model属性的参数值必须不一样，否则会冲突。
vue项目中更改密码并验证
qq_42786138的博客
09-03 1133
data() { //此处即表单发送之前验证 let validateNewPassword = (rule, value, callback) => { if (value === this.form.password) { callback(new Error('新密码不能与原密码相同!')) } else { callback()...
【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx
12-29
以下是使用`sortablejs`在Vue中实现`el-table`拖拽排序的详细步骤： 首先，确保已经安装了`sortablejs`库。可以通过npm来安装： ```bash npm install sortablejs --save ``` 接下来，在Vue组件中引入`sortablejs`...
VUE element-ui响应式步骤进度条样式代码
06-11
在本文中，我们将深入探讨如何使用VUE框架与element-ui库来创建响应式的步骤进度条。Element-ui是一个基于Vue.js的UI组件库，它提供了一系列丰富的界面元素，其中包括步骤条组件，非常适合用于处理多步骤流程的用户...
Vue实现el-table导出excel功能
09-06
在Vue.js应用中，我们经常需要为用户提供数据...通过以上步骤，你可以在Vue.js应用中实现el-table组件的数据导出到Excel的功能。这个功能对于数据展示和分析场景非常实用，可以帮助用户方便地存储和离线处理表格数据。
vue_form_design:基于Vue3.0的表单设计器
03-16
vue_form_design:基于Vue3.0的表单设计器
vue实现个人信息查看和密码修改功能
01-19
下面一段代码给大家介绍vue实现个人信息查看和密码修改功能，具体代码如下所述： //用了element组件，自己要加载和引入 <template> <div class=all-container> <div class=all-container-padding> <el v-model=activeName tab-click=handleClick> <el label=基本信息 name=first> <el-form :model=userlist :rules=rul
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
至此，你已经成功地在Vue.js的`el-table`中实现了前端导出分页数据到Excel的功能。这个过程涉及到前端与后端的交互，数据处理，以及利用第三方库生成和保存文件。记住，为了保证用户体验，需要考虑数据量大时的性能...
Vue修改密码功能的实现
Sparks550的博客
01-13 4759
样式 基本需求 输入框不能为空 旧密码表单提交时必须正确 两次输入新密码一致 限定新密码的复杂度，这里是长度在 6 到 20 个字符 代码 <template> <el-form ref="form" :model="user" :rules="rules" label-width="80px"> <el-form-item label="旧密码" prop="oldPassword"> <el-input v-model="user.
elementUI form表单完成密码修改页面
weixin_45322772的博客
01-07 542
【代码】elementUI form表单完成密码修改页面。
小白系列Vite-Vue3-TypeScript：011-登录界面搭建及动态路由配置
总得学点什么的博客
02-15 4106
小白系列Vite-Vue3-TypeScript：011-登录界面搭建及动态路由配置
uni-app vue3 表单验证两次密码是否相同
多才多多
01-12 1853
uni-app 开发 修改密码, 需要验证两次密码是否相同。网上的全是三个参数的.不带data.不知道是改版了,还是他们瞎写的。在网上找的代码, 都是错误的。最后还是看官方文档才写好。下面是正确的 运行正常。
vue3中使用el-upload
06-01
在 Vue 3 中使用 Element UI 的 Upload 组件，你可以按照以下步骤进行配置： 1. 安装 Element UI 组件库 ``` npm install element-plus --save ``` 2. 在 main.js 中引入 Element UI ``` import { createApp } ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值