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

Question

Tôi đang thực hiện một số nghiên cứu về việc tìm một ví dụ điển hình về công cụ kiểm tra Độ bền mật khẩu sử dụng JavaScript và Biểu thức chính quy (Regex). Trong ứng dụng tại nơi làm việc của tôi, chúng tôi thực hiện một bài đăng lại để xác minh độ mạnh của mật khẩu và nó khá bất tiện cho người dùng của chúng tôi.JavaScript và Biểu thức chính quy (Regex). Trong ứng dụng tại nơi làm việc của tôi, chúng tôi thực hiện một bài đăng lại để xác minh độ mạnh của mật khẩu và nó khá bất tiện cho người dùng của chúng tôi.

Nội dung chính Show

Regex là gì?
Gõ mật khẩu
Đây là mã
Tăng cường yêu cầu mật khẩu của bạn
Điều kiện tiên quyết
Lớp biểu thức chính quy
Regex để kiểm tra sức mạnh mật khẩu
Mã JavaScript
Mã JavaScript đầy đủ

Regex là gì?

Biểu thức chính quy là một chuỗi các ký tự xác định một mẫu tìm kiếm. Thông thường, các mẫu như vậy được sử dụng bởi các thuật toán tìm kiếm chuỗi cho tìm or tìm và thay thế hoạt động trên chuỗi hoặc để xác nhận đầu vào. tìm or tìm và thay thế hoạt động trên chuỗi hoặc để xác nhận đầu vào.

Bài viết này chắc chắn không dạy bạn biểu thức chính quy. Chỉ cần biết rằng khả năng sử dụng Biểu thức chính quy sẽ hoàn toàn đơn giản hóa việc phát triển của bạn khi bạn tìm kiếm các mẫu trong văn bản. Điều quan trọng cần lưu ý là hầu hết các ngôn ngữ phát triển đã tối ưu hóa việc sử dụng biểu thức chính quy… vì vậy thay vì phân tích cú pháp và tìm kiếm các chuỗi theo từng bước, Regex thường nhanh hơn nhiều ở cả phía máy chủ và phía máy khách.

Tôi đã tìm kiếm trên web khá nhiều trước khi tìm thấy một ví dụ một số Biểu thức chính quy tuyệt vời tìm kiếm sự kết hợp của độ dài, ký tự và ký hiệu. Tuy nhiên, mã hơi thừa đối với sở thích của tôi và phù hợp với .NET. Vì vậy, tôi đã đơn giản hóa mã và đặt nó trong JavaScript. Điều này làm cho nó xác thực độ mạnh của mật khẩu trong thời gian thực trên trình duyệt của khách hàng trước khi đăng lại… và cung cấp một số phản hồi cho người dùng về độ mạnh của mật khẩu.

Gõ mật khẩu

Với mỗi hành trình của bàn phím, mật khẩu được kiểm tra dựa trên biểu thức chính quy và sau đó phản hồi được cung cấp cho người dùng trong một khoảng thời gian bên dưới nó.

Nhập mật khẩu

Đây là mã

Mô hình Biểu thức chính quy thực hiện một công việc tuyệt vời là giảm thiểu độ dài của mã:Biểu thức chính quy thực hiện một công việc tuyệt vời là giảm thiểu độ dài của mã:

Các ký tự khác - Nếu độ dài dưới 8 ký tự. - Nếu độ dài dưới 8 ký tự.
Yếu - Nếu độ dài dưới 10 ký tự và không chứa tổ hợp ký hiệu, chữ hoa, văn bản. - Nếu độ dài dưới 10 ký tự và không chứa tổ hợp ký hiệu, chữ hoa, văn bản.
Trung bình - Nếu độ dài từ 10 ký tự trở lên và có sự kết hợp của các ký hiệu, chữ hoa, chữ. - Nếu độ dài từ 10 ký tự trở lên và có sự kết hợp của các ký hiệu, chữ hoa, chữ.
Mạnh – Nếu độ dài từ 14 ký tự trở lên và có sự kết hợp của các ký hiệu, chữ viết hoa, văn bản. – Nếu độ dài từ 14 ký tự trở lên và có sự kết hợp của các ký hiệu, chữ viết hoa, văn bản.



