js密码强度验证

最新推荐文章于 2023-05-26 15:03:33 发布

转载最新推荐文章于 2023-05-26 15:03:33 发布 · 602 阅读

文章标签：

#javascript #密码

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

源码:

//=================HTML页面=================

01<body onload="InitCss();">

02    <form>

03    <div>

04        <table>

05            <tr>

06                <td>

07                    密码:

08                </td>

09                <td>

10                    <input id="txtPassword" type="password" style="width:
 130px;" maxlength="16"onfocus="InitCss();"

11                        onblur="ValidateInput('password',this.value)" onkeydown="validatePwdStrong(this.value);" />

12                </td>

13                <td>

14                    <div id="tipPosition">

15                    </div>

16                </td>

17            </tr>

18            <tr>

19                <td>

20                </td>

21                <td>

22                    <table id="pwdStrong_color">

23                        <tr>

24                            <td id="pwdStrong_1">

25                            </td>

26                            <td id="pwdStrong_2">

27                            </td>

28                            <td id="pwdStrong_3">

29                            </td>

30                            <td id="pwdStrong_4">

31                            </td>

32                        </tr>

33                    </table>

34                </td>

35                <td>

36                    <div id="pwdStrong_text">

37                    </div>

38                </td>

39            </tr>

40        </table>

41    </div>

42    </form>

43</body>

//=================JS文件=================

01//使用$替换document.getElementById函数

02var $ = function(v)
 { return document.getElementById(v); }

03  

04/******************************************************验证用户输入******************************************************/

05function ValidateInput(element, value) {

06    //验证密码

07    if (element == "password")
 {

08        if (value.toString().length < 6) {

09            $('tipPosition').className = 'error';

10            $('tipPosition').innerHTML = "密码设置错误。密码长度过小。";

11            return;

12        }

13        else {

14            $('tipPosition').className = 'success';

15            $('tipPosition').innerHTML = "填写正确。";

16        }

17    }

18}

19/*================================密码验证JS =========== Begin=======================================*/

20//密码初始化的样式

21function InitCss() {

22    $('tipPosition').className = 'tip';

23    $('tipPosition').innerHTML = "最小长度:6。
 最大长度:16。";

24}

25  

26/*================================密码强度 ===========Begin=======================================*/

27  

28function Evaluate(word) {

29    return word.replace(/^(?:([a-z])|([A-Z])|([0-9])|(.)){5,}|(.)+$/g, "$1$2$3$4$5").length;

30}

31  

32function validatePwdStrong(value) {

33    var pwd = {

34        color: ['#E6EAED', '#AC0035', '#FFCC33', '#639BCC', '#246626'],

35        text: ['太短', '弱', '一般', '很好', '极佳']

36    };

37    function colorInit() {

38        $('pwdStrong_1').style.backgroundColor = pwd.color[0];

39        $('pwdStrong_2').style.backgroundColor = pwd.color[0];

40        $('pwdStrong_3').style.backgroundColor = pwd.color[0];

41        $('pwdStrong_4').style.backgroundColor = pwd.color[0];

42    }

43    if (Evaluate(value) == 1) {

44        colorInit();

45        $('pwdStrong_1').style.backgroundColor = pwd.color[1];

46        $('pwdStrong_text').innerHTML = pwd.text[1];

47        $('pwdStrong_text').style.color = pwd.color[1];

48    }

49    else if (Evaluate(value)
 == 2) {

50        colorInit();

51        $('pwdStrong_1').style.backgroundColor = pwd.color[2];

52        $('pwdStrong_2').style.backgroundColor = pwd.color[2];

53        $('pwdStrong_text').innerHTML = pwd.text[2];

54        $('pwdStrong_text').style.color = pwd.color[2];

55    }

56    else if (Evaluate(value)
 == 3) {

57        colorInit();

58        $('pwdStrong_1').style.backgroundColor = pwd.color[3];

59        $('pwdStrong_2').style.backgroundColor = pwd.color[3];

60        $('pwdStrong_3').style.backgroundColor = pwd.color[3];

61        $('pwdStrong_text').innerHTML = pwd.text[3];

62        $('pwdStrong_text').style.color = pwd.color[3];

63    }

64    else if (Evaluate(value)
 == 4) {

65        $('pwdStrong_1').style.backgroundColor = pwd.color[4];

66        $('pwdStrong_2').style.backgroundColor = pwd.color[4];

67        $('pwdStrong_3').style.backgroundColor = pwd.color[4];

68        $('pwdStrong_4').style.backgroundColor = pwd.color[4];

69        $('pwdStrong_text').innerHTML = pwd.text[4];

70        $('pwdStrong_text').style.color = pwd.color[4];

71    }

72}

//=================CSS文件=================

01body

02{

03    font: 13px 宋体;

04}

05/*密码验证提示CSS  --------------------------------开始--------------------------------*/

06#tipPosition

07{

08    width: 400px;

09    height: 16px;

10    line-height: 18px;

11    padding: 2px 30px;

12}

13.tip

14{

15    background: #E6F2FF url(images/register_tip.png) no-repeat 10px center;

16    border: 1px #0E5863 dashed;

17    color: #0E5863;

18}

19.error

20{

21    background: #FBECDF url(images/register_error.png) no-repeat 10px center;

22    border: 1px Red dashed;

23    color: #6D3737;

24}

25.success

26{

27    background: #D6FCD2 url(images/register_success.png) no-repeat 10px center;

28    border: 1px #2F5D36 dashed;

29    color: #3D934A;

30}

31/*密码强度CSS  --------------------------------开始--------------------------------*/

32#pwdStrong_color

33{

34    width: 136px;

35    height: 3px;

36    border: 0px;

37    border-collapse: collapse;

38    border-spacing: 0;

39    background: #E6EAED;

40    margin-top: 5px;

41}

42#pwdStrong_color td

43{

44    padding: 0px;

45    width: 44px; /*如不加td宽度,Google的Chrome不会正常显示*/

46}

47#pwdStrong_text

48{

49    font: 12px 宋体;

50}