小虎博客

A-A+

javascript 密码强度验证程序代码

2016年10月16日 编程技术 暂无评论

我们会在很多网站注册时会提示你密码强度，那么密码强度是怎么实现的呢？下面我来给各位同学介绍js中 密码强度验证程序有需要了解的朋友可参考。

我们先来看强度规则:

1) 任何少于6个字符的组合，弱；任何字符数的同类字符组合，弱；

2) 任何字符数的两类字符组合,中；

3) 12位字符数以下的三类或四类字符组合,强；

4) 12位字符数以上的三类或四类字符组合,非常好,代码如下:

  1. <head>     
  2. <title>密码强度检测</title>     
  3. <style type="text/css">         
  4. body { font: 12px/1.5 Arial; }         
  5. input{  float: left;font-size: 12px; width: 150px;font-family: arial; border: 1px solid #ccc; padding: 3px;}         
  6. input.correct{ border: 1px solid green; }         
  7. input.error{border: 1px solid red;}         
  8. #tips{float: left; margin: 2px 0 0 20px; }         
  9. #tips span {float: left;  width: 50px; height: 20px; color: #fff;overflow: hidden;background: #ccc;margin-right: 2px;line-height: 20px; text-align: center;}         
  10. #tips.s1 .active { background: #f30; }         
  11. #tips.s2 .active {background: #fc0; }         
  12. #tips.s3 .active {background: #cc0;}         
  13. #tips.s4 .active  {background: #090; }     
  14. </style>     
  15. <script type="text/javascript">         
  16. window.onload = function () {             
  17. var oTips = document.getElementById("tips");             
  18. var oInput = document.getElementsByTagName("input")[0];             
  19. var aSpan = oTips.getElementsByTagName("span");             
  20. var aStr = ["弱", "中", "强", "非常好"];             
  21. var i = 0;  
  22. oInputoInput.onkeyup = oInput.onfocus = oInput.onblur = function () {                 
  23. var index = checkStrong(this.value);                 
  24. this.className = index ? "correct" : "error";                 
  25. oTips.className = "s" + index;                 
  26. for (i = 0; i < aSpan.length; i++) aSpan[i].className = aSpan[i].innerHTML = "";                 
  27. index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1])             }         };         
  28. //xiaohuboke.com  
  29. //检测密码强度         
  30. function checkStrong(sValue) {             
  31. var modes = 0;             
  32. if (sValue.length < 6) return modes;             
  33. if (/d/.test(sValue)) modes++; //数字             
  34. if (/[a-z]/.test(sValue)) modes++; //小写             
  35. if (/[A-Z]/.test(sValue)) modes++; //大写              
  36. if (/W/.test(sValue)) modes++; //特殊字符             
  37. switch (modes) {                 
  38. case 1:                     
  39. return 1;                     
  40. break;                 
  41. case 2:                     
  42. return 2;                 
  43. case 3:                 
  44. case 4:                     
  45. return sValue.length < 12 ? 3 : 4                     
  46. break;             }         }     
  47. </script>  
  48. </head>  
  49. <body>     
  50. <input type="password" value="" maxlength="16" />     <div id="tips">         
  51. <span></span><span></span><span></span><span></span>     
  52. </div>  
  53. </body>  
标签：

给我留言