JavaScript密碼強度檢測原始碼

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

javascript|原始碼

1.Body代碼部分
<body>
<h4>密碼強度檢測</h4>
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
    <td width="100" align="right">強度顯示：</td>
    <td>
<script language="javascript">
var ps = new PasswordStrength();
ps.setSize("200","20");
ps.setMinLength(5);
</script>
</td>
</tr>
<tr>
    <td align="right">密碼檢測：</td>
    <td><input name="pwd" type="password" id="pwd" style="width:200px" onKeyUp="ps.update(this.value);"></td>
</tr>
</table>
</body>

2.JS代碼部分

//密碼強度;
function PasswordStrength(showed){
this.showed = (typeof(showed) == "boolean")?showed:true;
this.styles = new Array();
this.styles[0] = {backgroundColor:"#EBEBEB",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #BEBEBE",borderBottom:"solid 1px #BEBEBE"};
this.styles[1] = {backgroundColor:"#FF4545",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #BB2B2B",borderBottom:"solid 1px #BB2B2B"};
this.styles[2] = {backgroundColor:"#FFD35E",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #E9AE10",borderBottom:"solid 1px #E9AE10"};
this.styles[3] = {backgroundColor:"#95EB81",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #3BBC1B",borderBottom:"solid 1px #3BBC1B"};

this.labels= ["弱","中","強"];

this.divName = "pwd_div_"+Math.ceil(Math.random()*100000);
this.minLen = 5;

this.width = "150px";
this.height = "16px";

this.content = "";

this.selectedIndex = 0;

this.init();
}
PasswordStrength.prototype.init = function(){
var s = '<table cellpadding="0" id="'+this.divName+'_table" cellspacing="0" style="width:'+this.width+';height:'+this.height+';">';
s += '<tr>';
for(var i=0;i<3;i++){
s += '<td id="'+this.divName+'_td_'+i+'" width="33%" align="center"><span style="font-size:1px"> </span><span id="'+this.divName+'_label_'+i+'" style="display:none;font-family: Courier New, Courier, mono;font-size: 12px;color: #000000;">'+this.labels[i]+'</span></td>';
}
s += '</tr>';
s += '</table>';
this.content = s;
if(this.showed){
document.write(s);
this.copyToStyle(this.selectedIndex);
}
}
PasswordStrength.prototype.copyToObject = function(o1,o2){
for(var i in o1){
o2[i] = o1[i];
}
}
PasswordStrength.prototype.copyToStyle = function(id){
this.selectedIndex = id;
for(var i=0;i<3;i++){
if(i == id-1){
   this.$(this.divName+"_label_"+i).style.display = "inline";
}else{
   this.$(this.divName+"_label_"+i).style.display = "none";
}
}
for(var i=0;i<id;i++){
this.copyToObject(this.styles[id],this.$(this.divName+"_td_"+i).style);
}
for(;i<3;i++){
this.copyToObject(this.styles[0],this.$(this.divName+"_td_"+i).style);
}
}
PasswordStrength.prototype.$ = function(s){
return document.getElementById(s);
}
PasswordStrength.prototype.setSize = function(w,h){
this.width = w;
this.height = h;
}
PasswordStrength.prototype.setMinLength = function(n){
if(isNaN(n)){
return ;
}
n = Number(n);
if(n>1){
this.minLength = n;
}
}
PasswordStrength.prototype.setStyles = function(){
if(arguments.length == 0){
return ;
}
for(var i=0;i<arguments.length && i < 4;i++){
this.styles[i] = arguments[i];
}
this.copyToStyle(this.selectedIndex);
}
PasswordStrength.prototype.write = function(s){
if(this.showed){
return ;
}
var n = (s == 'string') ? this.$(s) : s;
if(typeof(n) != "object"){
return ;
}
n.innerHTML = this.content;
this.copyToStyle(this.selectedIndex);
}
PasswordStrength.prototype.update = function(s){
if(s.length < this.minLen){
this.copyToStyle(0);
return;
}
var ls = -1;
if (s.match(/[a-z]/ig)){
ls++;
}
if (s.match(/[0-9]/ig)){
ls++;
}
if (s.match(/(.[^a-z0-9])/ig)){
ls++;
}
if (s.length < 6 && ls > 0){
ls--;
}
switch(ls) {
   case 0:
    this.copyToStyle(1);
    break;
   case 1:
    this.copyToStyle(2);
    break;
   case 2:
    this.copyToStyle(3);
    break;
   default:
    this.copyToStyle(0);
}
}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More