Html
    Css
    Js

    
                        
.container {
	width:1200px;
	margin:30px auto;
}
.container>div {
	margin-bottom:6px;
}
input {
	display:inline-block;
	padding:0;
	margin:0;
}
#userName,#psd,#psd1 {
	width:260px;
	height:34px;
	border:1px solid #ccc;
	padding:0 10px;
	font-size:18px;
	color:#ccc;
	outline:none
}
.count {
	height:16px;
	line-height:16px;
	font-size:14px;
	color:#ccc;
	visibility:hidden;
	padding-left:160px;
}
label {
	display:inline-block;
	width:150px;
	text-align:right
}
.btn {
	display:inline-block;
	width:160px;
	height:40px;
	text-align:center;
	font-size:16px;
	line-height:40px;
	background:#e4393c;
	color:#fff;
	margin-left:160px;
}
.strong p {
	margin-left:154px;
	font-size:0;
}
.strong p span {
	display:inline-block;
	font-weight:normal;
	font-style:normal;
	padding:0;
	margin:0;
	width:94px;
	height:20px;
	background:#f9d194;
	font-size:13px;
	color:#fff;
	text-align:center;
	line-height:20px;
}
.strong p span.hover {
	background:#f97101;
}
.strong p.active span:nth-child(2) {
	background:#f97101;
}
.strong p.active1 span {
	background:#f97101;
}
.unmInfo {
	display:none;
	font-size:14px;
	color:#888;
}
.warn {
	display:inline-block;
	width:22px;
	height:22px;
	background:url("image/warn.png");
	background-repeat:no-repeat;
	background-size:22px 22px;
	vertical-align:top;
}
.right {
	display:inline-block;
	width:22px;
	height:22px;
	background:url("image/right.png");
	background-repeat:no-repeat;
	background-size:22px 22px;
	vertical-align:top;
}
.cuo {
	display:inline-block;
	width:22px;
	height:22px;
	background:url("image/cuo.png");
	background-repeat:no-repeat;
	background-size:22px 22px;
	vertical-align:top;
}
.psdInfo {
	display:none;
	font-size:14px;
	color:#888;
}
.psd1Info {
	display:none;
	font-size:14px;
	color:#888;
}
.btn-wrapper {
	margin-top:15px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

简单的用户验证

1
      罄?一瞥0
      2017/5/27 9:23:35

      bug无法显示密码中级强度,一个汉字占2个字符没错,但不符合用户习惯

      回复