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' }],
})

 

登录示意图