脚本宝典收集整理的这篇文章主要介绍了基于JavaScript实现密码框验证信息,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
本文实例为大家分享了JavaScript实现密码框验证信息的具体代码,供大家参考,具体内容如下
<!DOCTYPE htML> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, inITial-scale=1.0"> <title>Document</title> <style> div { width: 600px; margin: 100px auto; } .message { display: inline-block; font-Size: 12px; color: #999; background: url(./img/1.png) no-repeat left center; padding-left: 10px; } .wrong { color: red; background-image: url(img/2.png); } .right { color: green; background-image: url(img/3.png); } </style> </head> <body> <div class="register"> <input type="password" class="ipt"> <p class="message">请输入6-16位密码</p> </div> <script> //获取元素 VAR ipt = document.querySelector('.ipt'); var message = document.querySelector('.message'); //注册事件 ipt.onblur = function() { //根据表单的值的长度 if (this.value.length < 6 || this.value.length > 16) { message.classname = 'message wrong'; message.innerHTML = '你输入的位数不对'; } else { message.className = 'message right'; message.innerHTML = '输入正确'; } } </script> </body> </html>
运行结果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本宝典。
以上是脚本宝典为你收集整理的基于JavaScript实现密码框验证信息全部内容,希望文章能够帮你解决基于JavaScript实现密码框验证信息所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。