位置: IT常识 - 正文

vue2+element-plus 密码校验及动态校验

编辑:rootadmin
vue2+element-plus 密码校验及动态校验 应用场景

推荐整理分享vue2+element-plus 密码校验及动态校验,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

团队想给新系统的新建/修改用户、个人设置的修改密码中的密码输入框加一个密码校验。具体加什么校验,产品参考了几个增加密码复杂度的校验,比如不能输入连续的3个数字,这种校验,但是好像密码的复杂度并不能保证系统的安全性,好像邮箱验证会比较安全?虽然密码只防君子不妨小人,但是设置密码校验也只是避免用户输入过于简单的密码,比如:123,123456,111111这种。

针对我们这个项目,我们的密码校验规则是:

包含英文字母大小写、数字和特殊符号且在8到16位的任意组合

开发流程分析

首先我有三个场景需要设置密码:

1.个人设置——修改密码:旧密码、新密码、重复密码(3个输入框)

2.用户管理——新建用户:密码、重复密码(2个输入框)

3.用户管理——修改用户:重置密码(1个输入框)

针对三个不同环境,划分一下,分别是需要以下校验:

新密码与旧密码,不能重复新密码/密码 与重复密码,必须一致重置密码、新密码、密码,必须校验正则以上输入框也要校验输入的字符必须在8—16个字符之间并且由于新建和修改用户用的同一个表单,涉及动态展示校验规则vue2+element-plus 密码校验及动态校验

