0412---jQuery第4.5次作业---正则密码强度

最新推荐文章于 2023-04-21 00:10:45 发布

酷扬

最新推荐文章于 2023-04-21 00:10:45 发布

阅读量248

点赞数

本文链接：https://blog.csdn.net/aa8869138/article/details/70158040

版权

html javascript 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

jquery

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css" media="screen">
        body {
             background-color: #ccc;
        }

        .con {
                 margin: 100px auto;
                 width: 400px;
                 padding: 50px;
                line-height: 40px;
                border: 1px solid #999;
                background: #efefef;
        }

        .strenLevel {
                height: 6px;
                width: 120px;
                border: 1px solid #ccc;
                padding: 2px;
        }

        .strenLevel1 {
           background-color: red;
           width: 40px;
        }

         .strenLevel2 {
           background-color: yellow;
           width: 70px;
        }

         .strenLevel3 {
           background-color: green;
           width: 100px;
        }
    </style>
    <script src="jquery-1.11.1.min.js"></script>
</head>
<body>
    <div class="con">
        <label for="txt">密码</label>
        <input id="txt" type="text" name="" value=""><br/>
        <em>密码强度:</em>
        <em class="strenLen" id="strenLen"></em>
        <div class="strenLevel" id="strenLevel">

        </div>
    </div>
    <script type="text/javascript">
             $(function(){


                var arr=["","低","中","高"];
                        var num=/[0-9]/;

                $("#txt").keyup(function(){
                         var level=0;
                   /*console.log($("#txt").val());*/
                      var txt=num.test($('#txt').val());
                      var tx=/[a-zA-Z]/.test($('#txt').val());
                      var txs=/\W/.test($('#txt').val());

                if(txt){
                         level++;
                }
                if(tx){
                    level++;
                }
                if(txs){
                    level++;
                }
                        if($('#txt').val().length<6){
                           level=0;
                        }
                    $("em:eq(1)").html(arr[level]);
                    $(arr).each(
                    function(index) {
                         console.log(index);
                  $("div:eq(1)").removeClass("strenLevel"+index);



                 }
                );

                    $("div:eq(1)").addClass("strenLevel"+level);
                });

             });

    </script>
</body>
</html>

酷扬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0412---jQuery第4.5次作业---正则密码强度

Document body { background-color: #ccc; } .con { margin: 100px auto; width: 400px; padding: 50px;
复制链接

扫一扫

专栏目录