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

-Advertisement-

案例：驗證密碼的強度 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>

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

-Advertisement-

更多相關文章

react初始

import React, { Component } from 'react' import "./footer.css"; //引入外部樣式表 export default class footer extends Component { //這裡的extends繼承父類的屬性和方法，但是沒有自 ...
JS高級---數組和偽數組

數組和偽數組偽數組和數組的區別真數組的長度是可變的偽數組的長度不可變 function f1() { var sum = 0; for (var i = 0; i < arguments.length; i++) { sum += arguments[i]; } console.log(sum ...
JS高級---正則表達式其他方法的使用

正則表達式其他方法的使用正則表達式中:g 表示的是全局模式匹配正則表達式中:i 表示的是忽略大小寫 var str = "中國移動:10086,中國聯通:10010,中國電信:10000"; //把裡面所有的數字全部顯示出來 var array = str.match(/\d{5}/g); co ...
js判斷Android和Ios

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=" ...
JS高級---案例：驗證表單

案例：驗證表單 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { background: #ccc; } labe ...
FormData控制台列印為空及使用方法

之前使用formData都是在network中查看參數，最近在做一個項目，介面還沒有，用的假數據做的交互，突發奇想的console.log了一下，結果是空的。一開始以為append失效了，經過查證原來：FormData是一種特殊類型的對象，它不可字元串化，不能僅使用console.log列印出來 ...
JS高級---案例：驗證用戶輸入的是不是中文名字

案例：驗證用戶輸入的是不是中文名字 [\u4e00-\u9fa5] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> 請輸入您的名字:<input ty ...
JS高級---案例：驗證用戶輸入的是不是郵箱

案例：驗證用戶輸入的是不是郵箱 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <!-- 請您輸入郵箱地址:<input type="text" va ...