0
0

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

应用场景

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

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

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

开发流程分析

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

1.个人设置——修改密码：旧密码、新密码、重复密码（3个输入框）

2.用户管理——新建用户：密码、重复密码（2个输入框）

3.用户管理——修改用户：重置密码（1个输入框）

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

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

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

详细开发场景

1.个人设置——修改密码

  1. <el-form ref="passwdForm" :model="passwd" label-width="100px" style="margin: 16px" :rules="rules" size="default">
  2.         <el-form-item prop="oldVal" label="旧密码">
  3.           <el-input v-model.trim="passwd.oldVal" type="password" show-password placeholder="请输入旧密码"></el-input>
  4.         </el-form-item>
  5.         <el-form-item prop="newVal" label="新密码">
  6.           <el-input
  7.             v-model.trim="passwd.newVal"
  8.             type="password"
  9.             show-password
  10.             placeholder="请输入包含英文字母大小写、数字和特殊符号的 8-16 位组合"
  11.           ></el-input>
  12.         </el-form-item>
  13.         <el-form-item prop="repeatNewVal" label="重复密码">
  14.           <el-input
  15.             v-model.trim="passwd.repeatNewVal"
  16.             type="password"
  17.             show-password
  18.             placeholder="请重复密码"
  19.           ></el-input>
  20.         </el-form-item>
  21.         <div style="width: 100%; height: 40px">
  22.           <el-button style="float: right; margin: 4px" @click="$refs['passwdForm'].resetFields()">清空</el-button>
  23.           <el-button type="primary" style="float: right; margin: 4px" @click="onSubmit">确定</el-button>
  24.         </div>
  25.       </el-form>
  1.  data() {
  2. //新密码与重复密码不一致，一定写在data里但不是return里
  3.     let repeatValidate = (rule, value, callback) => {
  4.       if (value !== this.passwd.newVal) {
  5.         callback(new Error('两次输入密码不一致!'))
  6.       } else {
  7.         callback()
  8.       }
  9.     }
  10. //正则校验主要是这部分：/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[._~!@#$^&*])[A-Za-z0-9._~!@#$^&*]{8,16}$
  11. //其中特殊字符包括：._~!@#$^&*  （比较常见）
  12.     let newValValidate = (rule, value, callback) => {
  13.       if (value === this.passwd.oldVal) {
  14.         callback(new Error('新密码不能与旧密码一致'))
  15.       } else if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[._~!@#$^&*])[A-Za-z0-9._~!@#$^&*]{8,16}$/g.test(value)) {
  16.         callback()
  17.       } else {
  18.         callback(new Error('请输入包含英文字母大小写、数字和特殊符号的 8-16 位组合'))
  19.       }
  20.     }
  22.     return {
  23.       passwd: {
  24.         oldVal: '',
  25.         newVal: '',
  26.         repeatNewVal: ''
  27.       },
  28.       showPasswdChange: false,
  29.       rules: {
  30.         oldVal: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
  31.         newVal: [
  32.           { required: true, message: '新密码不能为空', trigger: 'blur' },
  33.           {
  34.             min: 8,
  35.             max: 16,
  36.             message: '长度应在 8 到 16 个字符',
  37.             trigger: 'blur'
  38.           },
  39.           { validator: newValValidate, trigger: 'blur' }
  40.         ],
  41.         repeatNewVal: [
  42.           { required: true, message: '请再输入一遍新密码', trigger: 'blur' },
  43.           { validator: repeatValidate, trigger: 'blur' }
  44.         ]
  45.       }
  46. }

实现效果，如下：

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

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

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

  1.          
  2. //新建用户——新密码、重复密码
  3.    <el-form-item label="密码" prop="userPasswd"  v-if="!seeEnable && !editEnable">
  4.               <el-input
  5.                 v-model.trim="userInfo.userPasswd"
  6.                 show-password
  7.                 placeholder="请输入包含英文字母大小写、数字和特殊符号的 8-16 位组合"
  8.               ></el-input>
  9.             </el-form-item>
  10.             <el-form-item label="重复密码" prop="userPasswdRe">
  11.               <el-input v-model.trim="userInfo.userPasswdRe" show-password placeholder="请重复密码"></el-input>
  12. </el-form-item>
  13. //修改用户——重置密码
  14. <el-form-item v-if="editEnable" label="重置密码" prop="userPasswdReset">
  15.             <el-input
  16.               v-model="userInfo.userPasswdReset"
  17.               show-password
  18.               placeholder="请输入包含英文字母大小写、数字和特殊符号的 8-16 位组合"
  19.             ></el-input>
  20. </el-form-item>
  1.  
  2. data(){
  3.     /*
  4.      *@description:重复密码校验
  5.      *@date: 2022-07-14 15:25:12
  6.      */
  7.     let checkPasswdRe = (rule, value, callback) => {
  8.       if (value === '') {
  9.         callback(new Error('请再次输入密码'))
  10.       } else if (value !== this.userInfo.userPasswd) {
  11.         callback(new Error('两次输入密码不一致!'))
  12.       } else {
  13.         callback()
  14.       }
  15.     }
  16.     //密码校验
  17.     let newValValidate = (rule, value, callback) => {
  18.       if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[._~!@#$^&*])[A-Za-z0-9._~!@#$^&*]{8,16}$/g.test(value)) {
  19.         callback()
  20.       } else {
  21.         callback(new Error('请输入包含英文字母大小写、数字和特殊符号的 8-16 位组合'))
  22.       }
  23.     }
  24. //重置密码校验
  25.     let checkPasswdReset = (rule, value, callback) => {
  26.       if (!value) {
  27.         return callback()
  28.       } else {
  29.         if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[._~!@#$^&*])[A-Za-z0-9._~!@#$^&*]{8,16}$/g.test(value)) {
  30.           callback()
  31.         } else {
  32.           callback(new Error('请输入包含英文字母大小写、数字和特殊符号的 8-16 位组合'))
  33.         }
  34.       }
  35.     }
  36.     return {
  37.      
  38.       seeEnable: true, //查看
  39.       editEnable: false, //修改用户信息时展示重置密码
  40.       userInfo: {
  41.         nickName: '',
  42.         userPasswd: '',
  43.         userPasswdRe: '',
  44.         phone: '',
  45.         userPasswdReset: ''
  46.       },
  47.       rules: {
  48.         userPasswd: [
  49.           { required: true, message: '密码不能为空', trigger: 'blur' },
  50.           {
  51.             min: 8,
  52.             max: 16,
  53.             message: '长度应在 8 到 16 个字符',
  54.             trigger: 'blur'
  55.           },
  56.           { validator: newValValidate, trigger: 'blur' }
  57.         ],
  58.         userPasswdRe: [
  59.           {
  60.             required: true,
  61.             validator: checkPasswdRe,
  62.             trigger: 'blur'
  63.           }
  64.         ],
  65.         userPasswdReset: [
  66.           {
  67.             min: 8,
  68.             max: 16,
  69.             message: '长度应在 8 到 16 个字符',
  70.             trigger: 'change'
  71.           },
  72.           { validator: checkPasswdReset, trigger: 'change' }
  73.         ]
  74.     }
  75. }

实现效果如下：

3.关于提交——校验

  1.  async editSubmitForm() {
  2.       this.$refs['ruleForm'].validate(async (valid) => {
  3.         if (valid) {
  4.         //提交操作
  6.         }
  7.      })
  8. },

总结/分析：

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

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

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

记录over。

标签： 前端 javascript java
本文转载自: https://blog.csdn.net/ParkChanyelo/article/details/128544057
版权归原作者 pcyyyyyyyyyyyyyyyyyy 所有， 如有侵权，请联系我们删除。
登录后发布评论

“vue2+element-plus 密码校验及动态校验”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？