JS实现密码框效果
在输入密码时，将密码的长度设置为6-16，且在密码长度出现小于6或是大于16时，会出现提示，效果如下图
1. 此事件为失去焦点事件，当鼠标离开密码框且点击旁边就会触发事件 2. 输入密码会出现提示，事件发生与密码的长度有关 3. 根据长度再来判断该提示的消息与效果.
代码如下：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>密码框</title> <style type='text/css'> div{ width: 600px; margin: 100px auto; } .massage{ background-image: url(gth.png); background-repeat:no-repeat; background-position: left center; 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; } </style></head><body> <div class='register'> <input type='password' id='pwd'> <p class='massage'>请输入6-16位密码</p> </div> <script> var pwd=document.querySelector(’#pwd’); var aa=document.querySelector(’.massage’); pwd.onblur= function(){ if(this.value.length>16 || this.value.length<6){ aa.innerText=’错误，请输入6-16为密码’; aa.className=’massage wrong’; }else{ aa.className=’massage right’; aa.innerText=’密码正确’; } } </script></body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. javascript设计模式 ? 建造者模式原理与应用实例分析2. Docker 部署 Prometheus的安装详细教程3. Ajax引擎 ajax请求步骤详细代码4. IntelliJ IDEA设置条件断点的方法步骤5. JavaScript Tab菜单实现过程解析6. ThinkPHP5 通过ajax插入图片并实时显示(完整代码)7. Python使用oslo.vmware管理ESXI虚拟机的示例参考8. 解析使用useDark(),发现transition 动画失效9. javascript xml xsl取值及数据修改第1/2页10. ASP中实现字符部位类似.NET里String对象的PadLeft和PadRight函数
网公网安备