JS实现输入检验
有趣的小案例池子：
JS实现定时器
JS实现关闭图片窗口
JS实现输入检验
获取焦点后隐藏提示内容的输入框
JS实现获取鼠标在画布中的位置
聊天信息框显示消息
JS点击切换背景图
自动切换背景的登录页面
JS制作跟随鼠标移动的图片
JS实现记住用户密码
效果展示
概述
本文讲解如何书写，可以根据输入内容的在鼠标失去焦点的时候，进行检验的输入框。
构建HTML框架
<body> <div class="register"> <input type="password" class="ipt"> <p class="message">请输入6~16位密码</p> </div> </body>
CSS样式
<style> div { /* 设置盒子宽度 */ width: 600px; /* 设置盒子外边距位置 */ margin: 100px auto; } .message { /* 设置信息内容为行内块 */ display: inline-block; /* 设置字体大小 */ font-size: 12px; /* 设置字体颜色 */ color: #999; /* 设置信息显示的图片 正常的情况*/ background: url(images/mess.png) no-repeat left center; /* 设置内边距左边的位置 */ padding-left: 20px; } .wrong { /* 错误情况 */ /* 修改字体颜色 */ color: red; background-image: url(images/wrong.png); } .right { /* 正确情况 */ color: green; background-image: url(images/right.png); } </style>
JS逻辑
<script> // 1.获取元素 var ipt = document.querySelector('.ipt'); var message = document.querySelector('.message'); //2. 注册事件 失去焦点 ipt.onblur = function() { if (this.value.length < 6 || this.value.length > 16) { // 获取内容的长度 然后判断是否在6~16之间 如果不在的话 // 显示报错信息 message.className = 'message wrong'; // 修改类名 message.innerHTML = '您输入的位数不对要求6~16位'; } else { // 正确的情况 message.className = 'message right'; message.innerHTML = '您输入的正确'; } } </script>
完整代码
<!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>Document</title> <style> div { /* 设置盒子宽度 */ width: 600px; /* 设置盒子外边距位置 */ margin: 100px auto; } .message { /* 设置信息内容为行内块 */ display: inline-block; /* 设置字体大小 */ font-size: 12px; /* 设置字体颜色 */ color: #999; /* 设置信息显示的图片 正常的情况*/ background: url(images/mess.png) no-repeat left center; /* 设置内边距左边的位置 */ padding-left: 20px; } .wrong { /* 错误情况 */ /* 修改字体颜色 */ color: red; background-image: url(images/wrong.png); } .right { /* 正确情况 */ color: green; background-image: url(images/right.png); } </style> </head> <body> <div class="register"> <input type="password" class="ipt"> <p class="message">请输入6~16位密码</p> </div> <script> // 1.获取元素 var ipt = document.querySelector('.ipt'); var message = document.querySelector('.message'); //2. 注册事件 失去焦点 ipt.onblur = function() { if (this.value.length < 6 || this.value.length > 16) { // 获取内容的长度 然后判断是否在6~16之间 如果不在的话 // 显示报错信息 message.className = 'message wrong'; // 修改类名 message.innerHTML = '您输入的位数不对要求6~16位'; } else { // 正确的情况 message.className = 'message right'; message.innerHTML = '您输入的正确'; } } </script> </body> </html>
如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历等内容，让大家更好学习编程，我的抖音，B站也叫极客李华。大家喜欢也可以关注一下
