js正则验证弱密码(大小写,特殊字符,数字不少于8位) element-plus 表单验证
element-plus
element-plus/element-plus: Element Plus 是一个基于 Vue 3 的组件库,提供了丰富且易于使用的 UI 组件,用于快速搭建企业级桌面和移动端的前端应用。
项目地址:https://gitcode.com/gh_mirrors/el/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' }],
})
登录示意图
GitHub 加速计划 / el / element-plus
23.88 K
15.37 K
下载
element-plus/element-plus: Element Plus 是一个基于 Vue 3 的组件库,提供了丰富且易于使用的 UI 组件,用于快速搭建企业级桌面和移动端的前端应用。
最近提交(Master分支:1 个月前 )
c1863f50
1 个月前
b55163fd
1 个月前
更多推荐
已为社区贡献11条内容
所有评论(0)