zoukankan      html  css  js  c++  java
  • 密码框格式提示错误信息

    用户如果离开密码框,里面输入个数不是6~16,则提示错误信息,否则提示输入正确信息
     
    <!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 {
                 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>
            // 首先判断的事件是表单失去焦点 onblur
            // 如果输入正确则提示正确的信息颜色为绿色小图标变化
            // 如果输入不是6到16位,则提示错误信息颜色为红色 小图标变化
            // 因为里面变化样式较多,我们采取className修改样式
            // 1.获取元素
            var ipt = document.querySelector('.ipt');
            var message = document.querySelector('.message');
            //2. 注册事件 失去焦点
            ipt.onblur = function() {
                // 根据表单里面值的长度 ipt.value.length
                if (this.value.length < 6 || this.value.length > 16) {
                    // console.log('错误');
                    message.className = 'message wrong';
                    message.innerHTML = '您输入的位数不对要求6~16位';
                } else {
                    message.className = 'message right';
                    message.innerHTML = '您输入的正确';
                }
            }
        </script>
    </body>
    </html>

     用到的小图片

  • 相关阅读:
    Linux主要shell命令详解(下)
    mget命令, ftp命令详解
    VI 基本可视模式
    vim使用技巧
    cd及目录快速切换
    du命令解决linux磁盘空间满的问题(很不错的哦)
    Mysql删除数据后磁盘空间未释放的解决办法【转】
    MYSQL-innodb性能优化几个点
    Apache服务器出现Forbidden 403错误提示的解决方法总结
    MySQL 分区表原理及数据备份转移实战
  • 原文地址:https://www.cnblogs.com/fuyunlin/p/14440227.html
Copyright © 2011-2022 走看看