大概样式:
源码:
复制代码 代码如下:
//=================html页面=================
密码:
onblur=validateinput('password',this.value) onkeydown=validatepwdstrong(this.value); />
js文件
复制代码 代码如下:
//使用$替换document.getelementbyid函数
var $ = function(v) { return document.getelementbyid(v); }
/******************************************************验证用户输入******************************************************/
function validateinput(element, value) {
//验证密码
if (element == password) {
if (value.tostring().length $('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 宋体;
}