我們在填寫表單的時候，特別是輸入密碼的時候，經(jīng)常看到實時顯示密碼強度的效果，那么這種效果如何通過我們的原生js實現(xiàn)呢？

思路:

1.密碼通常是由數(shù)字，大寫字母，小寫字母以及特殊字符組成
2.密碼全部是純數(shù)字或者純大寫字母，或者純小寫字母，我們認為是密碼強度較低
3.密碼由兩種混合，我們認為密碼強度是中等的
4.密碼由三種或者四種混合，我們認為這樣的密碼組合強度很強
5.通過判斷輸入的密碼每個字符，如果是數(shù)字返回1；如果是大寫字母，返回2；如果是小寫字母，返回4；如果是特殊字符，則返回8（至于為什么選擇返返回這些數(shù)字請看第六條）；
6.初始化一個體現(xiàn)密碼強度的變量為0，在二進制下表示也就是0000，將他與我們的返回值進行二進制相或運算
7.比如初始值0000
與數(shù)字的返回值1（0001）相或運算，等于0001；
與一個小寫字母和大寫字母組成的密碼相或就是0110；
與大寫字母，小寫字母，數(shù)字組成的密碼相或就是0111；
與大寫字母，小寫字母，數(shù)字，特殊字符的密碼相或就是1111；
8.將相或結(jié)果賦值給這個初始值，通過判斷這個值在二進制下有多少個1，就能判斷對應(yīng)密碼強度（用0001與這個值做相并計算，同時做無符號右移運算，即可獲得1的個數(shù)）

以上就是我們的思路，那么我們就可以開始書寫我們的代碼

①創(chuàng)建一個函數(shù)，判斷輸入值的每一個字符由什么組成的

function charMode(char){
 switch (true) {
  case (char>=48&&char<=57):
   return 1;
   break;
  case (char>=65&&char<=90):
   return 2;
   break;
   case (char>=97&&char<=122):
   return 4;
   break;

  default:
   return 8;
   break;
 } 
}

這里也可以用if else 來做判斷，只是沒有switch看起來這么爽，同時這里注意，switch()括號里傳入的不是輸入值，而是一個true；因為case后面返回的是一個布爾值，判斷的是布爾值之間是否相等(switch做全等比較，不進行類型轉(zhuǎn)換)

②創(chuàng)建一個函數(shù)，用于判斷整個輸入串的密碼強度類型

function checkPsw(password){
 strengh=0;//定義一個全局變量用于檢測密碼強度
  for(var i=0;i<password.length;i++){   strengh|=charMode(password.charCodeAt(i));
 }
}

這里 |= 的意思是做相或運算，并賦值

③創(chuàng)建一個函數(shù)，計算密碼強度

function charStrengh(strengh){
 var reference=0;
 for(var i=0;i<4;i++){
  if(strengh&1){
   reference++;
  }
  strengh>>>=1;//無符號右移一位繼續(xù)匹配
 }
 return reference;
}

這里&1意思是與1（0001）做且運算，>>>=的意思是做無符號右移，比如0101無符號右移就是0010；再做一次無符號右移就是0001；

最后我們通過判斷reference的數(shù)字就可以知道密碼強度了，
再參考上一節(jié)的博客日志，實時驗證輸入內(nèi)容，通過樣式設(shè)置就可以達到密碼強度實時驗證效果了

總結(jié):

在這里我們是通過判斷鍵碼來實現(xiàn)判斷到底是數(shù)字還是大寫字母還是小寫字母，其實我們還可以使用強大的正則表達式來實現(xiàn)；
常用鍵碼：
數(shù)字48-57
大寫字母65-90
小寫字母97-122

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論