密码强度实时验证 【js读书笔记】 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>密码强度实时验证</title>
 6     </head>
 7     <body>
 8         <h2>密码强度实时验证</h2>
 9         <input id="pswStrength" data-hint="请输入密码" type="password" />
10         <span id="showStrength"></span>
11     </body>
12     <script type="text/javascript">
13         window.onload=function(){
14             //设置样式
15             function setCss(_this,cssOption){
16                 /*判断节点类型*/
17                 if(!_this||_this.nodeType===3||_this.nodeType===8||!_this.style){
18                     return;
19                 }
20                 for(var cs in cssOption){//遍历节点属性
21                     _this.style[cs]=cssOption[cs];
22                 }
23                 return _this;
24             }
25             /*去除字符串左右两边的空格*/
26             function trim(chars){
27                 return(chars||"").replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g,"");
28             }
29             /*验证密码强度*/
30             function passwordStrength(pswS,showS){
31                 var self=this;
32                 /*字符权重：
33                  数字1，字母2，其他字符3
34                  当密码长度小于6时，不符合标准；
35                  长度>=6,<=10 强度【弱】；长度>=6,>=10,<15 强度【中】；长度>=6,>=15 强度【强】*/
36                 pswS.onkeyup=function(){//键盘按键被松开时发生
37                     var _color=["red","yellow","orange","green"],
38                         _msgs=["密码太短","弱","中","强"],
39                         _strength=0,
40                         _v=trim(pswS.value),//去掉密码前后空格
41                         _vL=_v.length,//输入字符长度
42                         i=0;
43                     var charStrength=function(char){//计算单个字符强度
44                         if(char>=48&&char<=57){//数字
45                             return 1;
46                         }else if(char>=97&&char<=122){//字母
47                             return 2;
48                         }else{//其他特殊字符
49                             return 3;
50                         }
51                     }
52                     //计算模式
53                     if(_vL<6){//如果长度小于6，不符合密码标准
54                         showS.innerText=_msgs[0];
55                         setCss(showS,{
56                             "color":_color[0] //设置字体红色
57                         });
58                     }else{//如果长度大于6，继续判断密码强度
59                         for(;i<_vL;i++){//遍历字符
60                             //调用charStrength 计算单个字符强度
61                             _strength+=charStrength(_v.toLocaleLowerCase().charCodeAt(i));
62                         }
63                         if(_strength<10){//小于10 强度弱，字体黄色
64                             showS.innerText=_msgs[1];
65                             setCss(showS,{
66                                 "color":_color[1]
67                             });
68                         }else if(_strength>=10&&_strength<15){//大于10且小于15 强度中，字体橘色
69                             showS.innerText=_msgs[2];
70                             setCss(showS,{
71                                 "color":_color[2]
72                             });
73                         }else if(_strength>=15){//大于15 强度强，字体绿色
74                             showS.innerText=_msgs[3];
75                             setCss(showS,{
76                                 "color":_color[3]
77                             });
78                         }
79                     }
80                 }
81             }
82             /*调用强度验证passwordStrength方法*/
83             passwordStrength(
84                 document.getElementById("pswStrength"),
85                 document.getElementById("showStrength"));
86         }
87     
88         
89     </script>
90 </html>

 

posted @ 2016-04-27 17:18  HollyLearningNotes  阅读(247)  评论(0)  编辑  收藏  举报