Xác thực dữ liệu form flutter (Validate Form Flutter)

Xác thực dữ liệu form flutter hay còn gọi là việc xác thực(validate) dữ liệu đầu vào từ người dùng là một khía cạnh quan trọng trong lập trình ứng dụng. Quá trình này làm cho ứng dụng trở nên an toàn hơn và kiểm tra xem thông tin do người dùng cung cấp có phải là thông tin mà chúng tôi mong đợi họ cung cấp hay không để không đưa lỗi vào ứng dụng của chúng tôi. Flutter đi kèm với một cách riêng để xác thực đầu vào của người dùng bằng cách sử dụng tiện ích Form và TextFormField.

Để thực hiện được validate một cách hoàn chỉnh, đầy đủ, các bạn hãy thử làm theo các bước sau đây: 

B1. Tạo Form với GlobalKey:

Để xác thực người dùng, đầu tiên chúng ta cần có tiện ích Form. Form đóng vai trò là vùng chứa để xác thực nhiều TextFormFiled (là một widget để giúp người dùng nhập vào thông tin của mình) và chúng cần có GlobalKey để nhận dạng duy nhất một Form. Nó cũng được dùng để lấy trạng thái hiện tại của Form.

Đừng quên một điều cần phải sử dụng “_formKey” trong widget Form và cung cấp cho nó thuộc tính key của Form → Liên kết GlobalKey với Form để bạn có thể thao tác với form từ GlobalKey:

B2. Tạo logic xác thực:

Thông tin người dùng nhập vào có thể có nhiều dạng như là email, số điện thoại, mật khẩu,… Vậy thì ở đây, chúng ta cần phải tạo ra những logic để xem những gì người dùng nhập vào đã đúng định dạng hay chưa, xem nó có phải là email hay chưa, số điện thoại hay chưa, hay là sô kí tự tối thiểu của mật khẩu. Ví dụ : “abcd” không thể là số điện thoại hay “1234” không phải là email, thì ở đây chúng ta cần phải tạo ra những logic để nhận dạng nó một cách chính xác nhất. Tôi sẽ ví dụ về 3 trường hợp phổ biến nhất: 

• Validate email:
  
  
• Validate phone:
  
  
• Validate mật khẩu:
  
  

B3. Tạo Textformfield với phương thức xác thực :

Công việc của TextFormField là hiển thị giao diện UI để người dùng tương tác và hiển thị lỗi xác thực sau khi người dùng nhập dữ liệu không hợp lệ. TextFormField có một phương thức trình xác thực được gọi để xác thực đầu vào. Phương thức xác thực trả về một chuỗi chứa thông báo lỗi khi đầu vào của người dùng không hợp lệ hoặc null nếu đầu vào của người dùng hợp lệ.

Trong hầu hết các trường hợp, bạn sẽ sử dụng biểu thức chính quy để kiểm tra đầu vào. Ở đây, tôi sẽ dùng các hàm ở bước 2 để thực hiện điền vào validator – thuộc tính của Textformfield để xác thực thông tin nhập vào từ người dùng

validate Textformfield

→ Ở đây tôi đã ví dụ về validateEmail, tượng tự với số điện thoại như ở bước 2 mình đã làm.

B4 Tạo một nút để xác thực và gửi biểu mẫu:

Sau khi người dùng nhập đầy đủ thông tin cần thiết thì chúng ta cần phải giúp người dùng gửi thông tin đi để xử lý. Ở bước này, tôi tạo một nút và giúp người dùng gửi đi bằng cách nhấn vào nó.

Còn khi không đáp ứng điều kiện validate, lỗi sẽ được hiển thị ở phía dưới Textformfield như sau :

Kết luận: Mặc dù có nhiều cách để hiển thị các lỗi liên quan đến đầu vào của người dùng, nhưng tôi thấy việc sử dụng form với textformfield giúp người lập trình có thể kiểm soát một cách dễ dàng, bao quát mọi trường hợp lỗi của người dùng. Từ đó chúng ta sẽ phát triển được một ứng dụng chặt chẽ, có tính bảo mật cao. Chúc các bạn thực hiện thành công!