Type Password

Tăng cường yêu cầu mật khẩu của bạn

Điều cần thiết là bạn không chỉ xác nhận cấu trúc mật khẩu trong Javascript của mình. Điều này sẽ cho phép bất kỳ ai có công cụ phát triển trình duyệt bỏ qua tập lệnh và sử dụng bất kỳ mật khẩu nào họ muốn. Bạn LUÔN LUÔN nên sử dụng kiểm tra phía máy chủ để xác thực độ mạnh của mật khẩu trước khi lưu trữ nó trong nền tảng của bạn.

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à RegExp.

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

Nhân vật	Nghĩa
\ d	Kiểm tra một trận đấu chữ số, ví dụ: nó trả về 2 trong U2 U2.
\ W	Kiểm tra một ký tự đặc biệt, ví dụ: trả về % trong 2 %.
x {n,}	Kiểm tra ít nhất N Điều khoản N từ thuật ngữ trước x, ví dụ: o {2,} không trả lại bất cứ điều gì trong Boy Boy, nhưng trả về tất cả hệ điều hành trong GOOOOOAL !.
XIY	Khớp với x hoặc y trong chuỗi
[^Vet]	Một bộ phủ định. Không kiểm tra bất cứ điều gì trong phạm vi IE không kiểm tra bác sĩ thú y trong trò chơi thú y
[A-ASA-Z0-9]	Kiểm tra tất cả các ký tự chữ và số
[A-Z]	Kiểm tra các chữ cái viết thường
[A-Z]	Kiểm tra các chữ cái viết hoa
X (? = Y)	Trả về x khi và chỉ khi nó được theo sau bởi y
.	Kiểm tra bất kỳ ký tự nào ngoại trừ các đầu mối dòng
x*	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:

Mật khẩu dài ít nhất 8 ký tự (
```
    let check = new RegExp('vet');
```
1).
Mật khẩu có ít nhất một chữ cái chữ hoa (
```
    let check = new RegExp('vet');
```
2).
Mật khẩu có ít nhất một chữ cái viết thường (
```
    let check = new RegExp('vet');
```
3).
Mật khẩu có ít nhất một chữ số (
```
    let check = new RegExp('vet');
```
4).
Mật khẩu có ít nhất một ký tự đặc biệt (
```
    let check = new RegExp('vet');
```
5).

Lưu ý: Hai nhóm dấu ngoặc đơn
    let check = new RegExp('vet');
6 giống như kiểm tra cả X và Y trong khi hai nhóm dấu ngoặc đơn với
    let check = new RegExp('vet');
7 giữa chúng
    let check = new RegExp('vet');
8 giống như kiểm tra x hoặc y như trong bảng trên.

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

Họ đang:

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

Sử dụng các số liệu ở trên, chúng ta sẽ tạo ra một mật khẩu cấp độ mạnh có ít nhất một chữ cái viết thường (

    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).

    (?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})

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

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.

Mã này giống như ở cấp độ mạnh chỉ là

    (?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})

4 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

    (?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})

6 hoặc

    (?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})

7.

    ((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))

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.

Mã HTML

<html>
<head>
    
    <link href= "https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    
    <style>
        .passwordInput{
            margin-top: 5%; 
            text-align :center;
        }

        .displayBadge{
            margin-top: 5%; 
            display: none; 
            text-align :center;
        }
    style>
head>
<body>
    <div class="d-flex text-danger justify-content-center">
        <h4 style="margin-top: 10%; text-align :center">
            Password Strength Checker
        h4>
        <br>
        <input type="password" placeholder="Type your password" id="PassEntry" class="form-control passwordInput">
        <br>
        <span id="StrengthDisp" class="badge displayBadge">Weakspan>
        <br>
    div>     
body>
html>

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ẻ
```
    (?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})
```
8.

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

    (?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})

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

    ((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))

0 và

    ((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))

1.

    ((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))

0 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.

    ((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))

