onblur失去焦点事件 登录页面

        <div>
			<input type="password" class="pwd" />
			<p class="xinxi">请输入6~16位密码</p>
		</div>

HTML代码

       <style>
			div{
				width: 600px;
				height: 180px;
			}
			.xinxi{
				display: inline-block;
				font-size: 12px;
				color: #999;
				background: url(img/qian.jpg) no-repeat left center;
				padding-left: 25px;
			}
			.cuo{
				color: red;
				background: url(img/cuo.jpg) no-repeat left center;
			}
			.dui{
				color: green;
				background: url(img/dui.jpg) no-repeat left center;
			}
		</style>

CSS样式

      <script>
			//获取元素
			var pwds = document.querySelector('.pwd');
			var mes = document.querySelector('.xinxi');
			//注册事件，失去焦点
			pwds.onblur = function(){
				//判断
				//注意：value是值，type是属性，判断的是值是不是6~16位
				if(this.value.length<6 || this.value.length>16){
					//利用className改变样式
					mes.className = 'xinxi cuo';
					mes.innerHTML = '输入密码格式不对';
				}else{
					mes.className = 'dui xinxi';
					mes.innerHTML = '输入正确';
				}
			}
		</script>

获取元素

注册失去焦点事件

使用value值的长度来判断是否大于6位小于16位

利用className来改变样式