您好,登錄后才能下訂單哦!
使用JavaScript怎么檢測四級密碼強度?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
具體如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 密碼強度檢測 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> input{float: left; font-size: 14px; width: 250px; height: 25px; border: 1px solid #ccc; padding-left: 10px;} #tips{float: left; font-size: 12px; width: 400px; height: 25px; margin: 4px 0 0 20px;} #tips span{float: left; width: 40px; height: 20px; color: #fff; overflow:hidden; margin-right: 10px; background: #D7D9DD; line-height:20px; text-align: center; } #tips .s1{background: #F45A68;}/*紅色*/ #tips .s2{background: #fc0;}/*橙色*/ #tips .s3{background: #cc0;}/*黃色*/ #tips .s4{background: #14B12F;}/*綠色*/ </style> </head> <body> <input type="text" id="password" value="" maxlength="16" /> <div id="tips"> <span>弱</span> <span>中</span> <span>強</span> <span>很強</span> </div> </body> <script type="text/javascript"> var password = document.getElementById("password"); //獲取文本框的對象 //var value = password.value; //獲取用戶在文本框里面填寫的值 //獲取所有的span標簽 返回值是一個數(shù)組 var spanDoms = document.getElementsByTagName("span"); password.onkeyup = function(){ //獲取用戶輸入的密碼,然后判斷其強度 返回0 或者 1 2 3 4 var index = checkPassWord(this.value); for(var i = 0; i <spanDoms.length; i++){ spanDoms[i].className = "";//清空span標簽所有的class樣式 if(index){//0 代表false 其余代表true spanDoms[index-1].className = "s" + index ; } } } //校驗密碼強度 function checkPassWord(value){ // 0: 表示第一個級別 1:表示第二個級別 2:表示第三個級別 // 3: 表示第四個級別 4:表示第五個級別 var modes = 0; if(value.length < 6){//最初級別 return modes; } if(/\d/.test(value)){//如果用戶輸入的密碼 包含了數(shù)字 modes++; } if(/[a-z]/.test(value)){//如果用戶輸入的密碼 包含了小寫的a到z modes++; } if(/[A-Z]/.test(value)){//如果用戶輸入的密碼 包含了大寫的A到Z modes++; } if(/\W/.test(value)){//如果是非數(shù)字 字母 下劃線 modes++; } switch(modes){ case 1 : return 1; break; case 2 : return 2; break; case 3 : return 3; break; case 4 : return 4; break; } } </script> </html>
說明: 這里實現(xiàn)的功能主要是,輸入密碼的時候,一邊輸一邊檢測,有四個安全級別,當輸入的密碼符合某個級別的規(guī)則時,該級別的標志條就會高亮變色。
下面是測試的情況,(這里為了能看到效果,所以把type=“password”故意改成type=“text”),至于檢測中級別的規(guī)則,讀者可以自己根據(jù)需要自行修改,主要是js正則表達式的修改。另外,當把最后一個圖片的輸入內容,逐步地刪除,直到只剩第一個圖片的輸入內容,這一過程中,效果就是下面的 從下到上變化了
看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注億速云行業(yè)資訊頻道,感謝您對億速云的支持。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。