以上是对于需求的确定,关于开发,由于涉及两个页面,分别从个人设置和用户管理,分析具体的代码逻辑。

 详细开发场景1.个人设置——修改密码<el-form ref="passwdForm" :model="passwd" label-width="100px" style="margin: 16px" :rules="rules" size="default"> <el-form-item prop="oldVal" label="旧密码"> <el-input v-model.trim="passwd.oldVal" type="password" show-password placeholder="请输入旧密码"></el-input> </el-form-item> <el-form-item prop="newVal" label="新密码"> <el-input v-model.trim="passwd.newVal" type="password" show-password placeholder="请输入包含英文字母大小写、数字和特殊符号的 8-16 位组合" ></el-input> </el-form-item> <el-form-item prop="repeatNewVal" label="重复密码"> <el-input v-model.trim="passwd.repeatNewVal" type="password" show-password placeholder="请重复密码" ></el-input> </el-form-item> <div style="width: 100%; height: 40px"> <el-button style="float: right; margin: 4px" @click="$refs['passwdForm'].resetFields()">清空</el-button> <el-button type="primary" style="float: right; margin: 4px" @click="onSubmit">确定</el-button> </div> </el-form> data() {//新密码与重复密码不一致,一定写在data里但不是return里 let repeatValidate = (rule, value, callback) => { if (value !== this.passwd.newVal) { callback(new Error('两次输入密码不一致!')) } else { callback() } }//正则校验主要是这部分:/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[._~!@#$^&*])[A-Za-z0-9._~!@#$^&*]{8,16}$//其中特殊字符包括:._~!@#$^&* (比较常见) let newValValidate = (rule, value, callback) => { if (value === this.passwd.oldVal) { callback(new Error('新密码不能与旧密码一致')) } else if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[._~!@#$^&*])[A-Za-z0-9._~!@#$^&*]{8,16}$/g.test(value)) { callback() } else { callback(new Error('请输入包含英文字母大小写、数字和特殊符号的 8-16 位组合')) } } return { passwd: { oldVal: '', newVal: '', repeatNewVal: '' }, showPasswdChange: false, rules: { oldVal: [{ required: true, message: '请输入旧密码', trigger: 'blur' }], newVal: [ { required: true, message: '新密码不能为空', trigger: 'blur' }, { min: 8, max: 16, message: '长度应在 8 到 16 个字符', trigger: 'blur' }, { validator: newValValidate, trigger: 'blur' } ], repeatNewVal: [ { required: true, message: '请再输入一遍新密码', trigger: 'blur' }, { validator: repeatValidate, trigger: 'blur' } ] }}

实现效果,如下:

 

2.用户管理——新建/修改用户 

这里新建用户的时候,有密码和重复密码两个输入框,这是必填项

但是修改用户的时候,只展示重置密码的输入框,并且 不是必填项,所以这个输入框的rules里面的 required: true,这个就去掉。

//新建用户——新密码、重复密码 <el-form-item label="密码" prop="userPasswd" v-if="!seeEnable && !editEnable"> <el-input v-model.trim="userInfo.userPasswd" show-password placeholder="请输入包含英文字母大小写、数字和特殊符号的 8-16 位组合" ></el-input> </el-form-item> <el-form-item label="重复密码" prop="userPasswdRe"> <el-input v-model.trim="userInfo.userPasswdRe" show-password placeholder="请重复密码"></el-input></el-form-item>//修改用户——重置密码<el-form-item v-if="editEnable" label="重置密码" prop="userPasswdReset"> <el-input v-model="userInfo.userPasswdReset" show-password placeholder="请输入包含英文字母大小写、数字和特殊符号的 8-16 位组合" ></el-input></el-form-item>data(){ /* *@description:重复密码校验 *@date: 2022-07-14 15:25:12 */ let checkPasswdRe = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')) } else if (value !== this.userInfo.userPasswd) { callback(new Error('两次输入密码不一致!')) } else { callback() } } //密码校验 let newValValidate = (rule, value, callback) => { if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[._~!@#$^&*])[A-Za-z0-9._~!@#$^&*]{8,16}$/g.test(value)) { callback() } else { callback(new Error('请输入包含英文字母大小写、数字和特殊符号的 8-16 位组合')) } }//重置密码校验 let checkPasswdReset = (rule, value, callback) => { if (!value) { return callback() } else { if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[._~!@#$^&*])[A-Za-z0-9._~!@#$^&*]{8,16}$/g.test(value)) { callback() } else { callback(new Error('请输入包含英文字母大小写、数字和特殊符号的 8-16 位组合')) } } } return { seeEnable: true, //查看 editEnable: false, //修改用户信息时展示重置密码 userInfo: { nickName: '', userPasswd: '', userPasswdRe: '', phone: '', userPasswdReset: '' }, rules: { userPasswd: [ { required: true, message: '密码不能为空', trigger: 'blur' }, { min: 8, max: 16, message: '长度应在 8 到 16 个字符', trigger: 'blur' }, { validator: newValValidate, trigger: 'blur' } ], userPasswdRe: [ { required: true, validator: checkPasswdRe, trigger: 'blur' } ], userPasswdReset: [ { min: 8, max: 16, message: '长度应在 8 到 16 个字符', trigger: 'change' }, { validator: checkPasswdReset, trigger: 'change' } ] }}

实现效果如下:

 

3.关于提交——校验 async editSubmitForm() { this.$refs['ruleForm'].validate(async (valid) => { if (valid) { //提交操作 } })},总结/分析:

密码校验,只是表单经常校验的一类,之前遇到select的校验,经常会遇到一打开弹窗,表单的校验就出现的bug,这是由于数据的初始化中的结构和select获取的数据结构不一致的原因,这里也记录一下。

以上就是关于密码校验的开发,其实密码校验还有很多常见的正则类型,比如:

密码包含字母、数字组成,区分大小写的8-18位组合:^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$

记录over。

本文链接地址:https://www.jiuchutong.com/zhishi/290181.html 转载请保留说明!

上一篇:在大运河上举办的赛船节, 意大利威尼斯 (© Alexander Duffner/Alamy)(在大运河上举办什么活动)

下一篇:第十四届蓝桥杯第三期模拟赛 C/C++ B组 原题与详解(第十四届蓝桥杯大赛官网)

  • 上年度暂估的票回不来一直挂帐吗
  • 资产负债表的固定资产怎么计算
  • 预收账款可以开票吗
  • 高新技术认定标准条件是什么
  • 外来审计人员交通费
  • 公司内部人员发言稿
  • 资产损失企业所得税扣除
  • 企业所得税汇算清缴退税怎么做账
  • 销售免税的有机食品
  • 户口与工作地不一致,社保
  • 会计学中管理费用属于什么
  • 农产品收购发票开错了
  • 第一季度盈利第二季度亏损全年盈利
  • 什么情况下需要写答
  • 计提增值税电费怎么算
  • 公司账户境外汇款
  • 企业减免税会计分录
  • 购买税友系统可以抵扣吗
  • 特殊业务分录
  • 损益类科目为什么不影响利润
  • 万元的票可以开到多大金额
  • 公司收到纸质承兑不开票行吗
  • 1697508432
  • 净利润等于未分配利润和盈余公积吗
  • 公司个人所得税怎么申报
  • 股东放弃债权账务处理
  • 行政事业单位的固定资产不计提折旧
  • 餐查账征收企业所得税会计分录?
  • 客户年会赞助是公司账户转嘛
  • linux命令执行成功后会返回什么
  • 怎么在电脑上设置输入法
  • 人力成本费用率和人工成本利润率
  • 企业废业实收资产怎么算
  • 增值税价外费用如何开票
  • transit code
  • php redis实现秒杀思路
  • 个人签订借款合同
  • 跨年可以预提费用吗
  • 小企业会计准则调整以前年度费用分录
  • 小程序开发一个多少钱啊
  • vue foreach is not a function
  • 财税2016年12号文件解读
  • word2vec使用方法
  • php+jquery+html实现点击不刷新加载更多的实例代码
  • 功能强大的php发展趋势
  • dos命令怎么转到d盘
  • 无偿划转法律意见
  • 有什么学电脑的网站
  • 经营户个人所得税
  • sqlserver 15247
  • sqlserver获取uuid
  • 企业增值税包含哪些税项及税率
  • 以前年度多计收入今年怎么调整
  • 工会经费通过应交税费核算吗
  • 城投公司代表政府出资签订招商引资协议
  • 植物售卖
  • 外币报表折算差额名词解释
  • 提前报废固定资产需要补提折旧
  • 年度计提资产减值准备 好还是坏
  • 开发软件应采用
  • 对公账户汇款怎么原路退回
  • 免费领课程有什么陷阱
  • 贸易融资具体包括
  • mysql中数据类型为是否
  • 关于数据库的叙述
  • 深入浅出了解啥意思
  • 在windows 7中任务栏儿
  • 如何延长手机电池使用寿命
  • winxp系统设置密码
  • windowsxp怎么装windows7
  • linux系统怎么共享
  • red hat linux安装
  • cocos2d
  • jquery将文本框设置为只读
  • 深入理解计算机系统
  • unity 3d完全自学教程
  • 自制基质
  • 浙江省税务师事务所排名
  • 汉口市中心
  • 加工中心钻孔进给
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设