【js与jquery】注册会员时密码强度提示信息的制作

2019独角兽企业重金招聘Python工程师标准>>>

1.效果如图所示：

2.html代码：

[php] view plaincopy

1. <p><span>设置密码：</span><input type="password" id="external_regist_password1" name="password1" value="" /><b>*</b>  

2. <span id="password1_bg" class="bg_rt" style="display:none"></span>  

3. </p>  

4. <p class="mima_qd" id="password1_strength" style="display:none">  

5.  <span class="mm_strength"><em>密码强度</em>  

6.      <i class="password_qd">  

7.         <span class="password_bg" id="strength_L"></span>  

8.         <span class="password_bg" id="strength_M"></span>  

9.         <span class="password_bg" id="strength_H"></span>  

10.      </i>  

11.     <em id="pw_check_info"></em>  

12. </span>  

13. </p>        

14. <p class="tishi_wr" id="password1_info"></p>  

3.jquery代码：

[php] view plaincopy

1. //checkStrong函数     

2. //返回密码的强度级别     

3.      

4. function checkStrong(sPW){     

5.     if (sPW.length<=4)     

6.         return 0; //密码太短     

7.         var Modes=0;     

8.     for (i=0;i<sPW.length;i++){     

9.         //测试每一个字符的类别并统计一共有多少种模式.     

10.         //charCodeAt():返回unicode编码的值  

11.         Modes|=CharMode(sPW.charCodeAt(i));  //测试某个字符属于哪一类   

12.     }     

13.     return bitTotal(Modes);//计算出当前密码当中一共有多少种模式      

14. }     

15.   

16.  //CharMode函数     

17.  //测试某个字符是属于哪一类.     

18. function CharMode(iN){     

19.     if (iN>=48 && iN <=57) //数字     

20.         return 1;     

21.     if (iN>=65 && iN <=90) //大写字母     

22.         return 2;     

23.     if (iN>=97 && iN <=122) //小写     

24.         return 4;     

25.     else     

26.         return 8; //特殊字符     

27. }     

28.   

29. //bitTotal函数     

30. //计算出当前密码当中一共有多少种模式     

31. function bitTotal(num){     

32.     var modes=0;     

33.     for (i=0;i<4;i++){     

34.         if (num & 1) modes++;     

35.         num>>>=1;     

36.     }     

37.     return modes;     

38. }     

39.   

40. //pwStrength函数     

41. //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色     

42. function pwStrength(pwd){     

43.     var O_color="#eeeeee";     

44.     var L_color="#FF4040";     

45.     var M_color="#FF9900";     

46.     var H_color="#33CC00";  

47.     var info = "";  

48.     if (pwd==null||pwd==''){     

49.         Lcolor=Mcolor=Hcolor=O_color;     

50.     }  else {     

51.         S_level=checkStrong(pwd);//检测密码的强度  

52.         switch(S_level) {     

53.              case 0:     

54.                  Lcolor=L_color;     

55.                  Mcolor=Hcolor=O_color;   

56.                  info = "弱";  

57.                  break;  

58.              case 1:     

59.                  Lcolor=L_color;     

60.                  Mcolor=Hcolor=O_color;   

61.                  info = "弱";  

62.                  break;     

63.              case 2:     

64.                  Lcolor=Mcolor=M_color;     

65.                  Hcolor=O_color;   

66.                  info = "中";  

67.                  break;     

68.              default:     

69.                  Lcolor=Mcolor=Hcolor=H_color;     

70.                  info = "强";  

71.              }     

72.          }      

73.      $("#strength_L").css("background", Lcolor);  

74.      $("#strength_M").css("background", Mcolor);  

75.      $("#strength_H").css("background", Hcolor);  

76.      $("#pw_check_info").html(info);//密码强度提示信息  

77.      return;     

78.  } 

转载于:https://my.oschina.net/yonghan/blog/524055