HTML部分

    1. <head>
    2.     <meta charset="UTF-8" />
    3.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    4.     <title>Document</title>
    5.     <link
    6.           rel="stylesheet"
    7.           href="//at.alicdn.com/t/font_1790290_8u74otvadap.css"
    8.           />
    9.     <body>
    10.         <div class="box">
    11.             <input type="password" class="ipt" />
    12.             <i class="iconfont icon-browse"></i>
    13.             <p class="text">请输入6-16位密码</p>
    14.             <i class="cw"></i>
    15.         </div>
    16.     </body>

    CSS部分

    1. <style>
    2. .box {
    3. width: 400px;
    4. height: 40px;
    5. margin: 50px 50px;
    6. background-color: skyblue;
    7. border-radius: 100px;
    8. /* line-height:40px; */
    9. }
    10. .box .ipt {
    11. float: left;
    12. height: 20px;
    13. outline: none;
    14. border: 0;
    15. padding-left: 15px;
    16. margin: 10px 5px 5px 15px;
    17. }
    18. .box i.iconfont {
    19. font-size: 20px;
    20. }
    21. i.icon-cuowutishitianchong,
    22. i.icon-duigou1 {
    23. color: red;
    24. }
    25. .box p.text {
    26. display: inline-block;
    27. margin: 10px auto;
    28. }
    29. </style>

    JavaScript部分

    1. <div class="box">
    2.     <input type="password" class="ipt" />
    3.         <i class="iconfont icon-browse"></i>
    4. <p class="text">请输入6-16位密码</p>
    5. <i class="cw"></i>
    6. </div>
    7. <script>
    8.     var input = document.querySelector(".ipt");
    9. var watch = document.querySelector(".icon-browse");
    10. var text = document.querySelector(".text");
    11. var message = document.querySelector(".cw");
    12. var flag = 0;
    13. watch.onclick = function () {
    14.     if (flag == "0") {
    15.         watch.className = "iconfont icon-jinzhitishi";
    16.         input.type = "text";
    17.         flag = 1;
    18.     } else {
    19.         watch.className = "iconfont icon-browse";
    20.         input.type = "password";
    21.         flag = 0;
    22.     }
    23. };
    24. // 首先判断的事件是表单失去焦点 onblur
    25. // 如果输入正确则提示正确的信息颜色为绿色小图标变化
    26. // 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
    27. // 因为里面变化样式较多，我们采取className修改样式
    28. input.onblur = function () {
    29.     if (this.value.length < 6 || this.value.length > 16) {
    30.         console.log("错误");
    31.         message.className = "iconfont icon-cuowutishitianchong";
    32.         text.innerHTML = "位数错误应为6-16位";
    33.     } else {
    34.         message.className = "iconfont icon-duigou1";
    35.         text.innerHTML = "您输入的正确";
    36.     }
    37. };
    38. </script>