注册或修改密码实时显示密码强度，有利于提高用户体验，降低账户安全风险，主要利用js正则匹配，修改强度元素的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//强度计算 if else里面的css自行调整
$('input[name=new_password]').keyup(function () {
    var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
    var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
    var enoughRegex = new RegExp("(?=.{6,}).*", "g");

    $(".safe-level").show();
    if (false == enoughRegex.test($(this).val())) {

        $(".safe-level span").removeClass("level").eq(1).text("弱");
        $(".safe-level span").eq(0).addClass("level");
        //默认灰色
        //密码小于六位的时候，密码强度图片都为灰色 
    }
    else if (strongRegex.test($(this).val())) {
        $(".safe-level span").eq(1).text("强");
        $(".safe-level span").addClass("level");
        //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强 
    }
    else if (mediumRegex.test($(this).val())) {
        $(".safe-level span").eq(1).addClass("level").text("中");
        $(".safe-level span").eq(0).addClass("level");
        $(".safe-level span").eq(2).removeClass("level");
        //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等 
    }
    else {
        $(".safe-level span").removeClass("level").eq(1).text("弱");
        $(".safe-level span").eq(0).addClass("level");
        //如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的 
    }
    return true;
});