<font color="#FF0000">*</font>密碼：<input type="text" name="password" id="password" value="請(qǐng)輸入密碼" onfocus=" passwordClear()" onblur="pwdComplex(),passwordValidate()" onkeyup="pwdComplex()" /></td><td><font id="pwdTip">不少于6位字符</font><br/>

<div class="pwdStrongth"><span class="cinnerprogress" id="innerprogress"></span></div><font id="strongthTip"></font>

<style type="text/css">
/*用于修飾密碼強(qiáng)度條外邊框div*/
.pwdStrongth{
border:solid 1px #000000;
border-radius:5px;
height:15px;
width:150px;}
/*用于設(shè)置span標(biāo)簽的初始樣式*/
.cinnerprogress{ 
display: block;
height: 100%;
background-color:transparent;
border-radius: 5px;
width: 100%;
}
/*下面四個(gè)將用于設(shè)置span標(biāo)簽在不同密碼強(qiáng)度的樣式*/
.strengthLv1{ 
display: block;
height: 100%;
border-radius: 5px;
background:red;width:25%;}
.strengthLv2{
display: block;
height: 100%;
border-radius: 5px;
background:orange;width:50%;}
.strengthLv3{
display: block;
height: 100%;
border-radius: 5px;
background:#09F;width:75%;}
.strengthLv4{
display: block;
height: 100%;
border-radius: 5px;
background:green;width:100%;}
</style>

function pwdComplex()//用于判斷密碼強(qiáng)度的
{
var pwdobj=document.getElementById("password"); //獲取密碼輸入框?qū)ο?
var pwdTip=document.getElementById("pwdTip");//獲取密碼提示文字對(duì)象
var pwdprogress=document.getElementById("innerprogress"); //獲取span標(biāo)簽對(duì)象
var strongthTip=document.getElementById("strongthTip");//獲取密碼強(qiáng)度提示文字的對(duì)象
var regxs = new Array();//定義一個(gè)數(shù)組用于存放不同的正則表達(dá)式
regxs[0]=/[^a-zA-Z0-9_]/g;
regxs[1]=/[a-z]/g;
regxs[2]=/[0-9]/g;
regxs[3]=/[A-Z]/g;
var val = pwdobj.value;//獲取用戶(hù)輸入的密碼
var len = val.length;//獲取用戶(hù)輸入的密碼長(zhǎng)度
var sec = 0; //定義一個(gè)變量用于存放密碼強(qiáng)度
if (len >= 6) //用于判斷用戶(hù)輸入的密碼強(qiáng)度
{ // 至少六個(gè)字符
for (var i = 0; i < regxs.length; i++) //遍歷所有正則表達(dá)式，檢測(cè)用戶(hù)輸入的密碼符合哪些正則表達(dá)式，如果符合則強(qiáng)度+1
{
if (val.match(regxs[i])) 
{
sec++;
}
}
}
if(sec==0) //通過(guò)不同的密碼強(qiáng)度調(diào)用不同的樣式
{
strongthTip.innerText="";
//setAttribute("class", "className")中class是指改變class這個(gè)屬性，所以要帶引號(hào)，className是span標(biāo)簽的類(lèi)名，也是對(duì)應(yīng)的樣式名
pwdprogress.setAttribute("class","cinnerprogress");
}
else if(sec==1)
{
strongthTip.innerText="強(qiáng)度：弱";
strongthTip.style.color="red";
pwdprogress.setAttribute("class","strengthLv1");
}
else if(sec==2)
{
strongthTip.innerText="強(qiáng)度：中"; 
strongthTip.style.color="orange";
pwdprogress.setAttribute("class","strengthLv2");
}
else if(sec==3)
{
strongthTip.innerText="強(qiáng)度：強(qiáng)"; 
strongthTip.style.color="#09F";
pwdprogress.setAttribute("class","strengthLv3");
}
else if(sec==4)
{
strongthTip.innerText="強(qiáng)度：超強(qiáng)"; 
strongthTip.style.color="green";
pwdprogress.setAttribute("class","strengthLv4");
}
}