Xác thực là một phương pháp để xác thực người dùng. Nó được sử dụng trong tất cả các Công nghệ Web như và . Nhưng hôm nay chúng ta sẽ tập trung vào Xác thực trong Angular JS theo thứ tự sau:
Xác thực biểu mẫu là gì?
Xác thực biểu mẫu là một kỹ thuật mà chúng ta có thể xác thực biểu mẫu HTML. Hãy lấy một ví dụ đơn giản để giả sử một người dùng có biểu mẫu HTML và biểu mẫu HTML đó có các trường khác nhau, trường này được xác thực bởi trình xác thực biểu mẫu khi chúng ta muốn xác thực biểu mẫu, chúng ta chỉ cần kiểm tra giá trị của trường cụ thể bằng biểu thức trình xác thực .
Nếu biểu thức chính quy và giá trị trường giống nhau thì chúng ta có thể nói rằng biểu mẫu của chúng ta đã được xác thực. Trong biểu mẫu HTML, có nhiều loại xác thực khác nhau như email, bắt buộc, tối thiểu, tối đa, mật khẩu, v.v.
Xác thực biểu mẫu trong Angular JS
Hãy nói về cách chúng ta có thể xác thực một biểu mẫu trong JS góc cạnh. Angular JS cung cấp nhiều loại thuộc tính xác thực biểu mẫu mà chúng ta có thể sử dụng để xác thực biểu mẫu hoặc lấy dữ liệu từ biểu mẫu.
$ hợp lệ : Thuộc tính này cho biết trường có hợp lệ hay không bằng cách áp dụng quy tắc thích hợp cho trường đó.
$ không hợp lệ : Như tên nói không hợp lệ, ô này thời tiết trường không hợp lệ hoặc không dựa trên quy tắc thích hợp về điều đó.
$ nguyên sơ : Nó sẽ trả về true trong trường đầu vào biểu mẫu không được sử dụng.
$ bẩn thỉu : Nó sẽ trả về true trong trường đầu vào biểu mẫu được sử dụng.
$ cảm động : BooleanTrue nếu đầu vào bị mờ.
Để truy cập biểu mẫu: .
Để truy cập đầu vào: ..
Bây giờ, hãy giải thích xác thực biểu mẫu trong JS góc cạnh bằng một ví dụ để trước tiên chúng ta tạo hai tệp, một tệp là app.js và tệp khác là index.html. Tệp index.htm của chúng tôi chứa một biểu mẫu HTML đơn giản có xác thực theo góc và tệp app.js của chúng tôi chứa mã phụ trợ để xử lý xác thực biểu mẫu trên trang index.html.
Cácindex.htmlmẫu nội dung trang vớivô hiệutài sản và chính xác nghĩa là gì?
Thuộc tính novalidate trong thẻ biểu mẫu cho HTML biết rằng chúng tôi có thể sử dụng xác thực biểu mẫu tùy chỉnh của mình. Nếu chúng tôi không cung cấp thuộc tính novalidate thì và biểu mẫu HTML sẽ xác thực bằng cách sử dụng các thuộc tính xác thực biểu mẫu mặc định HTML5.
Các bước trong xác thực biểu mẫu
Trong biểu mẫu của chúng tôi, chúng tôi đã tạo 6 trường trong biểu mẫu của chúng tôi, đó là họ, tên, email, điện thoại, mật khẩu và tin nhắn.
Đầu tiên, chúng tôi thêm trình xác thực trường bắt buộc, trình xác thực này cho người dùng biết rằng một trường cụ thể là bắt buộc.
Tiếp theo là trường email nếu người dùng không cung cấp bất kỳ email hợp lệ nào thì trình xác thực email của chúng tôi sẽ đưa ra lỗi xác thực email.
Chúng tôi đặt độ dài tối thiểu và tối đa trong xác thực mật khẩu của mình, độ dài tối thiểu là 5 và độ dài tối đa là 8 để người dùng có thể cung cấp mật khẩu hợp lệ từ 5 đến 8 ký tự.
Cuối cùng, chúng tôi đặt điện thoại và các trường tin nhắn được yêu cầu và cụ thể là áp dụng xác thực số trên điện thoại đã nộp.
Mã xác thực biểu mẫu trong Angular JS
index.html
Ví dụ về phạm vi góc Tên họ
Nộp này là bắt buộc
Họ
Nộp này là bắt buộc
E-mail
Nộp này là bắt buộc
Không phải là một email hợp lệ
Điện thoại
Nộp này là bắt buộc
Đây không phải là điện thoại hợp lệ
Mật khẩu
Nộp này là bắt buộc
Mật khẩu từ 5 đến 8 ký tự
Thông điệp
Nộp này là bắt buộc
Gửi đi
app.js
var app = angle.module ('ngValidApp', []) app.controller ('ngValidController', function ($ scope) {})Hãy nói về một số chỉ thị xác thực được sử dụng trong biểu mẫu:
c ++ sắp xếp một mảng
- ng-bắt buộc : Để cung cấp trường bắt buộc
- ng-show : Để hiển thị thông báo lỗi dựa trên điều kiện (kiểm tra các thuộc tính xác thực)
- của minlength : Để cung cấp độ dài tối thiểu
- ng-maxlength : Để cung cấp độ dài tối đa
- của mô hình : Để phù hợp với một mẫu cụ thể
- ng-model : Liên kết trường với các thuộc tính xác thực như $ error, $ valid, v.v.
Với điều này, chúng ta sẽ kết thúc bài viết Xác thực trong Angular JS này. Tôi hy vọng bạn đã hiểu về những điều khác nhau cần được xem xét để xác thực biểu mẫu trong Angular JS.
Nếu bạn muốn tìm hiểu thêm về khung công tác Angular, hãy xem đi kèm với đào tạo trực tiếp do người hướng dẫn và trải nghiệm dự án thực tế. Khóa đào tạo này sẽ giúp bạn hiểu sâu về Angular và giúp bạn thành thạo về chủ đề này.
Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần bình luận của bài viết này và Chúng tôi sẽ liên hệ lại với bạn.