验证密码强度

HTML:

CSS:

.box {
	width: 300px;
	height: 60px;
	margin: 50px auto;
}

.box input {
	width: 100%;
	height: 40px;
	margin-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border: 1px solid #E0E0E0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
}

.level_0 {
	width: 100%;
	height: 15px;
	background-color: #FFF;
}

.level_1 {
	width: 33.33%;
	height: 15px;
	background-color: red;
}

.level_2 {
	width: 66.66%;
	height: 15px;
	background-color: orange;
}

.level_3 {
	width: 100%;
	height: 15px;
	background-color: green;
}

js：

document.getElementById("password").onkeyup = function() {
	document.getElementById("level").className = "level_" + (this.value.length >= 6 ? getLevel(this.value) : 0);
};

function getLevel(value) {
	var level = 0;
	if(/[0-9]/.test(value)) {
		level++;
	}
	if(/[a-zA-z]/.test(value)) {
		level++;
	}
	if(/[^0-9a-zA-Z_]/.test(value)) {
		level++;
	}
	return level;
}

效果图：