1 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ẻ

    ((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))

4, chúng tôi có phần tử

    ((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))

5 với ba phần tử.

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

    ((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))

6) 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

    ((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))

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

    ((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))

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

Yếu tố thứ ba là
```
    ((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))
```
9, 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:

<html>
<head>
    
    <link href= "https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    
    <style>
        .passwordInput{
            margin-top: 5%; 
            text-align :center;
        }

        .displayBadge{
            margin-top: 5%; 
            display: none; 
            text-align :center;
        }
    style>
head>
<body>
    <div class="d-flex text-danger justify-content-center">
        <h4 style="margin-top: 10%; text-align :center">
            Password Strength Checker
        h4>
        <br>
        <input type="password" placeholder="Type your password" id="PassEntry" class="form-control passwordInput">
        <br>
        <span id="StrengthDisp" class="badge displayBadge">Weakspan>
        <br>
    div>     
body>
html>

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

<html>
<head>
    
    <link href= "https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    
    <style>
        .passwordInput{
            margin-top: 5%; 
            text-align :center;
        }

        .displayBadge{
            margin-top: 5%; 
            display: none; 
            text-align :center;
        }
    style>
head>
<body>
    <div class="d-flex text-danger justify-content-center">
        <h4 style="margin-top: 10%; text-align :center">
            Password Strength Checker
        h4>
        <br>
        <input type="password" placeholder="Type your password" id="PassEntry" class="form-control passwordInput">
        <br>
        <span id="StrengthDisp" class="badge displayBadge">Weakspan>
        <br>
    div>     
body>
html>

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

<html>
<head>
    
    <link href= "https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    
    <style>
        .passwordInput{
            margin-top: 5%; 
            text-align :center;
        }

        .displayBadge{
            margin-top: 5%; 
            display: none; 
            text-align :center;
        }
    style>
head>
<body>
    <div class="d-flex text-danger justify-content-center">
        <h4 style="margin-top: 10%; text-align :center">
            Password Strength Checker
        h4>
        <br>
        <input type="password" placeholder="Type your password" id="PassEntry" class="form-control passwordInput">
        <br>
        <span id="StrengthDisp" class="badge displayBadge">Weakspan>
        <br>
    div>     
body>
html>

2: Để 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).

<html>
<head>
    
    <link href= "https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    
    <style>
        .passwordInput{
            margin-top: 5%; 
            text-align :center;
        }

        .displayBadge{
            margin-top: 5%; 
            display: none; 
            text-align :center;
        }
    style>
head>
<body>
    <div class="d-flex text-danger justify-content-center">
        <h4 style="margin-top: 10%; text-align :center">
            Password Strength Checker
        h4>
        <br>
        <input type="password" placeholder="Type your password" id="PassEntry" class="form-control passwordInput">
        <br>
        <span id="StrengthDisp" class="badge displayBadge">Weakspan>
        <br>
    div>     
body>
html>

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

<html>
<head>
    
    <link href= "https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    
    <style>
        .passwordInput{
            margin-top: 5%; 
            text-align :center;
        }

        .displayBadge{
            margin-top: 5%; 
            display: none; 
            text-align :center;
        }
    style>
head>
<body>
    <div class="d-flex text-danger justify-content-center">
        <h4 style="margin-top: 10%; text-align :center">
            Password Strength Checker
        h4>
        <br>
        <input type="password" placeholder="Type your password" id="PassEntry" class="form-control passwordInput">
        <br>
        <span id="StrengthDisp" class="badge displayBadge">Weakspan>
        <br>
    div>     
body>
html>

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

let timeout;
let password = document.getElementById('PassEntry');
let strengthBadge = document.getElementById('StrengthDisp');
let strongPassword = new RegExp('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})')
let mediumPassword = new RegExp('((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))')

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

<html>
<head>
    
    <link href= "https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    
    <style>
        .passwordInput{
            margin-top: 5%; 
            text-align :center;
        }

        .displayBadge{
            margin-top: 5%; 
            display: none; 
            text-align :center;
        }
    style>
