DOM案例【3】密碼強度檢查案例
阿新 • • 發佈：2018-01-14
eight order doc .org 註冊 毫秒 log switch pre
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>註冊頁面</title> <style type="text/css"> #table td{ width:40px; height:19px; background-color:#F3F3F3; border:1px solid #D0D0D0; color:#BBBBBB; line-height:9px; } </style> </head> <body> <form> <label for="password">密碼：</label> <inputid="password" type="password" name="password" /> <table id="table" border="0" cellpadding="0" cellspacing="0" style="display: inline-table;"> <tr align="center"> <td id="td1">弱</td> <td id="td2">中</td> <td id="td3">強</td> </tr> </table> </form> </body> </html> <script type="text/javascript"> /* 密碼強度規則: 弱:強度為1,密碼長度小於6個就是弱 中:強度為2，除了弱和強之外都屬於中 強:強度為3,密碼長度大於或者等於8個,並且包含數字、小寫字母和大寫字母 */ //什麽時候檢查密碼的強度 //聲明一個函數專門檢查密碼的強度 function checkPassword(value){ if(!value){ return 1; } if(value.length<6){ return 1; } if(value.length>=8 && value.match(/[0-9]/) && value.match(/[a-z]/) && value.match(/[A-Z]/) ){ return 3; } return 2; } //1 創建一個定時器，每個100毫秒檢查一下密碼的強度 setInterval(function(){ var passwordElement = document.getElementById("password"); var passwordLevel = checkPassword(passwordElement.value); //2 如果檢查結果是弱，就改變弱單元格的背景色... switch (passwordLevel){ case 1:{ document.getElementById("td1").style.backgroundColor="#ff8040"; document.getElementById("td2").style.backgroundColor=null; document.getElementById("td3").style.backgroundColor=null; break; } case 2:{ document.getElementById("td1").style.backgroundColor="#ffff6f"; document.getElementById("td2").style.backgroundColor="#ffff6f"; document.getElementById("td3").style.backgroundColor=null; break; } case 3:{ document.getElementById("td1").style.backgroundColor="#a8ff24"; document.getElementById("td2").style.backgroundColor="#a8ff24"; document.getElementById("td3").style.backgroundColor="#a8ff24"; break; } } },100); </script>
DOM案例【3】密碼強度檢查案例