密碼強度驗證示例

驗證密碼強度，示例規則：以 6-18位密碼，由數字、大小寫字母、特殊字符兩種以上，根據密碼的組合來判定密碼強度

效果示例

html代碼

<div class="row">
       <div class="col-md-12 ">
       <input type="password" id="password" class="form-control" name="password" placeholder="密碼">
       <label class="mt-1 labeltip" for="">8-18位，包含大寫字母、小寫字母、符號、數字中的2種以上</label>
       <label id="password-error" class="error col-md-12 passerrow mg-l" for="password"></label>
       </div>
</div>

js代碼示例：

$(function () {

    // 密碼驗證 6-18位密碼，由數字、大小寫字母、特殊字符兩種以上
    jQuery.validator.addMethod("isPwd", function (value, element) {
        value = jQuery.trim(value);
        let reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9_A-Za-z\!\@\#\$\%\^\&\*\(\)\+\?\<\>\/\,\.]{8,18}$/;
        return this.optional(element) || reg.test(value);
    }, "請輸8-18位，包含大寫字母、小寫字母、符號、數字中的2種以上");
   
    let form = $('#form-register').validate({
        rules: {           
            password: {
                required: true,
                isPwd: true
            },
            confirmPassword: {
                required: true,
                equalTo: "#password"
            },           
        },
        messages: {           
            password: {
                required: '請輸入8-18位，包含字母、符號、數字中的2種以上'
            },
            confirmPassword: {
                required: '請輸入確認密碼',
                equalTo: '密碼輸入不一致，請重新輸入'
            },          
        }
    })

    let reg = /.*[A-Z]+.*/  // 是否包含大寫字母
    let reg2 = /.*[a-z]+.*/  // 是否包含小寫字母
    let reg3 = /.*[0-9]+.*/ // 包含數字
    let reg4=/.*[\!\@\#\$\%\^\&\*\(\)\+\?\<\>\/\,\.]+.*/ // 包含特殊字符
    let pwdstrong = 0;
    let pwdLevel = 0;  

    //密碼強度驗證
    $('#password').on('keyup', function () {
        let val = $.trim(this.value)
        if (!val) {
            $('.pwd-strength span').removeClass('strength-green')
            // $('.strength-name').text('')
            return
        }

        if (reg.test(val)) {
            pwdstrong += 1;
        }
        if (reg2.test(val)) {
            pwdstrong += 1;
        }
        if (reg3.test(val)) {
            pwdstrong += 1;
        }
        if (reg4.test(val)) {
            pwdstrong += 1;
        }
        $('.pwd-strength span').removeClass('strength-green').filter(':lt(' + pwdstrong + ')').addClass('strength-green');
        // $('.strength-name').text(pwdstrong === 3 ? "強" : pwdstrong === 2 ? "中" : "弱");
        pwdLevel = pwdstrong;
        pwdstrong = 0;
    })

})