Javascript xác minh giá trị đầu vào

Về bản chất, việc xác thực biểu mẫu trong trang web chỉ là kiểm tra xem dữ liệu đầu vào có hợp lệ với định dạng yêu cầu của người lập trình hay không. Nếu có thì submit form thành công, còn không thì reject và có lỗi. Các thuật toán đều là so sánh biểu thức chính quy (regex). Khác nhau là việc kiểm tra regex diễn ra ở quá trình nào mà thôi

1. Xác thực bằng Front End

a. Xác thực bằng HTML

Cách sử dụng menu khá đơn giản bằng cách thêm 1 số tùy chọn để xác thực đầu vào

  • Thêm "required" nếu muốn trường đó bắt buộc phải điền mới được phép gửi

  • Thêm tùy chọn type="email" để thiết lập điều kiện giá trị đầu vào phải có dạng email

  • Add partern and regex format for type format for data input

Ngoài ra còn có 1 số tùy chọn ví dụ khác. min, max, minlength, maxlength v...v...

Javascript xác minh giá trị đầu vào

Trần Quang Huy B @Gin_win

Theo dõi

273 2 7

Đã đăng vào ngày 12 tháng 15 năm 2020 9. 28 SA 5 phút đọc

3. 3K

0

3

Cách xác thực biểu mẫu trong website thiết kế - Ưu nhược điểm

  • Report
  • Add to series of me

Về bản chất, việc xác thực biểu mẫu trong trang web chỉ là kiểm tra xem dữ liệu đầu vào có hợp lệ với định dạng yêu cầu của người lập trình hay không. Nếu có thì submit form thành công, còn không thì reject và có lỗi. Các thuật toán đều là so sánh biểu thức chính quy (regex). Khác nhau là việc kiểm tra regex diễn ra ở quá trình nào mà thôi

1. Xác thực bằng Front End

a. Xác thực bằng HTML

Cách sử dụng menu khá đơn giản bằng cách thêm 1 số tùy chọn để xác thực đầu vào

  • Thêm "required" nếu muốn trường đó bắt buộc phải điền mới được phép gửi

  • Thêm tùy chọn type="email" để thiết lập điều kiện giá trị đầu vào phải có dạng email

  • Add partern and regex format for type format for data input

Ngoài ra còn có 1 số tùy chọn ví dụ khác. min, max, minlength, maxlength v...v...

Minh họa khi người dùng không nhập trường bắt buộc

ưu điểm. đơn giản, dễ sử dụng, giao diện bắt mắt được hầu hết các loại trình duyệt thiết kế giao hiện sẵn. Giảm thiểu yêu cầu sai của người dùng lên máy chủ

nhược điểm. Rất dễ để vượt qua xác thực bằng cách người dùng nhấn F12 và sửa mã nguồn html. Không thể kiểm tra tính xác thực là duy nhất ( dữ liệu này đã tồn tại trong cơ sở dữ liệu hay chưa )

b. Xác thực bằng Javascript

Xác thực bằng javascript thì chúng ta phải tự so sánh bằng tay xem dữ liệu nhập vào có khớp với định dạng của regex hay không, và việc hiển thị tin nhắn cũng như tin nhắn phải tự tùy chỉnh. Ví dụ đơn giản

ưu điểm. tránh bị người dùng spam yêu cầu lên máy chủ

nhược điểm. Có thể vượt qua F12, vào bảng điều khiển tab và gửi lại hàm tùy chỉnh. Phải tự thiết kế giao diện để hiển thị thông báo. Không thể kiểm tra đã được xác thực duy nhất

Hình ảnh minh họa cho việc xác thực biểu mẫu bằng Javascript

Như ví dụ ở trên, người dùng có thể vượt qua cách F12, vào bảng điều khiển tab và nhập document.getElementById("form").submit()

Bất kể việc gửi có thỏa mãn điều kiện xác thực hay không, biểu mẫu trên sẽ được gửi

c. Chốt lại

Xác thực ở mục đích Front-end giúp hạn chế những yêu cầu gửi sai máy chủ nhưng không thể chống lại những kẻ cố tình phá hoại. Không thể xác thực kiểu duy nhất (chưa kiểm tra xem đã tồn tại trong cơ sở dữ liệu chưa ). Xác thực ở Front-end có thể có hoặc không

2. Xác thực bằng Back end

a. Xác thực bằng ngôn ngữ Back End

Rất cần thiết và quan trọng nên hầu hết mọi Framework đều hỗ trợ xác thực này, điểm chung là gọi hàm callback trước khi lưu dữ liệu vào cơ sở dữ liệu. ( Và tất cả đều là sử dụng thuật toán so sánh với biểu thức chính quy)

This is validate started must have

ưu điểm. Kiểm tra toàn bộ dữ liệu trước khi thực hiện lưu vào cơ sở dữ liệu. Depveoper cũng không quá khó khăn (không cần code nhiều) trong quá trình xác thực ở back end vì đã có Framework hỗ trợ

nhược điểm. Unblocked job user spam request up. Thông báo hiển thị phải nhờ phía FE hiển thị lên

b. Xác thực trong cơ sở dữ liệu

Khi thiết kế cơ sở dữ liệu, triển khai có thể chọn các tùy chọn xác thực cho từng trường của từng bảng, ví dụ. yêu cầu, duy nhất, loại, độ dài tối thiểu, độ dài tối đa v. v. Xác thực trong cơ sở dữ liệu là công việc kiểm tra cuối cùng để xem dữ liệu có thực sự "an toàn" hay không? . Nhưng thông thường là có, và chỉ xác thực những tùy chọn cơ bản chứ không phải tất cả

ưu điểm. Ngăn chặn việc phát triển xác thực thiếu sót bằng ngôn ngữ back end, dẫn đến lưu dữ liệu sai vào cơ sở dữ liệu

nhược điểm. Tùy chọn bị hạn chế, không có biểu thức chính quy. Khá bất tiện trong việc fake data để test bug

c. Chốt lại

Xác thực phía sau là cực kỳ cần thiết. Nên kết hợp giữa công việc xác thực bằng back end ngôn ngữ và xác thực trong cơ sở dữ liệu một cách khéo léo

3. Tổng kết

Hy vọng qua bài viết của mình, các bạn sẽ biết thêm về form xác thực trong websibte lập trình, cách xác thực và ưu nhược điểm của mình