Validation sẽ trở nên dễ dàng hơn với validatorjs và Vue+Vuex

119

Giới thiệu validatorjs

Validatorjs là 1 thư viện javascript xử lý validation. Theo tự nhận của tác giả của thư viện thì nó “lấy cảm hứng từ Validator của Laravel”.

Thư viện được giới thiệu là có những ưu điểm sau:

  • Không phụ thuộc vào bất cứ thư viện nào khác.
  • Hoạt động trên cả browser lẫn Node.
  • Các luật validation dễ đọc, dễ khai báo.
  • Các thông báo lỗi hỗ trợ đa ngôn ngữ.
  • Hỗ trợ AMD/Require.js và CommonJS/Browserify.

Sử dụng validatorjs

Chúng ta sẽ tạo 1 đối tượng person để validate như sau:

  • Thuộc tính name là bắt buộc.
  • Khi accept_mail_magazine là giá trị true, thuộc tính mail là bắt buộc.
  • Thuộc tính mail phải ở dạng địa chỉ E-mail.

Cái này là căn bản nên tác giả quyết định lồng thêm 1 đối tượng nữa vào. Đó là languages. Mỗi 1 người có ít nhất 1 ngôn ngữ lập trình nên ta có languages:

  • ruby
  • javascript
  • python
  • kotlin
  • swift
  • others

Và chúng ta sẽ dựng code mới như sau:

Thực hiện đoạn code trên sẽ báo kết quả sau:

Tiếp theo sẽ là Vue+Vuex

Có thể bạn cần xem

  Vuex là gì?
  Quản lý user permission trong VueJS

Vue+Vuex

Câu hỏi đầu tiên là liệu dùng Vue+Vuex với validationjs có tiện không? Vậy chúng ta sẽ giới thiệu Vuex 1 chút.

Vuex quản lý các pattern và library cho ứng dụng Vue.js. Đối với các ứng dụng Vue + Vuex, nó có dữ liệu dưới dạng các đối tượng JS được quản lý bởi Vuex store. Nó chịu ảnh hưởng của Flux và Redux, và nó quản lý và cập nhật trạng thái dữ liệu với luồng dữ liệu đơn hướng.

Ứng dụng Vue sử dụng mutation của Vuex để thay đổi state. Thay đổi của state sẽ nhanh chóng tác động lên component Vue đang sử dụng nó.

Ngoài ra, Vuex có một cơ chế tương ứng với thuộc tính computed (computed) của thành phần Vue được gọi là getter (getters). Trường hợp này thì kết quả của computed sẽ được trỏ đến getter thay vì trực tiếp vào state. Như vậy, khi state thay đổi thì gettersẽ thay đổi và kéo theo đó là component thay đổi.

Video Trọn bộ các chủ đề nâng cao của DevOps

Kết hợp Vue+Vuex và validatorjs

Đoạn code sau đây là một ví dụ triển khai của store trong Vuex.

Đây là module

Theo cách này, validationErrors lưu trữ kết quả xác thực của đối tượng person được lưu trữ trong store.

Vì kết quả xác thực cũng được cập nhật mỗi khi đối tượng person được cập nhật, giao diện người dùng tham chiếu đến xác thực thuộc tính validationErrors phản ánh ngay lập tức kết quả.

Thuận tiện và dễ dàng phải không? Hãy thử một lần.

Người viết: Hoàng Đức Quân

TopDev via Viblo