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

Question

Nội dung chính Show

1. Kiểm tra tên người dùng:
2. Kiểm tra mật khẩu:
3. Kiểm tra email:
4. Kiểm tra địa chỉ IPv4:
Kết luận:
Phần kết luận

Đã đăng vào thg 10 21, 2019 1:17 CH 3 phút đọc 3 phút đọc

Biểu thức chính quy (hay regex) là một công cụ mạnh mẽ mà mỗi nhà phát triển nên biết. Nó có thể khớp với một chuỗi các ký tự dựa trên các thông số rất phức tạp mà có thể giúp bạn tiết kiệm rất nhiều thời gian khi xây dựng các trang web. Dưới đây là tập hợp một vài regex hữu ích mà mình sưu tập được.

1. Kiểm tra tên người dùng:

var regex = /^[a-z0-9_-]{3,16}$/

Mô tả:

Tên sẽ bắt đầu bởi bất kỳ chữ cái viết thường (a-z), số (0-9), dấu gạch dưới hoặc dấu gạch nối. Tiếp theo, {3,16} đảm bảo có ít nhất 3 trong số các ký tự đó, nhưng không quá 16.

2. Kiểm tra mật khẩu:

Đối với mật khẩu tùy vào yêu cầu và mức độ chặt chẽ mà có nhiều regex khác nhau. Một vài đoạn regex dành cho mật khẩu tiêu biểu dưới đây.- Tối thiểu tám ký tự, ít nhất một chữ cái và một số:
- Tối thiểu tám ký tự, ít nhất một chữ cái và một số:

"^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"

-Tối thiểu tám ký tự, ít nhất một chữ cái, một số và một ký tự đặc biệt:

"^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$"

-Tối thiểu tám ký tự, ít nhất một chữ cái viết hoa, một chữ cái viết thường và một số:

"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"

-Tối thiểu tám ký tự, ít nhất một chữ cái viết hoa, một chữ cái viết thường, một số và một ký tự đặc biệt:

"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"

-Tối thiểu tám và tối đa 10 ký tự, ít nhất một chữ cái viết hoa, một chữ cái viết thường, một số và một ký tự đặc biệt:

"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,10}$"

3. Kiểm tra email:

Trong việc kiểm tra đúng định dạng của một địa chỉ mail phải tuân thủ 6 quy tắc sau đây:

Phải có ký tự @
Ký tự @ không nằm ở vị trí đầu
Phải có ít nhất một dấu . trong địa chỉ mail
Phải có ít nhất 1 ký tự giữa @ và dấu . cuối cùng
Phải có ít nhất một ký tự sau dấu . cuối cùng
Không có khoảng trắng trong địa chỉ mail Regex để validate email:
Regex để validate email:

var re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

4. Kiểm tra địa chỉ IPv4:

^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$

Kết luận:

Trên đây chỉ là một vài các regex tiêu biểu hay dùng mà mình muốn giới thiệu. Tùy vào yêu cầu validate mà bạn có thể biến đổi regex sao cho phù hợp hơn. Ngoài ra bạn có thể check regex online tại: https://regex101.com

Tham khảo

https://code.tutsplus.com/tutorials/8-regular-expressions-you-should-know--net-6149
https://stackoverflow.com

Gần đây, một trong những người theo dõi Twitter của tôi đã hỏi tôi làm thế nào họ có thể xác thực độ mạnh của mật khẩu bằng cách sử dụng các biểu thức thông thường (RegEx) trong mã của họ.

Biểu thức chính quy qua Wikipedia :

Một chuỗi các ký tự tạo thành một mẫu tìm kiếm, chủ yếu được sử dụng để khớp mẫu với các chuỗi hoặc khớp chuỗi.

RegEx là tốt vì bạn có thể hoàn thành rất nhiều với rất ít. Trong trường hợp này, chúng tôi sẽ kiểm tra các khía cạnh khác nhau của chuỗi và xem liệu nó có đáp ứng yêu cầu của chúng tôi không, là mật khẩu mạnh hay trung bình.

Trong ví dụ này, tôi sẽ sử dụng hỗn hợp AngularJS và vanilla JavaScript. Về cơ bản, JavaScript sẽ thực hiện tất cả các công việc nặng và mã AngularJS sẽ chịu trách nhiệm ràng buộc tất cả vào màn hình.

Để hiển thị độ mạnh mật khẩu cho người dùng, chúng tôi sẽ sử dụng một hình chữ nhật có chứa màu. Chúng ta sẽ nói rằng một hình chữ nhật màu đỏ chứa một mật khẩu yếu, trung bình màu cam và mật khẩu mạnh màu xanh lá cây. HTML đằng sau này sẽ trông giống như sau:

<html>
    <body ng-app="myapp">
        <div ng-controller="PasswordController">
            <div style="float: left; width: 100px">
                <input type="text" ng-model="password" style="width: 100px; height: 25px">
            </div>
            <div ng-style="passwordStrength"></div>
        </div>
    </body>
</html>

Đoạn mã trên có một hộp đầu vào và một

"^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"

3thẻ hình chữ nhật . Tuy nhiên, có một vài đoạn mã AngularJS mà chúng ta sẽ thấy trong giây lát.

Các

"^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"

4biến mà bạn nhìn thấy trong

"^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"

5thẻ chứa tất cả các thông tin phong cách cho hình chữ nhật sức mạnh. Thông tin về phong cách chúng tôi sẽ sử dụng như sau:

$scope.passwordStrength = {
    "float": "left",
    "width": "100px",
    "height": "25px",
    "margin-left": "5px"
};

Di chuyển ra ngoài những thứ AngularJS cơ bản, chúng ta hãy đi xuống những thứ tốt. Chúng tôi sẽ sử dụng hai chuỗi xác thực RegEx khác nhau. Một chuỗi sẽ đại diện cho những gì cần thiết để tạo mật khẩu mạnh và chuỗi còn lại sẽ đại diện cho những gì cần thiết để tạo mật khẩu cường độ trung bình. Nếu không có biểu thức nào được thỏa mãn, chúng tôi sẽ cho rằng nó có độ bền kém.

"^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"

0

Ở trên bạn có thể thấy biểu thức để xác nhận mật khẩu mạnh. Hãy phá vỡ những gì nó đang làm.

RegEx	Sự miêu tả
^	Chuỗi mật khẩu sẽ bắt đầu theo cách này.
(? =. * [az])	Chuỗi phải chứa ít nhất 1 ký tự chữ cái viết thường.
(? =. * [AZ])	Chuỗi phải chứa ít nhất 1 ký tự chữ cái viết hoa.
(? =. * [0-9])	Chuỗi phải chứa ít nhất 1 ký tự số.
(? =. * [! @ # \ $% \ ^ & \ *])	Chuỗi phải chứa ít nhất một ký tự đặc biệt, nhưng chúng tôi đang thoát các ký tự RegEx dành riêng để tránh xung đột.
(? =. {8,})	Chuỗi phải có tám ký tự hoặc dài hơn.

Điều đó không tệ lắm! Vậy làm thế nào về trình xác nhận sức mạnh trung bình của chúng tôi? Có ít độ chính xác trong cái này, do đó làm cho nó cần thiết để tạo ra một biểu thức chính quy phức tạp hơn.

"^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"

1

Biểu thức gần giống với điều kiện mạnh, ngoại trừ lần này chúng tôi bao gồm một hoặc điều kiện. Về cơ bản, chúng tôi muốn gắn nhãn mật khẩu là có độ mạnh trung bình nếu nó chứa sáu ký tự trở lên và có ít nhất một ký tự chữ thường và một chữ cái viết hoa hoặc có ít nhất một chữ thường và một ký tự số hoặc có ít nhất một chữ hoa và một ký tự số. Chúng tôi đã chọn để lại các nhân vật đặc biệt trong số này.hoặc điều kiện. Về cơ bản, chúng tôi muốn gắn nhãn mật khẩu là có độ mạnh trung bình nếu nó chứa sáu ký tự trở lên và có ít nhất một ký tự chữ thường và một chữ cái viết hoa hoặc có ít nhất một chữ thường và một ký tự số hoặc có ít nhất một chữ hoa và một ký tự số. Chúng tôi đã chọn để lại các nhân vật đặc biệt trong số này.

Cuối cùng, chúng ta cần một cách để theo dõi đầu vào trên trường đầu vào. Điều này sẽ được xử lý thông qua AngularJS bằng cách sử dụng lệnh ngChange . Bằng cách đặt

"^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"

6vào thẻ đầu vào, nó sẽ gọi

"^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"

7phương thức mỗi khi xảy ra đột quỵ phím. Đó là khi chúng tôi gọi trình xác nhận RegEx của chúng tôi.

Đây là mã đầy đủ nếu bạn muốn xem tất cả được đặt cùng nhau:

"^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"

2

Phần kết luận

Các biểu thức thông thường khá mạnh mẽ và nếu bạn có thể thành thạo chúng, chúng sẽ giúp bạn tiết kiệm rất nhiều thời gian mã hóa. Thay vì phân tích cú pháp thông qua chuỗi bằng cách sử dụng mã thông báo hoặc một số điều vô nghĩa khác, chúng tôi đã quản lý để xác thực chuỗi của chúng tôi bằng một dòng mã.

9 hữu ích 0 bình luận 19k xem chia sẻ 0 bình luận 19k xem chia sẻ