html 密码强度设置

html：

	<input type="password" placeholder="请输入密码" class="txt" maxlength='16' minlength='8' id="mytext" onblur="pwFuHao()" />

						 	<br><div class="box">
					   <div class="bg"></div>信号强度：
					     <span class="spans" style='color:f5f5f5'>弱</span>
					</div> 

js：

	//密码强度设置
		$(document).ready(function() {
			$("#mytext").keyup(function() {
				var textMax = 16;
				$("#mytext").attr("maxlength", textMax); //追加最大值
				var boxlen = $(".box").css("width"); //添加width属性
				//alert(boxlen);
				var inputlength = $("#mytext").val().length; //获取输入值的个数
				var bgwidth = (inputlength / textMax) * parseInt(boxlen);
				//alert(bgwidth);
				$(".bg").css("width", bgwidth);

				if(bgwidth <= 120) //
				{
					$(".bg").css("background-color", "#F00");
					$(".spans").html("<span>弱</span>");
				} else if(120 < bgwidth) {
					if($("#mytext").val().match(/\d/) && $("#mytext").val().match(/[a-zA-Z]/)) {
						$(".bg").css("background-color", "#6F3");
						$(".spans").html("<span>强</span>");
					} else {
						$(".bg").css("background-color", "#F90");
						$(".spans").html("<span>中</span>");
					}
				}

			})
		})