07/09/2018, 10:35

Lưu ý khi sử dụng regular expression để validate input

Trong HTML có hỗ trợ chức năng validate input sử dụng Regular Expression tuy nhiên không phải bạn nào cũng biết tới đặc biệt là các bạn làm backend không chuyên làm về frontend. Trong một dự án gần đây làm cho khách hàng L là một công ty logistic của châu Âu và họ cần phát triển một hệ thống theo ...

Trong HTML có hỗ trợ chức năng validate input sử dụng Regular Expression tuy nhiên không phải bạn nào cũng biết tới đặc biệt là các bạn làm backend không chuyên làm về frontend. Trong một dự án gần đây làm cho khách hàng L là một công ty logistic của châu Âu và họ cần phát triển một hệ thống theo dõi quá trình vận chuyển hàng hóa & quản lý hàng tồn kho (hay còn gọi là CRM cho logistic). Có thể tóm tắt yêu cầu dự án như sau:

Khách hàng L có các Clients là các công ty hoặc cá nhân có nhu vận chuyển hoặc lưu trữ hàng hóa tại công ty L (từ giờ sẽ gọi khách hàng của công ty L là Client). Nhiệm vụ của team mình là phát triển một ứng dụng web cho phép các Client (của L) sau khi đăng nhập vào hệ thống có thể dễ dàng tạo mới một yêu cầu vẫn chuyển hoặc lưu trữ hàng hóa và theo dõi đơn hàng.

Một trong số những chức năng, mà anh em trong team mình được yêu cầu đó là cho Client của khách hàng L tạo mã country code để xác định quốc gia gửi tới hàng hóa cho các đơn hàng yêu cầu. Vì các Client của L đều đến từ châu Âu nên mã country code sẽ tuân theo một quy chuẩn của Châu Âu. Do đó team mình cần phải thực hiện việc validate input nhập vào cho trường country code từ phía client (trình duyệt) và cả trên (server).

Khi nhận được requirement như vậy thì một bạn trong team phụ trách thực hiện task này đã đề ra cách giải quyết bằng cách sử dụng một thư viện validator của jQuery. Tuy cách này có thể giải quyết vấn đề tuy nhiên không phải là cách hay nhất vì trên thực tế HTML có chức năng validate input sử dụng regular expression. Trong trường hợp sử dụng giải pháp này thì vấn đề được giải quyết đơn giản như sau:

<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Enter country code">

Tuy nhiên khi sử dụng phương pháp này bạn cũng cần lưu ý rằngkhông phải trình duyệt nào cũng hỗ trợ. Danh sách dưới đây liệt kê các trình duyệt hỗ trợ (hay không hỗ trợ) tính năng này:

  • Chrome: Hỗ trợ từ phiên bản 5.0 trở lên.
  • Firefox: Hỗ trợ từ phiên bản 4.0 trở lên.
  • Internet Explorer: Hỗ trợ từ phiên bản 10.0 trở lên.
  • Opera: Hỗ trợ từ phiên bản 9.6 trở lên.
  • Safari: Không hỗ trợ tính tới phiên bản mới nhất ở thời điểm này.

Trường hợp khách hàng bên mình không có yêu cầu kỹ thuật về việc phải thực hiện validate trên client (nhưng cần thực hiện trên server) do đó bên mình đã quyết định sử dụng HTML validation rule có sẵn.

0