onblur失去焦点事件 登录页面

本文主要是介绍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来改变样式

 

这篇关于onblur失去焦点事件 登录页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---