用正则来实现一个密码强度验证小案例

平常在我们的注册账户的时候经常会有密码强度验证这个功能，今天就用正则的方法来实现这个小功能，案例效果图如下：

1、html代码部分：

<body>
    <input type="password" class="password">
    <!-- ??  -->
    <span class="eye">??</span>
    <br>
    <p class="warning length">密码长度大于8</p>
    <p class="warning lowercase">密码包含小写字母</p>
    <p class="warning capital">密码包含大写字母</p>
    <p class="warning num">密码包含数字</p>
    <p class="warning symbol">密码包含符号</p>
</body>

2、css部分：

 <style>
        .warning {
            font-size: 12px;
            color: gray;
        }
        
        span {
            cursor: pointer;
        }
        /* 同时有这两个类名 */
        
        .warning.get {
            color: yellowgreen;
        }
    </style>

3、js部分，用正则的方法：

<script src="./js/jquery-1.12.4.min.js"></script>
<script>
    // 密码强度验证
    // jQ跟js的关系
    // jQ是基于js的封装 全部都是js
    $(function() {
        // 查看 隐藏密码
        $('.eye').click(function() {
            // 如果type=password ->text
            if ($(".password").attr('type') == 'password') {
                $(".password").attr('type', 'text');
                $(this).html('??');
            } else {
                $(".password").attr('type', 'password');
                $(this).html('??');
            }
            // 反之变为 password
        })


        //密码强度验证 
        // js中的正则写法
        // 创建一个正则表达式
        // /[0-9]/.test()


        // 输入事件 oninput dom的
        // 改变事件 onchange (value的值变了) 如果是文本框 需要失去焦点
        // jQ只封装了一部分的 js事件
        // 如果没有封装的事件 可以使用 on来绑定
        // $('.password').input(function(){
        $('.password').on('input', function() {
            // $('.password').on('change', function () {
            // console.log('打字');
            // 获取文本框的内容
            var thisValue = $(this).val();


            // 使用正则
            // 数字
            /[0-9]/.test(thisValue) ? $('.num').addClass('get') : $('.num').removeClass('get');
            // 小写字母
            /[a-z]/.test(thisValue) ? $('.lowercase').addClass('get') : $('.lowercase').removeClass('get');
            // 大写字母
            /[A-Z]/.test(thisValue) ? $('.capital').addClass('get') : $('.capital').removeClass('get');
            // 符号
            /[^A-Za-z0-9]/.test(thisValue) ? $('.symbol').addClass('get') : $('.symbol').removeClass('get');
            // 密码长度
            thisValue.length > 8 ? $('.length').addClass('get') : $('.length').removeClass('get');
        })
    })
</script>

用正则来实现一个密码强度验证小案例

猜你喜欢