简单密码验证（正则）

利用正则表达式，判断用户输入的密码强度。一般用于表单注册或者密码修改。
密码强度以及具体标准都是看需求制定，这里的话，把输入的密码内容分为三类：数字、字母、特殊符号，密码中包含其中一者，为弱，包含两种，为中，三种都包含，为强。
效果图如下：

接下来是代码

• 首先是html代码。
  为了方便观看，这里把密码框的type属性设置为text，正常情况应该是password。

  <form>
        <label>
            密码：<input type="text" class="password" name="" id="">
        </label>
        <p>
            <span>弱</span>
            <span>中</span>
            <span>强</span>
        </p>
    </form>
  

• 这里是css样式代码

  * {
            margin: 0;
            padding: 0;
        }
  
        form{
            width: 500px;
            padding: 20px;
            margin: 50px auto;
            border: 3px solid #333;
            font-size: 20px;
        }
  
        label {
            display: block;
            padding: 20px 0;
        }
  
        label > input {
            height: 30px;
            padding-left: 20px;
            font-size: 20px;
        }
  
        p {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-between;
        }
  
        p > span {
            width: 30%;
            background-color: #ccc;
            color: #fff;
            font-size: 26px;
            line-height: 40px;
            text-align: center;
        }
  
        p > span:nth-child(1).active {
            background-color: green;
        }
  
        p > span:nth-child(2).active {
            background-color: orange;
        }
  
        p > span:nth-child(3).active {
            background-color: red;
        }
  

• 接下来是密码验证代码----即JS代码
  实现核心功能主要是利用input事件，监控密码框，出现一种类型的密码，进行一次计数，最后通过计数器的大小，判断密码强度。

  <script>
        var reg1 = /\d/
        var reg2 = /[a-z]/i
        var reg3 = /[!@#$%^_&*()]/
  
        var spans = document.querySelectorAll('span')
        var inp = document.querySelector('input')
  
        inp.addEventListener('input' ,function () {
            var level = 0
            var text = this.value
            if (reg1.test(text)) level++
            if (reg2.test(text)) level++
            if (reg3.test(text)) level++
  
            for (var i = 0; i < spans.length; i++) {
                spans[i].classList.remove('active')
  
                if (i < level) {
                    spans[i].classList.add('active')
                }
            }
        })
    </script>