js實現的密碼強度提示效果
分享一個非常簡單的程式碼例項,它實現了簡單的密碼強度檢測效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin: 0; padding: 0; } #password { display: inline-block; padding: 5px 20px; border: 1px solid #c8c8c8; color: #333; } #password > p { font-size: 12px; color: #888; } .tips { display: inline-block; padding: 3px 8px; border: 1px solid #b9b8b8; margin-right: 10px; } </style> <script> function matchLevel(password) { if (password.length < 6) { return 0; } if (password.length >= 6 && password.length < 10) { return 1; } if (password.length >= 10 && password.length < 16) { return 2; } if (password.length >= 16) { return 3; } } window.onload = function() { tipColor = ['red', 'yellow', 'orange', 'green']; var tipEle = document.getElementsByClassName("tips"); document.getElementsByTagName("input")[0].onkeyup = function() { var level = matchLevel(this.value); if (this.value.length) { for (var i = 0, eleLen = tipEle.length; i < eleLen; i++) { if (i <= level) { tipEle[i].style.backgroundColor = tipColor[i]; } else { tipEle[i].style.backgroundColor = ''; } } } else { for (var i = 0, eleLen = tipEle.length; i < eleLen; i++) { tipEle[i].style.backgroundColor = ''; } } } } </script> </head> <body> <div id="password"> 密碼:<input type="password" /> <p> 密碼強度: <span class="tips" level="0"></span> <span class="tips" level="1"></span> <span class="tips" level="2"></span> <span class="tips" level="3"></span> </p> </div> </body> </html>
相關文章
- js實現的密碼強度提示程式碼JS密碼
- JavaScript 密碼強度提示效果JavaScript密碼
- JavaScript密碼強度提示JavaScript密碼
- 密碼輸入強度提示例項程式碼密碼
- js實現的加分後出現漸隱提示效果JS
- JavaScript密碼強度提醒JavaScript密碼
- js實現的文字框輸入內容自動提示效果程式碼JS
- 淺議密碼強度與密碼破解(2)密碼
- 密碼提示強弱的正規表示式密碼
- 密碼框提示文字效果程式碼例項密碼
- 密碼框輸入提示效果程式碼例項密碼
- input密碼輸入提示效果程式碼例項密碼
- 3種生成高強度密碼的方法密碼
- js結合progress標籤實現的進度條效果JS
- 用Abp實現找回密碼和密碼強制過期策略密碼
- JavaScript密碼強度等級詳解JavaScript密碼
- 點選實現顯示密碼效果程式碼例項密碼
- 相容所有瀏覽器的密碼框輸入提示效果瀏覽器密碼
- Linux 生成複雜密碼並且檢查密碼強度Linux密碼
- 基於規則評分的密碼強度檢測演算法分析及實現(JavaScript)密碼演算法JavaScript
- js實現打字效果JS
- MySQL如何啟用密碼強度審計MySql密碼
- 使用命令列生成高強度密碼命令列密碼
- 密碼強度的正規表示式(JavaScript)總結密碼JavaScript
- js實現文字框提示程式碼例項JS
- 實現密碼框預設文字效果例項程式碼密碼
- js實現的留言本效果程式碼例項JS
- js實現的div拖動效果例項程式碼JS
- js實現的元素抖動效果程式碼例項JS
- 密碼學術語以及nodejs實現密碼學NodeJS
- js實現的擷取指定長度字串程式碼JS字串
- js實現的垂直選項卡效果程式碼例項JS
- angularjs實現的購物車效果程式碼例項AngularJS
- js程式碼實現倒數計時秒殺的效果JS
- js實現刮刮樂抽獎效果程式碼例項JS
- 如何在 Linux 生成複雜密碼並且檢查密碼強度Linux密碼
- jquery模擬實現的連結title提示效果jQuery
- 評估使用者輸入密碼的強度(用Javascript)密碼JavaScript