当前位置:首页 » 《休闲阅读》 » 正文

vue+elementUI用户修改密码的前端验证

18 人参与  2024年04月08日 09:40  分类 : 《休闲阅读》  评论

点击全文阅读


用户登录后修改密码,密码需要一定的验证规则。旧密码后端验证是否正确;前端验证新密码的规范性,新密码规范为:6-16位,至少含数字/字母/特殊字符中的两种;确认密码只需要验证与新密码是否一致;

效果图

弹窗结构

<el-dialog title="修改密码"           :visible.sync="passDlgVisible"           @close="passDlgClose"           width="400px">    <el-form :model="passForm"             ref="passRef"             :rules="passRules"             hide-required-asterisk             label-width="70px"             size="small">        <el-form-item label="旧密码" prop="oldPassword">            <el-input v-model="passForm.oldPassword" show-password></el-input>        </el-form-item>        <el-form-item label="新密码" prop="newPassword">            <el-input v-model="passForm.newPassword" show-password></el-input>        </el-form-item>        <el-form-item label="确认密码" prop="confirmPassword">            <el-input v-model="passForm.confirmPassword" show-password></el-input>        </el-form-item>    </el-form>    <span slot="footer">            <el-button @click="passDlgVisible=false" size="small">取消</el-button>            <el-button @click="passSave" type="primary" size="small">确认</el-button>        </span></el-dialog>

form验证规则

passRules: {oldPassword:[{required: true, message: '请输入旧密码', trigger: 'blur'}],    newPassword:[{validator: this.validNewPass, trigger: 'blur'}],    confirmPassword:[{validator: this.validConfirmPass, trigger: 'blur'}]}

验证函数

/** * 验证新密码 */validNewPass(rule, value, callback) {    let reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,16}$/    if (value === '') {        callback(new Error('请输入新密码'));    } else if (!reg.test(value)) {        callback(new Error('6-16位,至少含数字/字母/特殊字符中的两种'))    } else {        if (this.passForm.confirmPassword !== '') {            this.$refs.passRef.validateField('confirmPassword');        }        callback();    }},/** * 验证确认密码 */validConfirmPass(rule, value, callback) {    if (value === '') {        callback(new Error('请再次输入密码'));    } else if (value !== this.passForm.newPassword) {        callback(new Error('两次输入密码不一致!'));    } else {        callback();    }}

弹窗关闭后清空字段和验证

/** * 弹窗关闭事件 */passDlgClose() {    this.passForm = {        oldPassword: '',        newPassword: '',        confirmPassword: ''    }    this.$refs.passRef.clearValidate();}

提交表单

passSave() {    this.$refs.passRef.validate((valid) => {        if (valid) {            this.passForm.userName = this.userName            api.user.editPass(this.passForm).then(res => {                this.passDlgVisible = false;            })        } else {            return false;        }    });}

这就是修改密码的全部流程啦。。。。有问题评论区答复。。。。能解决的就答复,不能解决的自己百度哈。。。。


点击全文阅读


本文链接:http://zhangshiyu.com/post/92032.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 她的记忆停留在了最爱初恋的那年许欣柔楚临川完本_她的记忆停留在了最爱初恋的那年(许欣柔楚临川)
  • 全书浏览假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)_假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)全书结局
  • 童养夫让我给他的新欢出修复费(林嘉芝林思雅)_童养夫让我给他的新欢出修复费林嘉芝林思雅
  • 全文资助生女婿让我给他白月光付三千万月子中心钱(宋清玉宋雅)列表_全文资助生女婿让我给他白月光付三千万月子中心钱
  • 碎在时光里的谎言喻景宴秦明月完本_碎在时光里的谎言(喻景宴秦明月)
  • 旧爱剜心吻成灰席鄢之岑秋全书免费旧爱剜心吻成灰席鄢之岑秋全书免费
  • 结婚六年丈夫不碰我谁知儿子亲爹是寡头(纪清言傅司砚),结婚六年丈夫不碰我谁知儿子亲爹是寡头
  • 老公想换掉我的男胎,我笑他自不量力(宋薇于继业)_老公想换掉我的男胎,我笑他自不量力宋薇于继业
  • 给太子下了噬心蛊后,皇后找上门(小夭赵劼)全书浏览_给太子下了噬心蛊后,皇后找上门全书浏览
  • 豪门绝嗣!带球跑的夫人回来了!(谢长宴慕清杳)_豪门绝嗣!带球跑的夫人回来了!谢长宴慕清杳
  • 完美身材(李朵林之晴)_完美身材李朵林之晴
  • 离婚后,我和快穿系统绑定(白意秋陈荣周立慧)_离婚后,我和快穿系统绑定(白意秋陈荣周立慧)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1