計算機專業畢業設計:密碼強度動態判斷
引言天使將會展現網站編程最真實的一面,包括編程中遇到的一些錯誤指令的處理,網站調試過程,排查代碼錯誤等。通過本系列經驗,相信你在.net網站開發方面會有一個很大的提升。同時也希望小伙伴們喜歡天使的經驗
引言
天使將會展現網站編程最真實的一面,包括編程中遇到的一些錯誤指令的處理,網站調試過程,排查代碼錯誤等。通過本系列經驗,相信你在.net網站開發方面會有一個很大的提升。同時也希望小伙伴們喜歡天使的經驗,把我的經驗分享給更多需要幫助的人。后面功能模塊比較深入,大家不懂的可以先看看前面的經驗。
修改用戶密碼保護賬號安全
在會員個人中心界面,我們可以修改用戶密碼,為了保護個人賬號的安全,我們引導用戶設置強密碼。為了方便使用正則表達式,我們采用input控件,并將它轉化為客戶端控件,然后用div標簽顯示用戶密碼強度判斷結果。我們可以保存用于顯示密碼強度的圖片。
樣式代碼
在head標記之間,寫樣式代碼。如下所示:
```
body {
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
margin:0;
}
form {
margin:2em;
}
#chkResult {
margin-left:53px;
height:15px;
}
```
密碼強度判斷函數
我們使用JavaScript編寫密碼強度判斷函數。如下所示:
```
function chkpwd(obj) {
var t ;
var id getResult(t);
//定義對應的消息提示
var msg new Array(4);
msg[0] "密碼過短。";
msg[1] "密碼強度差。";
msg[2] "密碼強度良好。";
msg[3] "密碼強度高。";
var sty new Array(4);
sty[0] -45;
sty[1] -30;
sty[2] -15;
sty[3] 0;
var col new Array(4);
col[0] "gray";
col[1] "red";
col[2] "#ff6600";
col[3] "Green";
//設置顯示效果
var bImg ""; //一張顯示用的圖片
var sWidth 300;
var sHeight 15;
var Bobj ("chkResult");
"12px";
col[id];
sWidth "px";
sHeight "px";
sHeight "px";
"url(" bImg ") no-repeat left " sty[id] "px";
"20px";
"檢測提示:" msg[id];
}
//定義檢測函數,返回0/1/2/3分別代表無效/差/一般/強
function getResult(s) {
if (s.length < 4) {
return 0;
}
var ls 0;
if ((/[a-z]/ig)){
ls ;
}
if ((/[0-9]/ig)){
ls ;
}
if ((/([^a-z0-9])/ig)){
ls ;
}
if (s.length < 6 ls > 0){
ls--;
}
return ls;
}
```
密碼強度顯示
保存,單獨運行該界面,輸入新密碼,隨著密碼位數和復雜度的增加,會顯示相應的密碼強度顏色。