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>

     用到的小图片

  • 相关阅读:
    编译
    Package vim is not available, but is referred to by another package.
    Http 请求处理流程 Asp.Net 编程 TraceFact.Net
    JavaScript中两个感叹号的作用
    IE6 链接失效 <a>失效 不能点击
    父元素绝对定位 子元素在IE6 不能点击
    ie6 ie7 绝对定位 相对定位 层被遮住
    HTTP深入浅出http请求
    主流的js template引擎 前端模板
    第3章:基本概念(一)
  • 原文地址:https://www.cnblogs.com/fuyunlin/p/14440227.html
Copyright © 2011-2022 走看看