密码框验证信息+显示与隐藏练习

DOCTYPE html>
<html lang="en">

<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>密码框验证信息+显示与隐藏title>
  <style>
    .register {
      width: 400px;
      margin: 100px auto;
    }

    .pass {
      position: relative;
      display: inline-block;
      width: 200px;
      border: 1px solid #ccc;
    }

    .pass input {
      width: 170px;
      border: 0px;
      outline: none;
    }

    .pass img {
      position: absolute;
      /* 子绝父相 */
      top: 2px;
      right: 2px;
      width: 15px;
      margin: 3px 2px 0px;
    }

    .hint {
      display: inline-block;
    }

    .hint span {
      color: red;
      vertical-align: middle;
      /* 设置当前元素与父元素中线对齐 */
    }

    .hint .message {
      display: inline;
      font-size: 12px;
      color: #333;
    }
  style>
head>

<body>
  <div class="register">
    <div class="pass">
      <label>
        <img src="img/no_eye.png" alt="" id="eye">
      label>
      <input type="password" id="pass" maxlength="15">
    div>
    <div class="hint">
      <span>*span>
      <p class="message">请输入6~12位密码p>
    div>
  div>
  <script>
    //获取元素
    var eye = document.querySelector('#eye');
    var pass = document.querySelector('#pass');
    var span = document.querySelector('span');
    var message = document.querySelector('.message');
    var flag = 0;
    //注册监听事件
    eye.addEventListener('click', function () {
      if (flag == 0) {    // 通过flag判断小眼睛的关合状态，以此改变输入框的类型
        pass.type = 'text';
        eye.src = 'img/eye.png';  //此处的小眼睛图标搜集于iconfont
        flag = 1;
      } else {
        pass.type = 'password';
        eye.src = 'img/no_eye.png';
        flag = 0;
      }
    })
    pass.addEventListener('blur', function () {
      if (this.value.length < 6 || this.value.length > 12) {  //判断用户输入的密码位数是否符合条件并给出提示信息
        span.innerHTML = '';
        message.innerHTML = '输入有误，请输入6~12位密码！'
        message.style.color = 'red';
      } else {
        span.innerHTML = '√';
        span.style.color = 'green';
        message.innerHTML = '';
      }
    })
  script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

相关阅读:
【特纳斯电子】基于物联网的空气质量检测-仿真设计
1624. 两个相同字符之间的最长子字符串
工程建设智慧施工云平台源码智慧工地平台源码
免费录音转文字的软件有哪些？不知道的小伙伴快来码住
智能体脂秤模块方案设计与开发
[护网杯 2018]easy_tornado-1|SSTI注入
WPF 的一些坑
webpack——webpack环境安装、开发环境devServer、package.json指令相关、开发依赖和生产依赖、面试题
oracle面试题
抗锯齿渲染

原文地址：https://blog.csdn.net/weixin_46811890/article/details/133522634

密码框验证信息+显示与隐藏 练习

密码框验证信息+显示与隐藏练习