Hướng dẫn strong password regex javascript - mật khẩu mạnh regex javascript

<script language="javascript">
    function passwordChanged() {
        var strength = document.getElementById('strength');
        var strongRegex = new RegExp("^(?=.{14,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
        var mediumRegex = new RegExp("^(?=.{10,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
        var enoughRegex = new RegExp("(?=.{8,}).*", "g");
        var pwd = document.getElementById("password");
        if (pwd.value.length == 0) {
            strength.innerHTML = 'Type Password';
        } else if (false == enoughRegex.test(pwd.value)) {
            strength.innerHTML = 'More Characters';
        } else if (strongRegex.test(pwd.value)) {
            strength.innerHTML = '<span style="color:green">Strong!</span>';
        } else if (mediumRegex.test(pwd.value)) {
            strength.innerHTML = '<span style="color:orange">Medium!</span>';
        } else {
            strength.innerHTML = '<span style="color:red">Weak!</span>';
        }
    }
</script>
<input name="password" id="password" type="text" size="15" maxlength="100" onkeyup="return passwordChanged();" />
<span id="strength">Type Password</span>

<script language="javascript">
    function passwordChanged() {
        var strength = document.getElementById('strength');
        var strongRegex = new RegExp("^(?=.{14,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
        var mediumRegex = new RegExp("^(?=.{10,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
        var enoughRegex = new RegExp("(?=.{8,}).*", "g");
        var pwd = document.getElementById("password");
        if (pwd.value.length == 0) {
            strength.innerHTML = 'Type Password';
        } else if (false == enoughRegex.test(pwd.value)) {
            strength.innerHTML = 'More Characters';
        } else if (strongRegex.test(pwd.value)) {
            strength.innerHTML = '<span style="color:green">Strong!</span>';
        } else if (mediumRegex.test(pwd.value)) {
            strength.innerHTML = '<span style="color:orange">Medium!</span>';
        } else {
            strength.innerHTML = '<span style="color:red">Weak!</span>';
        }
    }
</script>
<input name="password" id="password" type="text" size="15" maxlength="100" onkeyup="return passwordChanged();" />
<span id="strength">Type Password</span>

Mật khẩu rất quan trọng trong bảo mật ứng dụng. Mọi người đều cần một mật khẩu mạnh để bảo mật hệ thống và tài khoản của họ. Trong hướng dẫn này, chúng tôi sẽ thảo luận về cách đảm bảo rằng người dùng cuối chọn mật khẩu đủ mạnh để bảo mật tài khoản của họ bằng cách sử dụng các biểu thức thông thường trong JavaScript.

Điều kiện tiên quyết

Một sự hiểu biết cơ bản về HTML, CSS và JavaScript sẽ được yêu cầu theo dõi cùng với hướng dẫn này.

Lớp biểu thức chính quy

Biểu thức chính quy là các mẫu được sử dụng để phù hợp với kết hợp ký tự trong chuỗi. Trong JavaScript, các biểu thức chính quy cũng là đối tượng.

Regex cũng được ký hiệu là

    let check = new RegExp('vet');

Chúng có thể được xây dựng bằng cách sử dụng:

• Biểu thức thông thường theo nghĩa đen trong đó mô hình được bao quanh giữa hai dấu gạch chéo.

• Chức năng tạo hàm của lớp

      let check = new RegExp('vet');
  

  0 và bằng cách truyền một chuỗi phải được kiểm tra.

    let check = new RegExp('vet');

Chúng tôi sử dụng chức năng Constructor khi mẫu tiếp tục thay đổi hoặc nếu chúng tôi lấy nó từ một nguồn khác, chẳng hạn như đầu vào của người dùng. Vì lý do này, chúng tôi sẽ sử dụng chức năng Constructor vì chúng tôi sẽ nhận được mật khẩu từ người dùng.

Mô hình

Kiểm tra X 0 trở lên

Regex để kiểm tra sức mạnh mật khẩu

• Chúng tôi sẽ kiểm tra sức mạnh của mật khẩu mà người dùng nhập dựa trên các quy tắc sau:

      let check = new RegExp('vet');
  

  1).

• Mật khẩu dài ít nhất 8 ký tự (

      let check = new RegExp('vet');
  

  2).

• Mật khẩu có ít nhất một chữ cái chữ hoa (

      let check = new RegExp('vet');
  

  3).

• Mật khẩu có ít nhất một chữ cái viết thường (

      let check = new RegExp('vet');
  

  4).

• Mật khẩu có ít nhất một chữ số (

      let check = new RegExp('vet');
  

  5).

Mật khẩu có ít nhất một ký tự đặc biệt (

Lưu ý: Hai nhóm dấu ngoặc đơn

    let check = new RegExp('vet');

    let check = new RegExp('vet');

    let check = new RegExp('vet');

Chúng tôi sẽ có ba cấp độ để biểu thị mức độ an toàn của mật khẩu.

1. Họ đang:

Mạnh mẽ: Mật khẩu phải đáp ứng tất cả các yêu cầu.

1.     let check = new RegExp('vet');
   

   3), một chữ cái viết hoa (

       let check = new RegExp('vet');
   

   2), một chữ số (

       let check = new RegExp('vet');
   

   4) ký tự dài (________ 11).

   <script language="javascript">
       function passwordChanged() {
           var strength = document.getElementById('strength');
           var strongRegex = new RegExp("^(?=.{14,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
           var mediumRegex = new RegExp("^(?=.{10,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
           var enoughRegex = new RegExp("(?=.{8,}).*", "g");
           var pwd = document.getElementById("password");
           if (pwd.value.length == 0) {
               strength.innerHTML = 'Type Password';
           } else if (false == enoughRegex.test(pwd.value)) {
               strength.innerHTML = 'More Characters';
           } else if (strongRegex.test(pwd.value)) {
               strength.innerHTML = '<span style="color:green">Strong!</span>';
           } else if (mediumRegex.test(pwd.value)) {
               strength.innerHTML = '<span style="color:orange">Medium!</span>';
           } else {
               strength.innerHTML = '<span style="color:red">Weak!</span>';
           }
       }
   </script>
   <input name="password" id="password" type="text" size="15" maxlength="100" onkeyup="return passwordChanged();" />
   <span id="strength">Type Password</span>

   5

Trung bình: Nếu mật khẩu dài ít nhất sáu ký tự và đáp ứng tất cả các yêu cầu khác hoặc không có chữ số nhưng đáp ứng các yêu cầu còn lại.

1. <script language="javascript">
       function passwordChanged() {
           var strength = document.getElementById('strength');
           var strongRegex = new RegExp("^(?=.{14,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
           var mediumRegex = new RegExp("^(?=.{10,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
           var enoughRegex = new RegExp("(?=.{8,}).*", "g");
           var pwd = document.getElementById("password");
           if (pwd.value.length == 0) {
               strength.innerHTML = 'Type Password';
           } else if (false == enoughRegex.test(pwd.value)) {
               strength.innerHTML = 'More Characters';
           } else if (strongRegex.test(pwd.value)) {
               strength.innerHTML = '<span style="color:green">Strong!</span>';
           } else if (mediumRegex.test(pwd.value)) {
               strength.innerHTML = '<span style="color:orange">Medium!</span>';
           } else {
               strength.innerHTML = '<span style="color:red">Weak!</span>';
           }
       }
   </script>
   <input name="password" id="password" type="text" size="15" maxlength="100" onkeyup="return passwordChanged();" />
   <span id="strength">Type Password</span>

   54 cho thấy chúng tôi đang kiểm tra ít nhất sáu ký tự. Nó cũng có

       let check = new RegExp('vet');
   

   7 để kiểm tra một trong hai điều kiện

   <script language="javascript">
       function passwordChanged() {
           var strength = document.getElementById('strength');
           var strongRegex = new RegExp("^(?=.{14,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
           var mediumRegex = new RegExp("^(?=.{10,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
           var enoughRegex = new RegExp("(?=.{8,}).*", "g");
           var pwd = document.getElementById("password");
           if (pwd.value.length == 0) {
               strength.innerHTML = 'Type Password';
           } else if (false == enoughRegex.test(pwd.value)) {
               strength.innerHTML = 'More Characters';
           } else if (strongRegex.test(pwd.value)) {
               strength.innerHTML = '<span style="color:green">Strong!</span>';
           } else if (mediumRegex.test(pwd.value)) {
               strength.innerHTML = '<span style="color:orange">Medium!</span>';
           } else {
               strength.innerHTML = '<span style="color:red">Weak!</span>';
           }
       }
   </script>
   <input name="password" id="password" type="text" size="15" maxlength="100" onkeyup="return passwordChanged();" />
   <span id="strength">Type Password</span>

   56 hoặc

   <script language="javascript">
       function passwordChanged() {
           var strength = document.getElementById('strength');
           var strongRegex = new RegExp("^(?=.{14,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
           var mediumRegex = new RegExp("^(?=.{10,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
           var enoughRegex = new RegExp("(?=.{8,}).*", "g");
           var pwd = document.getElementById("password");
           if (pwd.value.length == 0) {
               strength.innerHTML = 'Type Password';
           } else if (false == enoughRegex.test(pwd.value)) {
               strength.innerHTML = 'More Characters';
           } else if (strongRegex.test(pwd.value)) {
               strength.innerHTML = '<span style="color:green">Strong!</span>';
           } else if (mediumRegex.test(pwd.value)) {
               strength.innerHTML = '<span style="color:orange">Medium!</span>';
           } else {
               strength.innerHTML = '<span style="color:red">Weak!</span>';
           }
       }
   </script>
   <input name="password" id="password" type="text" size="15" maxlength="100" onkeyup="return passwordChanged();" />
   <span id="strength">Type Password</span>

   57.

       let check = new RegExp('vet');
   

   0

Yếu: Nếu mật khẩu nhập không đáp ứng các yêu cầu cấp độ mạnh hoặc trung bình, thì nó được coi là yếu.

    let check = new RegExp('vet');

• Mã HTML

  <script language="javascript">
      function passwordChanged() {
          var strength = document.getElementById('strength');
          var strongRegex = new RegExp("^(?=.{14,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
          var mediumRegex = new RegExp("^(?=.{10,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
          var enoughRegex = new RegExp("(?=.{8,}).*", "g");
          var pwd = document.getElementById("password");
          if (pwd.value.length == 0) {
              strength.innerHTML = 'Type Password';
          } else if (false == enoughRegex.test(pwd.value)) {
              strength.innerHTML = 'More Characters';
          } else if (strongRegex.test(pwd.value)) {
              strength.innerHTML = '<span style="color:green">Strong!</span>';
          } else if (mediumRegex.test(pwd.value)) {
              strength.innerHTML = '<span style="color:orange">Medium!</span>';
          } else {
              strength.innerHTML = '<span style="color:red">Weak!</span>';
          }
      }
  </script>
  <input name="password" id="password" type="text" size="15" maxlength="100" onkeyup="return passwordChanged();" />
  <span id="strength">Type Password</span>

  58.

• Chúng tôi sẽ sử dụng Bootstrap 5 để tạo kiểu bằng cách thêm liên kết CDN cho bảng kiểu bootstrap và liên kết nó với tệp HTML bằng thẻ

  Chúng tôi sẽ viết các kiểu tùy chỉnh của chúng tôi bằng thẻ

• <script language="javascript">
      function passwordChanged() {
          var strength = document.getElementById('strength');
          var strongRegex = new RegExp("^(?=.{14,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
          var mediumRegex = new RegExp("^(?=.{10,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
          var enoughRegex = new RegExp("(?=.{8,}).*", "g");
          var pwd = document.getElementById("password");
          if (pwd.value.length == 0) {
              strength.innerHTML = 'Type Password';
          } else if (false == enoughRegex.test(pwd.value)) {
              strength.innerHTML = 'More Characters';
          } else if (strongRegex.test(pwd.value)) {
              strength.innerHTML = '<span style="color:green">Strong!</span>';
          } else if (mediumRegex.test(pwd.value)) {
              strength.innerHTML = '<span style="color:orange">Medium!</span>';
          } else {
              strength.innerHTML = '<span style="color:red">Weak!</span>';
          }
      }
  </script>
  <input name="password" id="password" type="text" size="15" maxlength="100" onkeyup="return passwordChanged();" />
  <span id="strength">Type Password</span>

  59. Chúng tôi có hai lớp,

      let check = new RegExp('vet');
  

  00 và

      let check = new RegExp('vet');
  

  01.

      let check = new RegExp('vet');
  

  00 kiểu đầu vào mật khẩu bằng cách cho phép tỷ suất lợi nhuận 5% từ đầu và cũng sắp xếp văn bản được gõ vào nó ở trung tâm.

      let check = new RegExp('vet');
  

  01 làm tương tự cho nhịp và ẩn nó vì chúng tôi chỉ hiển thị nó khi người dùng bắt đầu nhập mật khẩu.
  Trong thẻ

• Yếu tố đầu tiên là một tiêu đề đơn giản (

      let check = new RegExp('vet');
  

  06) với một số kiểu nội tuyến.

• Phần tử thứ hai là một đầu vào mà người dùng sẽ nhập mật khẩu. Chúng tôi đã sử dụng lớp

      let check = new RegExp('vet');
  

  07 từ Bootstrap và lớp tùy chỉnh

      let check = new RegExp('vet');
  

  00 của chúng tôi để tạo kiểu cho phần tử.

• Yếu tố thứ ba là

      let check = new RegExp('vet');
  

  09, nơi cường độ mật khẩu sẽ được dán nhãn là huy hiệu có màu: Màu xanh lá cây cho mạnh mẽ, xanh dương cho trung bình và màu đỏ cho yếu.

Mã JavaScript

Hãy để tạo ra năm biến:

1.     let check = new RegExp('vet');
   

   10: Để tham khảo thời gian chờ trước khi gọi lại.

2.     let check = new RegExp('vet');
   

   11: Đối với đầu vào nơi mật khẩu sẽ được nhập.

3.     let check = new RegExp('vet');
   

   12: Để lưu trữ nhịp được sử dụng để hiển thị cường độ của mật khẩu (chúng ta có thể truy cập bằng ID phần tử DOM).

4.     let check = new RegExp('vet');
   

   13: Để lưu trữ các điều kiện Regex.

5.     let check = new RegExp('vet');
   

   14: Cũng được sử dụng để lưu trữ các điều kiện Regex.

    let check = new RegExp('vet');

Hãy để tạo ra một hàm gọi là

    let check = new RegExp('vet');

    let check = new RegExp('vet');

    let check = new RegExp('vet');

    let check = new RegExp('vet');

Sau đó, hãy để Lừa đặt màu nền (

    let check = new RegExp('vet');

    let check = new RegExp('vet');

    let check = new RegExp('vet');

Hãy để thêm một trình nghe sự kiện đầu vào vào đầu vào

    let check = new RegExp('vet');

    let check = new RegExp('vet');

Chúng ta nên xóa thời gian chờ trước đó nếu có bất kỳ. Khi các sự kiện xảy ra gần nhau hơn thời gian chờ của chúng tôi, thời gian chờ từ sự kiện đầu vào trước sẽ bị hủy.

    let check = new RegExp('vet');

Mã JavaScript đầy đủ

Thay vì viết nội tuyến JavaScript với tệp HTML, chúng tôi sẽ tạo một tệp JavaScript mới, viết mã sau và sau đó liên kết nó với HTML bằng thẻ tập lệnh như

    let check = new RegExp('vet');

    let check = new RegExp('vet');

Sự kết luận

Bạn đã học cách sử dụng JavaScript Regex để tạo trình kiểm tra mật khẩu ba cấp. Bạn có thể xây dựng trên ví dụ bằng cách thực hiện nhiều cấp độ hơn như quá mạnh và quá yếu.

Để tìm hiểu thêm về JavaScript Regex, hãy đọc các tài liệu MDN.

Cảm ơn vì đã đọc!

Đóng góp đánh giá ngang hàng của: Mohan Raj