大概样式:
源码:
//=================html页面=================
<body onload="initcss();">
<form>
<div>
<table>
<tr>
<td>
密码:
</td>
<td>
<input id="txtpassword" type="password" style="width: 130px;" maxlength="16" onfocus="initcss();"
onblur="validateinput('password',this.value)" onkeydown="validatepwdstrong(this.value);" />
</td>
<td>
<div id="tipposition">
</div>
</td>
</tr>
<tr>
<td>
</td>
<td>
<table id="pwdstrong_color">
<tr>
<td id="pwdstrong_1">
</td>
<td id="pwdstrong_2">
</td>
<td id="pwdstrong_3">
</td>
<td id="pwdstrong_4">
</td>
</tr>
</table>
</td>
<td>
<div id="pwdstrong_text">
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
js文件
//使用$替换document.getelementbyid函数
var $ = function(v) { return document.getelementbyid(v); }
/******************************************************验证用户输入******************************************************/
function validateinput(element, value) {
//验证密码
if (element == "password") {
if (value.tostring().length < 6) {
$('tipposition').classname = 'error';
$('tipposition').innerhtml = "密码设置错误。密码长度过小。";
return;
}
else {
$('tipposition').classname = 'success';
$('tipposition').innerhtml = "填写正确。";
}
}
}
/*================================密码验证js =========== begin=======================================*/
//密码初始化的样式
function initcss() {
$('tipposition').classname = 'tip';
$('tipposition').innerhtml = "最小长度:6。 最大长度:16。";
}
/*================================密码强度 ===========begin=======================================*/
function evaluate(word) {
return word.replace(/^(?:([a-z])|([a-z])|([0-9])|(.)){5,}|(.)+$/g, "$1$2$3$4$5").length;
}
function validatepwdstrong(value) {
var pwd = {
color: ['#e6eaed', '#ac0035', '#ffcc33', '#639bcc', '#246626'],
text: ['太短', '弱', '一般', '很好', '极佳']
};
function colorinit() {
$('pwdstrong_1').style.backgroundcolor = pwd.color[0];
$('pwdstrong_2').style.backgroundcolor = pwd.color[0];
$('pwdstrong_3').style.backgroundcolor = pwd.color[0];
$('pwdstrong_4').style.backgroundcolor = pwd.color[0];
}
if (evaluate(value) == 1) {
colorinit();
$('pwdstrong_1').style.backgroundcolor = pwd.color[1];
$('pwdstrong_text').innerhtml = pwd.text[1];
$('pwdstrong_text').style.color = pwd.color[1];
}
else if (evaluate(value) == 2) {
colorinit();
$('pwdstrong_1').style.backgroundcolor = pwd.color[2];
$('pwdstrong_2').style.backgroundcolor = pwd.color[2];
$('pwdstrong_text').innerhtml = pwd.text[2];
$('pwdstrong_text').style.color = pwd.color[2];
}
else if (evaluate(value) == 3) {
colorinit();
$('pwdstrong_1').style.backgroundcolor = pwd.color[3];
$('pwdstrong_2').style.backgroundcolor = pwd.color[3];
$('pwdstrong_3').style.backgroundcolor = pwd.color[3];
$('pwdstrong_text').innerhtml = pwd.text[3];
$('pwdstrong_text').style.color = pwd.color[3];
}
else if (evaluate(value) == 4) {
$('pwdstrong_1').style.backgroundcolor = pwd.color[4];
$('pwdstrong_2').style.backgroundcolor = pwd.color[4];
$('pwdstrong_3').style.backgroundcolor = pwd.color[4];
$('pwdstrong_4').style.backgroundcolor = pwd.color[4];
$('pwdstrong_text').innerhtml = pwd.text[4];
$('pwdstrong_text').style.color = pwd.color[4];
}
}
//=================css文件=================
body
{
font: 13px 宋体;
}
/*密码验证提示css --------------------------------开始--------------------------------*/
#tipposition
{
width: 400px;
height: 16px;
line-height: 18px;
padding: 2px 30px;
}
.tip
{
background: #e6f2ff url(images/register_tip.png) no-repeat 10px center;
border: 1px #0e5863 dashed;
color: #0e5863;
}
.error
{
background: #fbecdf url(images/register_error.png) no-repeat 10px center;
border: 1px red dashed;
color: #6d3737;
}
.success
{
background: #d6fcd2 url(images/register_success.png) no-repeat 10px center;
border: 1px #2f5d36 dashed;
color: #3d934a;
}
/*密码强度css --------------------------------开始--------------------------------*/
#pwdstrong_color
{
width: 136px;
height: 3px;
border: 0px;
border-collapse: collapse;
border-spacing: 0;
background: #e6eaed;
margin-top: 5px;
}
#pwdstrong_color td
{
padding: 0px;
width: 44px; /*如不加td宽度,google的chrome不会正常显示*/
}
#pwdstrong_text
{
font: 12px 宋体;
}
更多js 密码强度验证(兼容ie,火狐,谷歌)。