改善用戶體驗制作實用密碼強度提示

功能說明在用戶注冊或更改密碼時根據用戶輸入進行檢測並返回結果能有效地提醒用戶提高帳號的安全性

　　改善用戶體驗制作實用密碼強度提示

　　類似效果中的修改密碼功能

　　改善用戶體驗制作實用密碼強度提示

　　運行代碼框

　　簡單預覽

　　<html>
<head>
<meta httpequiv=ContentType content=text/html; charset=utf />
<title>密碼</title>
<style type=text/css>
body{
fontsize:px;
fontfamily: Arial Helvetica sansserif;
margin:;
}
form{
margin:em;
}
#chkResult{marginleft:px;height:px;}
</style>
</head>

　　<body>
<form name=form>
<label for=pwd>用戶密碼</label>
<input type=password name=pwd onblur=chkpwd(this) />
<div id=chkResult></div>
<label for=pwd>重復密碼</label>
<input type=password name=pwd />
</form>
<script type=text/javascript>
function chkpwd(obj){
  var t=objvalue;
  var id=getResult(t);

　　//定義對應的消息提示
  var msg=new Array();
  msg[]=密碼過短;
  msg[]=密碼強度差;
  msg[]=密碼強度良好;
  msg[]=密碼強度高;

  var sty=new Array();
  sty[]=;
  sty[]=;
  sty[]=;
  sty[]=;

  var col=new Array();
  col[]=gray;
  col[]=red;
  col[]=#ff;
  col[]=Green;

  //設置顯示效果
  var bImg=_//gif;//一張顯示用的圖片
  var sWidth=;
  var sHeight=;
  var Bobj=documentgetElementById(chkResult);

　　BobjstylefontSize=px;
  lor=col[id];
  Bobjstylewidth=sWidth + px;
  Bobjstyleheight=sHeight + px;
  BobjstylelineHeight=sHeight + px;
  Bobjstylebackground=url( + bImg + ) norepeat left + sty[id] + px;
  BobjstyletextIndent=px;
  BobjinnerHTML=檢測提示 + msg[id];
}

//定義檢測函數返回///分別代表無效/差/一般/強
function getResult(s){
  if(slength < ){
   return ;
  }
  var ls = ;
  if (smatch(/[az]/ig)){
   ls++;
  }
  if (smatch(/[]/ig)){
   ls++;
  }
if (smatch(/([^az])/ig)){
   ls++;
  }
  if (slength < && ls > ){
   ls;
  }
  return ls
}
</script>
</body>

　　</html>

　　使用方法

　　第一步保存圖片改善用戶體驗制作實用密碼強度提示

　　第二步根據您的需要修改js文件中該圖片地址如下所示

var bImg=pwdlengif;//一張顯示用的圖片

　　第三步在需要檢測的頁面中引用這個腳本文件如下所示

　　第四步在網頁的表單中找到密碼輸入框添加onblur事件驅動然後添加一個Div如下所示

　　第五步根據您頁面的需要通過樣式表CSS重新定義#chkResult的擺放位置以合適您網頁的整體布局

From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/25448.html