密码验证框信息
2022/8/1 6:22:46
本文主要是介绍密码验证框信息,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <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: 16px; color: #999; background: url(images/mess.png) no-repeat left center; padding-left: 20px; background-size: 20px; } .wrong { color: red; background: url(images/wrong.png) no-repeat left center; background-size: 20px; } .right { color: green; background: url(images/right.png) no-repeat left center; background-size: 20px; } </style> </head> <body> <div class="register"> <input type="password" class="ipt"> <p class="message">请输入6-16位密码</p> <script> // 事件源 var ipt = document.querySelector('.ipt') var message = document.querySelector('.message') // 注册事件失去焦点 ipt.onblur = function () { if (ipt.value.length < 6 || ipt.value.length > 16) { message.innerHTML = '请输入6-16位密码' message.className = 'message wrong' } else { message.className = 'message right' message.innerHTML = '输入正确' } } </script> </div> </body>
这篇关于密码验证框信息的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?
- 2024-05-09企业src漏洞挖掘-有意思的命令执行