head>
<body>
    <div class="d-flex text-danger justify-content-center">
        <h4 style="margin-top: 10%; text-align :center">
            Password Strength Checker
        h4>
        <br>
        <input type="password" placeholder="Type your password" id="PassEntry" class="form-control passwordInput">
        <br>
        <span id="StrengthDisp" class="badge displayBadge">Weakspan>
        <br>
    div>     
body>
html>

5 trong đó chúng tôi kiểm tra độ bền của mật khẩu bằng cách sử dụng các biểu thức thông thường mà chúng tôi đã viết với phương thức

<html>
<head>
    
    <link href= "https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    
    <style>
        .passwordInput{
            margin-top: 5%; 
            text-align :center;
        }

        .displayBadge{
            margin-top: 5%; 
            display: none; 
            text-align :center;
        }
    style>
head>
<body>
    <div class="d-flex text-danger justify-content-center">
        <h4 style="margin-top: 10%; text-align :center">
            Password Strength Checker
        h4>
        <br>
        <input type="password" placeholder="Type your password" id="PassEntry" class="form-control passwordInput">
        <br>
        <span id="StrengthDisp" class="badge displayBadge">Weakspan>
        <br>
    div>     
body>
html>

6. Nó trả về

<html>
<head>
    
    <link href= "https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    
    <style>
        .passwordInput{
            margin-top: 5%; 
            text-align :center;
        }

        .displayBadge{
            margin-top: 5%; 
            display: none; 
            text-align :center;
        }
    style>
head>
<body>
    <div class="d-flex text-danger justify-content-center">
        <h4 style="margin-top: 10%; text-align :center">
            Password Strength Checker
        h4>
        <br>
        <input type="password" placeholder="Type your password" id="PassEntry" class="form-control passwordInput">
        <br>
        <span id="StrengthDisp" class="badge displayBadge">Weakspan>
        <br>
    div>     
body>
html>

7 nếu có một trận đấu hoặc

<html>
<head>
    
    <link href= "https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    
    <style>
        .passwordInput{
            margin-top: 5%; 
            text-align :center;
        }

        .displayBadge{
            margin-top: 5%; 
            display: none; 
            text-align :center;
        }
    style>
head>
<body>
    <div class="d-flex text-danger justify-content-center">
        <h4 style="margin-top: 10%; text-align :center">
            Password Strength Checker
        h4>
        <br>
        <input type="password" placeholder="Type your password" id="PassEntry" class="form-control passwordInput">
        <br>
        <span id="StrengthDisp" class="badge displayBadge">Weakspan>
        <br>
    div>     
body>
html>

8 nếu không có khớp.

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

<html>
<head>
    
    <link href= "https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    
    <style>
        .passwordInput{
            margin-top: 5%; 
            text-align :center;
        }

        .displayBadge{
            margin-top: 5%; 
            display: none; 
            text-align :center;
        }
    style>
head>
<body>
    <div class="d-flex text-danger justify-content-center">
        <h4 style="margin-top: 10%; text-align :center">
            Password Strength Checker
        h4>
        <br>
        <input type="password" placeholder="Type your password" id="PassEntry" class="form-control passwordInput">
        <br>
        <span id="StrengthDisp" class="badge displayBadge">Weakspan>
        <br>
    div>     
body>
html>

9) và văn bản của huy hiệu (

let timeout;
let password = document.getElementById('PassEntry');
let strengthBadge = document.getElementById('StrengthDisp');
let strongPassword = new RegExp('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})')
let mediumPassword = new RegExp('((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))')

0) theo kết quả.

function StrengthChecker(PasswordParameter) {
    if(strongPassword.test(PasswordParameter)) {
        strengthBadge.style.backgroundColor = "green";
        strengthBadge.textContent = 'Strong';
    } else if(mediumPassword.test(PasswordParameter)) {
        strengthBadge.style.backgroundColor = 'blue';
        strengthBadge.textContent = 'Medium';
    } else {
        strengthBadge.style.backgroundColor = 'red';
        strengthBadge.textContent = 'Weak';
    }
}

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

