原生js實(shí)現(xiàn)密碼強(qiáng)度驗(yàn)證功能
我們?cè)谔顚懕韱蔚臅r(shí)候,特別是輸入密碼的時(shí)候,經(jīng)??吹綄?shí)時(shí)顯示密碼強(qiáng)度的效果,那么這種效果如何通過我們的原生js實(shí)現(xiàn)呢?
思路:
1.密碼通常是由數(shù)字,大寫字母,小寫字母以及特殊字符組成
2.密碼全部是純數(shù)字或者純大寫字母,或者純小寫字母,我們認(rèn)為是密碼強(qiáng)度較低
3.密碼由兩種混合,我們認(rèn)為密碼強(qiáng)度是中等的
4.密碼由三種或者四種混合,我們認(rèn)為這樣的密碼組合強(qiáng)度很強(qiáng)
5.通過判斷輸入的密碼每個(gè)字符,如果是數(shù)字返回1;如果是大寫字母,返回2;如果是小寫字母,返回4;如果是特殊字符,則返回8(至于為什么選擇返返回這些數(shù)字請(qǐng)看第六條);
6.初始化一個(gè)體現(xiàn)密碼強(qiáng)度的變量為0,在二進(jìn)制下表示也就是0000,將他與我們的返回值進(jìn)行二進(jìn)制相或運(yùn)算
7.比如初始值0000
與數(shù)字的返回值1(0001)相或運(yùn)算,等于0001;
與一個(gè)小寫字母和大寫字母組成的密碼相或就是0110;
與大寫字母,小寫字母,數(shù)字組成的密碼相或就是0111;
與大寫字母,小寫字母,數(shù)字,特殊字符的密碼相或就是1111;
8.將相或結(jié)果賦值給這個(gè)初始值,通過判斷這個(gè)值在二進(jìn)制下有多少個(gè)1,就能判斷對(duì)應(yīng)密碼強(qiáng)度(用0001與這個(gè)值做相并計(jì)算,同時(shí)做無符號(hào)右移運(yùn)算,即可獲得1的個(gè)數(shù))
以上就是我們的思路,那么我們就可以開始書寫我們的代碼
①創(chuàng)建一個(gè)函數(shù),判斷輸入值的每一個(gè)字符由什么組成的
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看起來這么爽,同時(shí)這里注意,switch()括號(hào)里傳入的不是輸入值,而是一個(gè)true;因?yàn)閏ase后面返回的是一個(gè)布爾值,判斷的是布爾值之間是否相等(switch做全等比較,不進(jìn)行類型轉(zhuǎn)換)
②創(chuàng)建一個(gè)函數(shù),用于判斷整個(gè)輸入串的密碼強(qiáng)度類型
function checkPsw(password){
strengh=0;//定義一個(gè)全局變量用于檢測密碼強(qiáng)度
for(var i=0;i<password.length;i++){ strengh|=charMode(password.charCodeAt(i));
}
}
這里 |= 的意思是做相或運(yùn)算,并賦值
③創(chuàng)建一個(gè)函數(shù),計(jì)算密碼強(qiáng)度
function charStrengh(strengh){
var reference=0;
for(var i=0;i<4;i++){
if(strengh&1){
reference++;
}
strengh>>>=1;//無符號(hào)右移一位繼續(xù)匹配
}
return reference;
}
這里&1意思是與1(0001)做且運(yùn)算,>>>=的意思是做無符號(hào)右移,比如0101無符號(hào)右移就是0010;再做一次無符號(hào)右移就是0001;
最后我們通過判斷reference的數(shù)字就可以知道密碼強(qiáng)度了,
再參考上一節(jié)的博客日志,實(shí)時(shí)驗(yàn)證輸入內(nèi)容,通過樣式設(shè)置就可以達(dá)到密碼強(qiáng)度實(shí)時(shí)驗(yàn)證效果了
總結(jié):
在這里我們是通過判斷鍵碼來實(shí)現(xiàn)判斷到底是數(shù)字還是大寫字母還是小寫字母,其實(shí)我們還可以使用強(qiáng)大的正則表達(dá)式來實(shí)現(xiàn);
常用鍵碼:
數(shù)字48-57
大寫字母65-90
小寫字母97-122
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS 密碼強(qiáng)度驗(yàn)證(兼容IE,火狐,谷歌)
- javaScript 簡單驗(yàn)證代碼(用戶名,密碼,郵箱)
- javascript實(shí)現(xiàn)密碼驗(yàn)證
- Js密碼強(qiáng)度實(shí)時(shí)驗(yàn)證代碼
- js 驗(yàn)證密碼強(qiáng)弱的小例子
- AngularJs驗(yàn)證重復(fù)密碼的方法(兩種)
- js驗(yàn)證手機(jī)號(hào)、密碼、短信驗(yàn)證碼代碼工具類
- JS正則表達(dá)式驗(yàn)證密碼強(qiáng)度
- js如何驗(yàn)證密碼強(qiáng)度
- javascript實(shí)現(xiàn)前端input密碼輸入強(qiáng)度驗(yàn)證
相關(guān)文章
利用js正則表達(dá)式驗(yàn)證手機(jī)號(hào),email地址,郵政編碼
利用js正則表達(dá)式驗(yàn)證手機(jī)號(hào),email地址,郵政編碼。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-01-01
Js日期選擇自動(dòng)填充到輸入框(界面漂亮兼容火狐)
本文為大家寫了個(gè)很漂亮、兼容火狐的Js日期選擇,自動(dòng)填充到輸入框,代碼如下,有需要的朋友可以參考下2013-08-08
小程序中實(shí)現(xiàn)獲取全部數(shù)據(jù)的圖文教程
最近在開發(fā)中遇到了一個(gè)需求,需要獲取小程序的全部數(shù)據(jù),所以這篇文章主要給大家介紹了關(guān)于小程序中實(shí)現(xiàn)獲取全部數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-11-11
使用RN Animated做一個(gè)“添加購物車”動(dòng)畫的方法
這篇文章主要介紹了使用RN Animated做一個(gè)“添加購物車”動(dòng)畫的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
教你用wxml2canvas將微信小程序頁面轉(zhuǎn)為圖片
如果需要實(shí)現(xiàn)將小程序的頁面轉(zhuǎn)為圖片,第一步是要先把頁面轉(zhuǎn)為canvas,再將canvas轉(zhuǎn)為圖片,下面這篇文章主要給大家介紹了關(guān)于用wxml2canvas將微信小程序頁面轉(zhuǎn)為圖片的相關(guān)資料,需要的朋友可以參考下2022-11-11
typescript基本數(shù)據(jù)類型HTMLElement與Element區(qū)別
這篇文章主要為大家介紹了typescript基本數(shù)據(jù)類型HTMLElement與Element區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
談?wù)凧avaScript異步函數(shù)發(fā)展歷程
對(duì)大部分JavaScript開發(fā)者而言,async函數(shù)仍是新鮮事物,其發(fā)展經(jīng)歷了漫長的旅程。本文將梳理總結(jié)JavaScript異步函數(shù)的發(fā)展歷程,并表示未來async函數(shù)將成為實(shí)現(xiàn)異步的主要方式。2015-09-09

