JS高級---案例:驗證密碼的強度

来源:https://www.cnblogs.com/jane-panyiyun/archive/2020/01/14/12192118.html

案例:驗證密碼的強度 1. 給我密碼,我返回對應的級別 2. 每次鍵盤抬起都要獲取文本框中的內容, 驗證文本框中有什麼東西, 得到一個級別, 然後下麵的div顯示對應的顏色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...


案例:驗證密碼的強度

 

1. 給我密碼,我返回對應的級別

2. 每次鍵盤抬起都要獲取文本框中的內容, 驗證文本框中有什麼東西, 得到一個級別, 然後下麵的div顯示對應的顏色

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style type="text/css">
  #dv {
    width: 300px;
    height: 200px;
    position: absolute;
    left: 300px;
    top: 100px;
  }

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

  .strengthLv1 {
    background: red;
    height: 6px;
    width: 40px;
    border: 1px solid #ccc;
    padding: 2px;
  }

  .strengthLv2 {
    background: orange;
    height: 6px;
    width: 80px;
    border: 1px solid #ccc;
    padding: 2px;
  }

  .strengthLv3 {
    background: green;
    height: 6px;
    width: 120px;
    border: 1px solid #ccc;
    padding: 2px;
  }
</style>

<body>
  <div id="dv">
    <label for="pwd">密碼</label>
    <input type="text" id="pwd" maxlength="16">
    <!--課外話題-->
    <div>
      <em>密碼強度:</em>
      <em id="strength"></em>
      <div id="strengthLevel" class="strengthLv0"></div>
    </div>
  </div>
  <script src="common.js"></script>
  <script>

    //獲取文本框註冊鍵盤抬起事件
    my$("pwd").onkeyup = function () {
      //每次鍵盤抬起都要獲取文本框中的內容,驗證文本框中有什麼東西,得到一個級別,然後下麵的div顯示對應的顏色
      //如果密碼的長度是小於6的,沒有必要判斷
      my$("strengthLevel").className = "strengthLv" + (this.value.length >= 6 ? getLvl(this.value) : 0);
    };

    //給我密碼,我返回對應的級別
    function getLvl(pwd) {
      var lvl = 0;//預設是0級
      //密碼中是否有數字,或者是字母,或者是特殊符號
      if (/[0-9]/.test(pwd)) {
        lvl++;
      }
      //判斷密碼中有沒有字母
      if (/[a-zA-Z]/.test(pwd)) {
        lvl++;
      }
      //判斷密碼中有沒有特殊符號
      if (/[^0-9a-zA-Z_]/.test(pwd)) {
        lvl++;
      }
      return lvl;//最小的值是1,最大值是3
    }

  </script>


</body>

</html>

 


您的分享是我們最大的動力!

更多相關文章
  • import React, { Component } from 'react' import "./footer.css"; //引入外部樣式表 export default class footer extends Component { //這裡的extends繼承父類的屬性和方法,但是沒有自 ...
  • 數組和偽數組 偽數組和數組的區別 真數組的長度是可變的 偽數組的長度不可變 function f1() { var sum = 0; for (var i = 0; i < arguments.length; i++) { sum += arguments[i]; } console.log(sum ...
  • 正則表達式其他方法的使用 正則表達式中:g 表示的是全局模式匹配 正則表達式中:i 表示的是忽略大小寫 var str = "中國移動:10086,中國聯通:10010,中國電信:10000"; //把裡面所有的數字全部顯示出來 var array = str.match(/\d{5}/g); co ...
  • <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=" ...
  • 案例:驗證表單 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { background: #ccc; } labe ...
  • 之前使用formData都是在network中查看參數,最近在做一個項目,介面還沒有,用的假數據做的交互,突發奇想的console.log了 一下,結果是空的。 一開始以為append失效了,經過查證原來:FormData是一種特殊類型的對象,它不可字元串化,不能僅使用console.log列印出來 ...
  • 案例:驗證用戶輸入的是不是中文名字 [\u4e00-\u9fa5] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> 請輸入您的名字:<input ty ...
  • 案例:驗證用戶輸入的是不是郵箱 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <!-- 請您輸入郵箱地址:<input type="text" va ...
一周排行
  • 微信公眾號: "Dotnet9" ,網站: "Dotnet9" ,問題或建議: "請網站留言" , 如果對您有所幫助: "歡迎贊賞" 。 .NET CORE(C ) WPF 抽屜式菜單 閱讀導航 1. 本文背景 2. 代碼實現 3. 本文參考 4. 源碼 1. 本文背景 使用簡單動畫實現抽屜式菜單 ...
  • 在上面abp(net core)+easyui+efcore實現倉儲管理系統——ABP WebAPI與EasyUI結合增刪改查之八(三十四) 文章的學習之後。我們通過前面的八篇文章已經學習了通過WebAPI介面與控制器去實現新增、刪除與修改功能。接下來,我們要在控制器中實現查詢功能。 ...
  • 1.選中項目-->屬性-->生成-->選中 XML文檔文件(xml路徑和該項目相同) 2.選擇生成序列化程式集:自動/開 ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7640873.html,記錄一下學習過程以備後續查用。 一、引言 從今天開始我們開始講結構型設計模式,結構型設計模式有如下幾種:適配器模式、橋接模式、裝飾模式、組合模式、外觀模式、享元模式、代理模式。 創建型設 ...
  • C 中 ConfigureAwait 相關答疑FAQ 在前段時間經常看到園子里有一些文章討論到 ConfigureAwait,剛好今天在微軟官方博客看到了 "Stephen Toub" 前不久的一篇答疑 ConfigureAwait 的一篇文章,想翻譯過來。 原文地址:https://devblog ...
  • 想要實現二維數組中根據某個欄位排序,一般可以通過數組迴圈對比的方式實現。這裡介紹一種更簡單的方法,直接通過PHP函數實現。array_multisort() :可以用來一次對多個數組進行排序,或者根據某一維或多維對多維數組進行排序。詳細介紹可參考PHP手冊:https://www.php.net/m ...
  • 常用的軟體: 播放器: cloundMusic(網易雲音樂) https://music.163.com/#/download PotPlayer(一款強大的視頻播放器) https://daumpotplayer.com/download/ ACDsee(ACDsee圖片編輯器免費版) https ...
  • 發現問題 在一次偶然中,在爬取某個網站時,老方法,打開調試工具查看請求方式,請求攔截,是否是非同步載入,不亦樂乎,當我以為這個網站非常簡單的時候,發現二級網頁的地址和源碼不對應 Ajax非同步載入?源碼也是這樣的 而且這些鏈接直... ...
  • 準備年後要跳槽,所以最近一直再看面試題,並且把收集到的面試題整理了以下發到博客上,希望對大家有所幫助。 首先是集合類的面試題 1. HashMap 排序題,上機題。 已知一個 HashMap<Integer,User>集合, User 有 name(String)和 age(int)屬性。請寫一個方 ...
  • JVM體繫結構圖 Native Interface(本地介面) Java本地介面(Java Native Interface (JNI))允許運行在Java虛擬機(Java Virtual Machine (JVM))上的代碼調用本地程式和類庫,或者被它們調用,這些程式和類庫可以是其它語言編寫的,比 ...
x