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>