js正则验证弱密码（大小写，特殊字符，数字不少于8位） element-plus 表单验证

为了顺应网络安全的要求，前端要在登录的时候验证用户的密码是否为弱密码。特此记录。

密码的校验规则是：用户密码长度不少于8位，包裹大小写字母、数字、字符中的至少3种，不能包含用户名。

1、开始写出各个规则的正则

// 各个规则的验证正则 统一一个名为  validatePwd.ts 的文件中  具体内容如下：// 是否包含大写字母
const hasUpperLetter = /(?=.*[A-Z])/;// 是否包含小写字母
const hasLowerLetter = /(?=.*[a-z])/;// 是否包含大小写
const hasUpperAndLowerLetter = /(?=.*[A-Z])(?=.*[a-z])/;// 是否包含数字
const hasDigit = /(?=.*[0-9])/;// 是否包含字符
const hasChar = /(?=.*[\W])/;// 以下为导出的方法// 检测包含大写字母
export function checkUpperLetter (str: string):boolean {return hasUpperLetter.test(str)
}// 检测包含小写字母
export function checkLowerLetter (str: string):boolean {return hasLowerLetter.test(str)
}// 检测包含大小写字母
export function checkLetter (str: string):boolean {return hasUpperAndLowerLetter.test(str)
}// 检测包含数字
export function checkDigit (str: string):boolean {return hasDigit.test(str)
}// 检测包含字符
export function checkChar (str: string):boolean {return hasChar.test(str)
}// 综合验证，长度不小于8
export function finalCheck (str: string):boolean {return /(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[\W]).{8,}/.test(str)
}

2、在登陆前校验密码

// 需要引入上边封装的所有方法
import {.......
} from './validate';// 登陆页 登录逻辑// 在这一步之前需要对登陆表单进行简单的校验，比如不能为空等等
const handleLogin = () => {const type: string = checkPassword(loginForm.password); // 密码// 提示用户的信息const messageObj = {user: '密码不能包含用户名',char: '密码必须包含特殊字符',lower: '密码必须包含小写字母',upper: '密码必须包含大写字母',ul: '密码必须包含大小写字母',digt: '密码必须包含数字',pwd: '密码长度不小于8位，必须包含大写、小写数字、字符中至少3种'};if (type != 'ok') {// 在这里弹出对应的提示alert(messageObj[type]);}
}// 这里需要确定密码是不符合哪一种类型
const checkPassword = (str: string): string => {let type: string;// 需要在这里传入用户名，生成判断是否包含用户名的正则// loginForm.user 是一个变量，就是用户输入的用户名const hasUser: boolean = new RegExp(`(?=.*${loginForm.user})`);if (hasUser) {type = 'user'} else if (!checkChar(str)) {type = 'char'} else if (!hasLowerLetter(str)) {type = 'lower'} else if (!hasUpperLetter(str)) {type = 'upper'} else if (!checkLetter(str)) {type = 'ul'} else if (!hasDigit(str)) {type = 'digt'} else if (!finalCheck(str)) {type = 'pwd'} else {type = 'ok' //这个 ok 代表就是通过了验证}return type
}

3、终极综合校验

上边是一个一个的去校验，而需求是大小写、字母、数字和特殊字符至少三种，所以直接上终极正则：

// 终极正则
// 检验密码必须包含大小写字母、数字、特殊字符中至少3中  并且位数不小有8， 如下const finalCheckPwd = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,16}$/;// 校验密码
const checkPwd: boolean = finalCheckPwd.test(loginForm.password);// 校验信息
const message = checkPwd ? '通过校验' : '不通过校验';

4、配合element-plus的Form进行登录验证

vue3配合element-plus进行登陆操作，可以自定义form的校验规则

const ruleForm = reactive({user: '', // 用户pass: '', // 密码
})// 密码校验
const validatePass2 = (rule: any, value: any, callback: any) => {if (value === '') {callback(new Error('密码不能为空'))} else if (loginForm.user === '') {// 解释一下为什么要判断用户名不能为空// 因为我们的密码校验其中有一项是要校验是否包含用户名，如果用户名不输入，怎么校验？？？callback(new Error('请先输入用户名'))} else {const finalCheckPwd = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)                        (?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,16}$/;// 校验密码const checkPwd: boolean = finalCheckPwd.test(loginForm.password);if (!checkPwd) {callback(new Error('密码必须不少于8位，包含大小写、字母、字符至少三种'))} else {callback();// 注意，这个空的callback非常重要，没有它作为结束，整个校验会出问题}}
}const rules = reactive({user: [{ required: true, message: '用户名不能为空',  trigger: 'blur' }],pass: [{ validator: validatePass2, trigger: 'blur' }],
})

登录示意图

js正则验证弱密码（大小写，特殊字符，数字不少于8位） element-plus 表单验证相关推荐

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
【修真院web小课堂】angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的？
大家好,我是IT修真院武汉分院web第16期的学员孟晨,一枚正直纯洁善良的web程序员今天给大家分享一下,修真院官网js(职业)任务八,深度思考中的知识点--angular js常用指令 ng-bl ...
vue + element 自定义表单验证的时候需要通过请求后端接口验证
vue + element 自定义表单验证的时候需要通过请求后端接口验证做vue项目的时候遇到了一个需求,在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值. // templat ...
Element UI——表单验证输入的数字检测出来是string解决方案
问题描述打印判断类型问题分析解决方案数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符. < ...
element ui表单验证
这里通过一个实例来说明表单验证: 如上图所示,我们点击"添加新用户"弹出弹框这里只讲弹框里面的校验代码: <template><div id="cre ...
element ui 表单验证为正整数
很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...
Bootstrap5使用bootstrapValidator完成表单验证（包括解决样式、图标不显示及其他组件表单验证出问题解决方案）
以下都为个人实践. CND引入bootstrap5及bootstrapValidator文件 bootstrap5 <link href="https://cdn.jsdelivr.n ...
element ui 表单验证残留提示处理
问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息点击编辑框解决方法:添加表单重置验证我们可以通过为两个表单添加ref属性之后 ...
element自定义表单验证上传身份证正反面的实现
效果图 <template> <div> <el-form :model="personalForm" :rules=&quo ...

js正则验证弱密码（大小写，特殊字符，数字不少于8位） element-plus 表单验证

1、开始写出各个规则的正则

2、在登陆前校验密码

3、终极综合校验

4、配合element-plus的Form进行登录验证

js正则验证弱密码（大小写，特殊字符，数字不少于8位） element-plus 表单验证相关推荐

最新文章

热门文章