JS实现密码框效果
在输入密码时,将密码的长度设置为6-16,且在密码长度出现小于6或是大于16时,会出现提示,效果如下图
1.此事件为失去焦点事件,当鼠标离开密码框且点击旁边就会触发事件
2.输入密码会出现提示,事件发生与密码的长度有关
3.根据长度再来判断该提示的消息与效果.
代码如下:
密码框 div{ width:600px; margin:100pxauto; } .massage{ background-image:url(gth.png); background-repeat:no-repeat; background-position:leftcenter; color:black; display:inline-block; padding-left:20px; } .right{ background-image:url(right.png); background-repeat:no-repeat; color:green; } .wrong{ background-repeat:no-repeat; background-image:url(wrong.png); color:red; } 请输入6-16位密码