Xác thực là quá trình đảm bảo rằng dữ liệu là chính xác và đầy đủ.
Trong một ví dụ thực tế, hãy giả sử một trang web yêu cầu hoàn thành biểu mẫu đăng ký trước khi có toàn quyền truy cập vào trang web này. Trang đăng ký sẽ có các trường đầu vào cho tên người dùng, mật khẩu, id email, v.v.
Khi người dùng gửi biểu mẫu, thông thường xác thực sẽ xảy ra đầu tiên trước khi thông tin chi tiết được gửi đến máy chủ. Việc xác nhận này sẽ cố gắng đảm bảo ở mức độ tốt nhất có thể rằng các chi tiết cho các trường đầu vào được nhập theo đúng cách.
Ví dụ: id email luôn phải ở định dạng Địa chỉ email này đang được bảo vệ khỏi spam bots. Bạn cần bật Javascript để xem nó. ; nếu ai đó chỉ nhập tên người dùng trong id email, thì lý tưởng nhất là việc xác thực sẽ không thành công. Vì vậy, xác thực xem xét việc thực hiện các kiểm tra cơ bản này trước khi chi tiết được gửi đến máy chủ để xử lý thêm.
Trong hướng dẫn này, bạn sẽ học-
- Xác thực biểu mẫu bằng HTML5
- Xác thực biểu mẫu bằng cách sử dụng $ dơ bẩn, $ hợp lệ, $ không hợp lệ, $ nguyên sơ
- Xác thực biểu mẫu bằng AngularJS Auto Validate
- Phản hồi của người dùng với các nút Ladda
Xác thực biểu mẫu bằng HTML5
Xác thực biểu mẫu là quá trình xác thực trước thông tin được người dùng nhập vào biểu mẫu web trước khi nó được gửi đến máy chủ. Tốt hơn hết là bạn nên xác thực thông tin từ phía khách hàng. Điều này là do nó làm tăng ít chi phí hơn nếu người dùng phải được trình bày với biểu mẫu một lần nữa nếu thông tin nhập sai.
Hãy xem cách xác thực biểu mẫu có thể được tiến hành trong HTML5.
Trong ví dụ của chúng tôi, chúng tôi sẽ hiển thị một biểu mẫu đăng ký đơn giản cho người dùng, trong đó người dùng cần nhập các chi tiết như tên người dùng, mật khẩu, id email và tuổi.
Biểu mẫu sẽ có các kiểm soát xác thực để đảm bảo rằng người dùng nhập thông tin một cách thích hợp.
Event Registration Guru99 Global Event
Giải thích mã:
- Đối với kiểu nhập văn bản, chúng tôi đang sử dụng thuộc tính "bắt buộc". Điều này có nghĩa là hộp văn bản không được để trống khi biểu mẫu được gửi và một số loại văn bản phải có trong hộp văn bản.
- Loại đầu vào tiếp theo là mật khẩu. Vì kiểu đầu vào được đánh dấu là mật khẩu, nên khi người dùng nhập bất kỳ văn bản nào vào trường, nó sẽ bị che đi.
- Vì loại đầu vào được chỉ định là email, văn bản trong hộp cần phải khớp với mẫu Địa chỉ email này đang được bảo vệ khỏi spam bots. Bạn cần bật Javascript để xem nó. .
- Khi loại nhập liệu được đánh dấu là số, nếu người dùng cố gắng nhập bất kỳ ký tự nào bằng bàn phím hoặc bảng chữ cái, thì ký tự đó sẽ không được nhập vào hộp văn bản.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Để xem xác thực biểu mẫu đang hoạt động, hãy nhấp vào nút Gửi mà không cần nhập bất kỳ thông tin nào trên màn hình.
Sau khi nhấp vào nút gửi, một cửa sổ bật lên sẽ hiển thị lỗi xác thực mà trường cần được điền.
Vì vậy, xác thực cho điều khiển được đánh dấu là bắt buộc, khiến thông báo lỗi được hiển thị nếu người dùng không nhập bất kỳ giá trị nào vào trường văn bản.
Khi người dùng nhập bất kỳ giá trị nào vào điều khiển mật khẩu, bạn sẽ nhận thấy biểu tượng '*' được sử dụng để che dấu các ký tự được nhập.
Sau đó, hãy nhập sai id email và nhấp vào nút gửi. Sau khi nhấp vào nút gửi, một cửa sổ bật lên sẽ xuất hiện hiển thị lỗi xác thực mà trường cần có ký hiệu @.
Vì vậy, việc xác thực điều khiển được đánh dấu là điều khiển email sẽ khiến thông báo lỗi được hiển thị nếu người dùng không nhập id email thích hợp vào trường văn bản.
Cuối cùng, khi bạn cố gắng nhập bất kỳ ký tự nào trong điều khiển văn bản độ tuổi, nó sẽ không được nhập trên màn hình. Điều khiển sẽ chỉ điền một giá trị khi một số được nhập vào điều khiển.
Xác thực biểu mẫu bằng cách sử dụng $ dơ bẩn, $ hợp lệ, $ không hợp lệ, $ nguyên sơ
AngularJS cung cấp các thuộc tính bổ sung của nó để xác thực. AngularJS cung cấp các thuộc tính sau cho các điều khiển cho mục đích xác thực
- $ dirty - Người dùng đã tương tác với điều khiển
- $ hợp lệ - Nội dung trường hợp lệ
- $ không hợp lệ - Nội dung trường không hợp lệ
- $ nguyên sơ - Người dùng chưa tương tác với điều khiển
Dưới đây là các bước cần làm theo để thực hiện xác thực Angular.
Bước 1) Sử dụng thuộc tính no validate khi khai báo biểu mẫu. Thuộc tính này cho HTML5 biết rằng việc xác thực sẽ được thực hiện bởi AngularJS.
Bước 2) Đảm bảo rằng biểu mẫu có tên được xác định cho nó. Lý do của việc này là khi thực hiện xác thực Angular, tên biểu mẫu sẽ được sử dụng.
Bước 3) Đảm bảo mỗi điều khiển cũng có tên được xác định cho nó. Lý do của việc này là khi thực hiện xác thực Angular, tên điều khiển sẽ được sử dụng.
Bước 4) Sử dụng lệnh ng-show để kiểm tra các thuộc tính $ dơ bẩn, $ không hợp lệ và $ hợp lệ cho các điều khiển.
Hãy xem một ví dụ, bao gồm các bước nêu trên.
Trong ví dụ của chúng tôi,
Chúng ta sẽ chỉ có một trường văn bản đơn giản trong đó người dùng cần nhập tên Chủ đề vào hộp văn bản. Nếu điều này không được thực hiện, lỗi xác thực sẽ được kích hoạt và thông báo lỗi sẽ được hiển thị cho người dùng.
Event Registration Guru99 Global Event
Giải thích mã:
- Lưu ý rằng chúng tôi đã đặt tên cho Biểu mẫu là "myForm". Điều này là bắt buộc khi truy cập các điều khiển trên biểu mẫu để xác thực AngularJS.
- Sử dụng thuộc tính "novalidate" để đảm bảo rằng biểu mẫu HTML cho phép AngularJS thực hiện xác thực.
- Chúng tôi đang sử dụng lệnh ng-show để kiểm tra thuộc tính "$ dirty" và "$ invalid". Điều này có nghĩa là nếu hộp văn bản đã được sửa đổi, thì giá trị thuộc tính "$ dirty" sẽ là true. Ngoài ra, trong trường hợp giá trị hộp văn bản là null, thuộc tính "$ không hợp lệ" sẽ trở thành true. Vì vậy, nếu cả hai thuộc tính đều đúng, thì việc xác nhận sẽ không thành công đối với điều khiển. Do đó, nếu cả hai giá trị đều đúng, thì ng-show cũng sẽ trở thành true và điều khiển nhịp với các ký tự màu đỏ sẽ được hiển thị.
- Trong điều này, chúng tôi đang kiểm tra thuộc tính "$ error", thuộc tính này cũng đánh giá là true vì chúng tôi đã đề cập đến điều khiển rằng giá trị nên được nhập cho điều khiển. Trong trường hợp như vậy, khi không có dữ liệu được nhập vào hộp văn bản, điều khiển khoảng cách sẽ hiển thị văn bản "Tên người dùng là bắt buộc".
- Nếu giá trị điều khiển hộp văn bản không hợp lệ, chúng tôi cũng muốn tắt nút gửi để người dùng không thể gửi biểu mẫu. Chúng tôi đang sử dụng thuộc tính "ng-disable" cho điều khiển để thực hiện việc này dựa trên giá trị có điều kiện của thuộc tính "$ dirty" và "$ invalid" của điều khiển.
- Trong bộ điều khiển, chúng tôi chỉ đang đặt giá trị ban đầu của giá trị hộp văn bản thành văn bản 'AngularJS'. Điều này chỉ đang được thực hiện để đặt một số giá trị mặc định cho hộp văn bản khi biểu mẫu được hiển thị lần đầu tiên. Nó giới thiệu tốt hơn về cách xác thực xảy ra cho trường hộp văn bản.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Khi biểu mẫu được hiển thị ban đầu, hộp văn bản sẽ hiển thị giá trị của "AngularJS" và "nút gửi" được bật. Ngay sau khi bạn xóa văn bản khỏi điều khiển, thông báo lỗi xác thực sẽ được bật và nút Gửi bị tắt.
Ảnh chụp màn hình ở trên hiển thị hai điều
- Nút gửi bị tắt
- Không có tên chủ đề trong hộp văn bản Chủ đề. Do đó, nó kích hoạt thông báo lỗi "Tên người dùng là bắt buộc."
Xác thực biểu mẫu bằng AngularJS Auto Validate
Có một cơ sở trong AngularJS để xác thực tất cả các điều khiển trên một biểu mẫu một cách tự động mà không cần phải viết mã tùy chỉnh để xác thực. Điều này có thể được thực hiện bằng cách bao gồm một mô-đun tùy chỉnh được gọi là "jcs-AutoValidate."
Với mô-đun này tại chỗ, bạn không cần đặt bất kỳ mã đặc biệt nào để thực hiện xác thực hoặc hiển thị thông báo lỗi. Tất cả điều này được xử lý bởi mã bên trong JCS-AutoValidate.
Hãy xem một ví dụ đơn giản về cách đạt được điều này.
Trong ví dụ này,
Chúng tôi sẽ chỉ có một biểu mẫu đơn giản với điều khiển hộp văn bản là trường bắt buộc. Một thông báo lỗi sẽ được hiển thị nếu điều khiển này không được điền.
Event Registration Guru99 Event
Giải thích mã:
- Đầu tiên, chúng ta cần bao gồm tập lệnh "jcs-auto-validate.js" có tất cả chức năng tự động xác thực.
- Chúng ta cần đảm bảo rằng mỗi phần tử bao gồm "thẻ div" được đặt trong một lớp "form-group".
- Cũng cần đảm bảo rằng mỗi phần tử (là một phần tử HTML chẳng hạn như điều khiển đầu vào, điều khiển khoảng, điều khiển div, v.v.) chẳng hạn như điều khiển đầu vào cũng được đặt trong lớp nhóm biểu mẫu.
- Bao gồm jcs-autovalidate trong mô-đun AngularJS JS của bạn.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Theo mặc định khi bạn chạy mã của mình, biểu mẫu trên sẽ được hiển thị theo mã HTML.
Nếu bạn cố gắng Gửi biểu mẫu, thông báo lỗi sẽ bật lên với nội dung "Trường này là bắt buộc." Tất cả điều này được thực hiện bởi tùy chọn JCS-AutoValidate.
Phản hồi của người dùng với các nút Ladda
Các nút "ladda" là một khung đặc biệt được xây dựng cho các nút trên đầu JavaScript để tạo hiệu ứng hình ảnh cho các nút khi chúng được nhấn.
Vì vậy, nếu một nút có thuộc tính "ladda" và được nhấn, hiệu ứng xoay sẽ được hiển thị. Ngoài ra, có các kiểu dữ liệu khác nhau có sẵn cho nút để cung cấp các hiệu ứng hình ảnh bổ sung.
Hãy xem một ví dụ về cách xem các nút "ladda" đang hoạt động. Chúng ta sẽ chỉ thấy một biểu mẫu đơn giản có nút gửi. Khi nhấn nút, hiệu ứng xoay tròn sẽ hiển thị trên nút.
Event Registration Guru99 Event
Giải thích mã:
- Chúng tôi đang sử dụng chỉ thị "ng-submit" để gọi một hàm được gọi là "submit". Chức năng này sẽ được sử dụng để thay đổi thuộc tính ladda của nút gửi.
- Thuộc tính ladda là một thuộc tính đặc biệt của khung ladda. Chính thuộc tính này có thêm hiệu ứng quay để điều khiển. Chúng tôi đang đặt giá trị của thuộc tính ladda cho biến đang gửi.
- Thuộc tính data-style lại là một thuộc tính bổ sung do khung ladda cung cấp, thuộc tính này chỉ thêm một hiệu ứng hình ảnh khác cho nút gửi.
- Mô-đun 'AngularJS-ladda' cần được thêm vào ứng dụng AngularJS.JS để khung ladda hoạt động.
- Ban đầu, chúng tôi đang xác định và đặt giá trị của một biến được gọi là 'submit' thành false. Giá trị này được đặt cho thuộc tính ladda của nút gửi. Bằng cách ban đầu đặt điều này thành false, chúng tôi đang nói rằng chúng tôi chưa muốn nút gửi có hiệu ứng ladda.
- Chúng tôi đang khai báo một hàm được gọi khi nhấn nút gửi. Trong chức năng này, chúng tôi đang đặt 'submit' thành true. Điều này sẽ làm cho hiệu ứng ladda được áp dụng cho nút gửi.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Khi biểu mẫu được hiển thị ban đầu, nút gửi sẽ được hiển thị ở dạng đơn giản.
Khi nhấn nút gửi, biến gửi trong bộ điều khiển được đặt thành true. Giá trị này được chuyển đến thuộc tính "ladda" của nút gửi, tạo ra hiệu ứng xoay của nút.
Tóm lược
- Việc xác thực cho các điều khiển HTML hộp văn bản có thể được thực hiện bằng cách sử dụng thuộc tính 'bắt buộc'.
- Trong HTML5, có các điều khiển mới được thêm vào chẳng hạn như mật khẩu, email và số cung cấp tập hợp xác thực của riêng chúng.
- Xác thực biểu mẫu trong AngularJS được thực hiện bằng cách xem xét các giá trị $ dơ bẩn, $ hợp lệ, $ không hợp lệ và $ nguyên sơ của một điều khiển biểu mẫu.
- Xác thực tự động trong các ứng dụng AngularJS cũng có thể đạt được bằng cách sử dụng mô-đun JCS-auto validate.
- Các nút Ladda có thể được thêm vào ứng dụng Angular.js để mang lại cảm giác hình ảnh nâng cao cho người dùng khi nhấn nút.