<html>
<head>
    
    <link href= "https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    
    <style>
        .passwordInput{
            margin-top: 5%; 
            text-align :center;
        }

        .displayBadge{
            margin-top: 5%; 
            display: none; 
            text-align :center;
        }
    style>
head>
<body>
    <div class="d-flex text-danger justify-content-center">
        <h4 style="margin-top: 10%; text-align :center">
            Password Strength Checker
        h4>
        <br>
        <input type="password" placeholder="Type your password" id="PassEntry" class="form-control passwordInput">
        <br>
        <span id="StrengthDisp" class="badge displayBadge">Weakspan>
        <br>
    div>     
body>
html>

1 và kiểm tra cường độ với chức năng

<html>
<head>
    
    <link href= "https://cdn.jsdelivr.net/npm//dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    
    <style>
        .passwordInput{
            margin-top: 5%; 
            text-align :center;
        }

        .displayBadge{
            margin-top: 5%; 
            display: none; 
            text-align :center;
        }
    style>
head>
<body>
    <div class="d-flex text-danger justify-content-center">
        <h4 style="margin-top: 10%; text-align :center">
            Password Strength Checker
        h4>
        <br>
        <input type="password" placeholder="Type your password" id="PassEntry" class="form-control passwordInput">
        <br>
        <span id="StrengthDisp" class="badge displayBadge">Weakspan>
        <br>
    div>     
body>
html>

5 khi người dùng đã nhập một cái gì đó. Chúng tôi đã thắng cuộc gọi chức năng ngay sau mỗi lần nhấn phím. Khi người dùng gõ nhanh chóng, chúng ta nên đợi cho đến khi xảy ra tạm dừng. Vì vậy, thay vì kiểm tra sức mạnh ngay lập tức, chúng tôi sẽ đặt thời gian chờ.

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.

password.addEventListener("input", () => {
    strengthBadge.style.display = 'block';
    clearTimeout(timeout);
    timeout = setTimeout(() => StrengthChecker(password.value), 500);
    if(password.value.length !== 0) {
        strengthBadge.style.display != 'block';
    } else {
        strengthBadge.style.display = 'none';
    }
});

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 timeout;
let password = document.getElementById('PassEntry');
let strengthBadge = document.getElementById('StrengthDisp');
let strongPassword = new RegExp('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})')
let mediumPassword = new RegExp('((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))')

3.

                               }     }                         }     });

// timeout before a callback is called > let timeout; // traversing the DOM and getting the input and span using their IDs > let password = document.getElementById('PassEntry') let strengthBadge = document.getElementById('StrengthDisp') // The strong and weak password Regex pattern checker > let strongPassword = new RegExp('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{8,})') let mediumPassword = new RegExp('((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,}))|((?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])(?=.{8,}))') function StrengthChecker(PasswordParameter){ // We then change the badge's color and text based on the password strength > if(strongPassword.test(PasswordParameter)) { strengthBadge.style.backgroundColor = "green" strengthBadge.textContent = 'Strong' } else if(mediumPassword.test(PasswordParameter)){ strengthBadge.style.backgroundColor = 'blue' strengthBadge.textContent = 'Medium' } else{ strengthBadge.style.backgroundColor = 'red' strengthBadge.textContent = 'Weak' // Adding an input event listener when a user types to the password input > password.addEventListener("input", () => { //The badge is hidden by default, so we show it > strengthBadge.style.display= 'block' clearTimeout(timeout); //We then call the StrengChecker function as a callback then pass the typed password to it > timeout = setTimeout(() => StrengthChecker(password.value), 500); //Incase a user clears the text, the badge is hidden again > if(password.value.length !== 0){ strengthBadge.style.display != 'block' } else{ strengthBadge.style.display = 'none'

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

programming javascript Password complexity regex Golang regex password Regex password

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

Regex là gì?

Gõ mật khẩu

Đây là mã

Tăng cường yêu cầu mật khẩu của bạn

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

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

Mô hình

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

Mã HTML

Mã JavaScript

Mã JavaScript đầy đủ

Sự kết luận

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội