无遮挡18禁啪啪免费观看 I 秋霞成人av I brandilove欧美三区 I 激情偷乱人伦小说视频 I 人人插人人艹 I www.亚洲com I 波多野结衣av高清一区二区三区 I 精品无码国产污污污免费网站 I 美女张开腿给男人桶爽久久 I 国产精品久久久久久久免费 I 国内精品久久99 I 亚洲精品无码专区 I 亚洲免费视频一区二区 I 午夜xxx I 国产一区啪啪 I 丝袜激情网 I 日韩精品久久久久久久 I 欧美香蕉视频 I 成人片免费看 I 天天色综合2 I 寡妇被老头舔到高潮的视频 I 亚洲第一页在线 I 国产放荡av国产精品 I 在线精品视频一区二区 I 免费黄色片在线观看 I 秋霞伊人网 I www.伊人 I 久草在线91 I 女人啪啪免费av大片 I 欧美一区二区综合 I 精品久久久久久天美传媒 I 黄色工厂在线观看 I 91精品国产色综合 I 动漫美女被到爽 I 丁香午夜激情

密碼驗證 : 密碼強度驗證

2020-3-18 前端達人

密碼強度驗證

需求

首先我們需要知道需求是什么？這很重要！

要知道我們寫的一切邏輯都是建立在需求之上

當輸入框聚焦時提示密碼要求

當密碼符合要求時隱藏提示并給予反饋

密碼等級低時提示密碼等級為低

密碼等級一般時提示密碼等級為中

密碼等級高時提示密碼等級為高

當密碼不符合要求時重新打開提示

思考如何構建函數
通過上面的需求你能想到的函數時什么？你能想到的邏輯又是什么？

首先提示的顯示隱藏我們可以用事件綁定或者事件監聽來做

其次我們需要利用正則來判斷密碼等級

當密碼等級為低時顯示紅色

當密碼等級為中時顯示黃色

當密碼等級為高時顯示綠色

最后根據密碼等級來渲染頁面也就是反饋給用戶的樣式

建議 :

在這里盡量把每個函數的功能區分好構思好

不僅要讓自己能看懂還要讓別人能看懂

這樣的代碼才是好的代碼可讀性更好可維護性更高

實現功能實現需求

HTML結構

在提示盒子的內部寫3個div 不同等級給予不同顏色不同數量的提示

 密碼 : <input type="text" id="ipt">
    <p id="p">請輸入6-20位的帶有數字字母或者特殊符號的密碼</p>
    <div class="box">
        <span></span>
        <div></div>
        <div></div>
        <div></div>
    </div>

不管樣式行為再怎么花里胡哨也一定要先把結構里要出現的元素寫出來

CSS樣式

由于考慮到等級分為三種所以給提示盒子分3中不同的class類名

每一個類名對應的子元素的樣式也不同

到js部分我們只需要操作class類名就可以了

   <style>
        *{
            margin : 0 ;
            padding : 0 ;
        }
        //提示盒子
        .box{
            position : absolute;
            top : 2px;
            left : 200px;
        }
        .box div,
        .box span{
            margin-right : 5px;
            width : 20px;
            height : 20px;
            float : left;
        }
        //低等級
        .box.low :nth-child(2){
            background : red;
        }
        //中等級
        .box.middle div{
            background : yellow;
        }
        .box.middle :last-child{
            background: #fff;
        }
        //高等級
        .box.high div{
            background : green;
        }
        //提示文字默認隱藏
        p{
            display : none;
        }
    </style>

JS行為

 <script>
        //獲取需要操作的元素
        let ipt = document.getElementById('ipt');
        let p = document.getElementById('p');
        let div = document.getElementsByClassName('box')[0];
        var tip = false; //聚焦顯示提示的開關
        //添加聚焦事件
        ipt.addEventListener('focus' , () => {
            //由于存在用戶輸入正確的密碼失焦再操作的可能 所以需要驗證開關
            if(!tip) {
                p.style.display = 'block';
            }
            //默認選中文字 提升用戶體驗
            ipt.select();
        })
        //添加輸入時的事件
        ipt.addEventListener('input' , () => {
            //拿到用戶輸入的密碼字符串
            let str = ipt.value;
            //當密碼不符合要求時 要及時給予反饋 及時清除樣式
            if(str.length < 6 ||str.length > 20 || /[^(\da-zA-Z\_\#\@\$\^\%\*\&\!\~\+\-)]/.test(str) || str === "") {
                p.style.display = 'block';
                removeClass(div);
                div.children[0].innerHTML = "";
                tip = true;
                //如果不符合要求 就沒必要判斷等級了 直接結束判斷
                return false;
            }else{
                p.style.display = 'none';
            }
            //判斷密碼等級
            let res = level(str);
            //根據等級添加樣式
            randerLevel(res);
        })
        //判斷密碼等級函數
        function level (str) {
            let level = 0;
            //當用戶輸入的字符串符合一定規則 讓等級+1
            if(/\d+/.test(str)) {
                level ++;
            }
            if(/[a-zA-Z]+/.test(str)) {
                level ++;
            }
            if(/[\_\#\@\$\^\%\*\&\!\~\+\-]+/.test(str)) {
                level ++;
            }
            return level;
        }
        //添加樣式函數
        function randerLevel (level) {
            //在添加樣式前先清空樣式
            removeClass(div);
            div.children[0].innerHTML = "";
            //根據等級添加對應的類名
            switch (level) {
                case 1 :
                    div.children[0].innerHTML = '低';
                    //元素存在不止一個類名 用 += 更好
                    div.className += ' low';
                    break;
                case 2 :
                    div.children[0].innerHTML = '中';
                    div.className += ' middle';
                    break;
                case 3 :
                    div.children[0].innerHTML = '高';
                    div.className += ' high';
                    break;
            }
        }
        //去等級類名函數
        function removeClass(ele){
            let reg = /low|middle|high/g;
            if(reg.test(ele.className)) {
                //不要忘記把值賦回去 replace返回的是新字符串
                ele.className = ele.className.replace(reg , "");
            }
        }
    </script>

當密碼等級為低時給予紅色反饋

當密碼等級為中時給予黃色反饋
當密碼等級為高時給予綠色反饋
當密碼長度太短或太長時不給予顏色反饋給予文字反饋

————————————————
版權聲明：本文為CSDN博主「豆漿不好喝」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_45178648/article/details/104885417

« JS中數據類型轉換 JS設計模式之單例模式、組合模式、觀察者模式、策略模式 »

日歷

鏈接

個人資料

藍藍設計的小編 http://www.gyxygd.cn

存檔