Việc xác thực đầu vào của biểu mẫu là điều cần được thực hiện nghiêm túc. May mắn thay, không có gì tệ hơn là dữ liệu rác sẽ được gửi đến một trang web sử dụng dữ liệu từ các biểu mẫu mà không được xác thực thích hợp ….

Bạn đang xem: xác thực đầu vào biểu mẫu html

< p> Việc xác thực đầu vào biểu mẫu là điều cần được thực hiện nghiêm túc. May mắn thay, không có gì tệ hơn là dữ liệu rác sẽ được gửi đến một trang web sử dụng dữ liệu từ các biểu mẫu mà không được xác thực thích hợp. Tuy nhiên, cũng có khả năng tin tặc có thể xâm phạm dữ liệu cá nhân của những người dùng đã tin cậy cung cấp thông tin của bạn.

Vì xác thực rất quan trọng, nên có các công cụ và thư viện để xác thực và làm sạch dữ liệu trên cả front-end và back-end.

Trong hướng dẫn này, chúng tôi sẽ tập trung vào việc sử dụng các tính năng tích hợp sẵn của HTML5 để xác thực các loại đầu vào khác nhau mà không cần dựa vào bất kỳ thư viện bên ngoài nào. Rõ ràng, bạn không nên chỉ dừng lại ở việc xác thực dựa trên HTML5, nhưng đây sẽ là một khởi đầu tốt để làm cho các biểu mẫu trên trang web trở nên an toàn hơn.

Phần tử nhập biểu mẫu

Bất cứ khi nào bạn muốn nhận được một số loại đầu vào từ người dùng của mình, rất có thể bạn sẽ sử dụng phần tử HTML input . Không quan trọng nếu bạn muốn biết họ, tên, địa chỉ email, thành phố họ hiện đang sống, số điện thoại hoặc đội thể thao yêu thích của họ. Phần tử input là một cách rất thân thiện với người dùng để lấy thông tin từ khách truy cập của chúng tôi.

Tuy nhiên, một số người dùng độc hại muốn lợi dụng thực tế là họ có thể nhập hầu hết mọi loại chuỗi vào phần tử đầu vào và gửi biểu mẫu. Tương tự, có thể có một số người dùng không biết rằng họ đang nhập dữ liệu sai định dạng.

Cả hai vấn đề này đều có thể được giải quyết rất dễ dàng bằng cách sử dụng một số thuộc tính HTML5 với các phần tử biểu mẫu của bạn.

Thuộc tính loại

Thuộc tính type sẽ xác định loại đầu vào nào được coi là hợp lệ cho một phần tử nhất định. Khi không có giá trị nào được chỉ định cho thuộc tính type , thì loại được đặt thành text theo mặc định. Về cơ bản, điều này có nghĩa là tất cả các loại đầu vào văn bản sẽ được coi là hợp lệ cho phần tử cụ thể đó.

Điều này là tốt khi bạn muốn người dùng nhập tên của họ. Tuy nhiên, khi bạn muốn họ nhập địa chỉ email hoặc các số như tuổi và cân nặng của họ, tốt hơn hết bạn nên đặt giá trị của thuộc tính type thành một thứ gì đó thích hợp.

Dưới đây là một số giá trị mà bạn có thể chọn:

  • email : Thao tác này sẽ yêu cầu người dùng nhập địa chỉ email của họ ở định dạng hợp lệ. Ví dụ: họ không thể chỉ viết myemail.com hoặc something @ hoặc @ something.com . Họ sẽ phải nhập một giá trị tương tự như myemail@domain.tld . Tất nhiên, họ vẫn có thể nhập các email không tồn tại, nhưng đó là một vấn đề khác!
  • number : Điều này sẽ đảm bảo rằng chỉ các số được coi là đầu vào hợp lệ. Ví dụ: khi bạn hỏi ai đó tuổi của họ trong biểu mẫu, họ sẽ không thể gửi khoai tây hoặc ba mươi sáu làm đầu vào. Họ sẽ phải viết một số thực như 36 hoặc 15 .
  • url : Bạn có thể đặt thuộc tính type thành url nếu bạn muốn người dùng nhập URL hợp lệ vào phần tử đầu vào. Điều này sẽ ngăn họ nhập một cái gì đó như tutsplus . Tuy nhiên, tutsplus.com cũng sẽ bị coi là không hợp lệ — người dùng sẽ phải nhập URL đầy đủ như https://tutsplus.com . < / li>

  • tel : Việc sử dụng giá trị này không hữu ích như các giá trị khác vì định dạng cho số điện thoại khác nhau trên toàn thế giới. Không có mẫu chuẩn nào mà các trình duyệt có thể so khớp với đầu vào để xác định xem số đó có hợp lệ hay không. Tuy nhiên, đặt loại thành tel có thể hữu ích ở giai đoạn sau khi bạn thực hiện xác thực tùy chỉnh của riêng mình.

Có nhiều giá trị khác cho thuộc tính type có thể được sử dụng để chỉ định loại đầu vào hợp lệ cho một phần tử cụ thể. Bạn có thể đọc về tất cả các giá trị này trên trang tham chiếu Phần tử đầu vào trên MDN.

Bản trình diễn CodePen sau đây cho thấy cách chúng tôi có thể sử dụng thuộc tính type để kiểm soát những gì được phép trong các trường nhập khác nhau.

Thuộc tính độ dài tối thiểu và tối đa

Một cách khác để hạn chế những gì được chuyển làm đầu vào hợp lệ cho một phần tử là sử dụng thuộc tính minlength maxlength . Các tùy chọn này đặt số lượng ký tự tối thiểu và tối đa cần được nhập vào một phần tử đầu vào để làm cho nó hợp lệ.

Các giá trị phù hợp cho cả hai thuộc tính này sẽ thay đổi theo từng trường hợp. Ví dụ: một số trang web có thể muốn tên người dùng dài từ 4 đến 15 ký tự, trong khi những trang web khác có thể giới hạn độ dài tối đa là 12. Tương tự, người dân ở một số quốc gia sẽ có tên ngắn hoặc dài bất thường so với những quốc gia khác.

Sử dụng Regex để xác thực biểu mẫu

Việc đặt giá trị thuộc tính type chắc chắn giúp chúng tôi hạn chế những gì được chuyển thành đầu vào hợp lệ. Tuy nhiên, bạn có thể tiến xa hơn nữa và chỉ định mẫu mà tên người dùng hoặc địa chỉ email phải tuân theo để được coi là hợp lệ.

Giả sử bạn muốn đảm bảo rằng tên người dùng chỉ là chữ và số. Điều này có thể được thực hiện dễ dàng với sự trợ giúp của thuộc tính pattern . Bạn chỉ cần đặt giá trị của nó thành một biểu thức regex, biểu thức này sẽ hoạt động như một kim chỉ nam để xác định đầu vào nào hợp lệ và đầu vào nào không.

Dưới đây là một số ví dụ về việc sử dụng regex với thuộc tính pattern .

Mẫu trên sẽ tiếp tục kiểm tra rằng tất cả tên người dùng chỉ chứa các ký tự từ a-z, A-Z hoặc 0-9. Ví dụ: monty42 , 42monty , MON42ty mon42ty đều là tên người dùng hợp lệ trong trường hợp này, nhưng monty_42 không hợp lệ.

Thuộc tính minlength maxlength sẽ đảm bảo rằng tên người dùng không quá nhỏ hoặc quá lớn.

Nếu bạn muốn tên người dùng bắt đầu bằng một ký tự cụ thể như dấu gạch dưới, bạn có thể chỉ cần thêm nó vào phía trước của mẫu.

Giờ đây, mọi tên người dùng không bắt đầu bằng _ và chứa bất kỳ ký tự nào ngoài a-z, A-Z hoặc 0-9 sau đó sẽ được coi là không hợp lệ.

Tôi hy vọng điều này sẽ giúp làm rõ cách chúng ta có thể sử dụng thuộc tính pattern và một số regex để giới hạn những gì được coi là đầu vào hợp lệ ngay cả khi thuộc tính type được đặt thành text .

Xác thực nâng cao với mẫu Regex

Bạn cũng có thể sử dụng thuộc tính pattern cùng với các loại phần tử đầu vào khác như email url để hạn chế những gì được coi là hợp lệ. Ví dụ: giả sử bạn chỉ muốn người dùng nhập URL là miền phụ của tutsplus.com . Bạn có thể chỉ cần đặt giá trị của thuộc tính mẫu thành https: //.* \ .tutsplus.com . Giờ đây, mọi thông tin đầu vào như https://google.com hoặc https://envato.com sẽ được coi là không hợp lệ. Ngay cả khi bạn sử dụng URL tutsplus.com bắt đầu bằng https: // , URL đó sẽ không hợp lệ vì URL phải bắt đầu bằng https: // .

Điều tương tự cũng có thể được thực hiện với email. Nếu bạn muốn email kết thúc bằng một cái gì đó cụ thể, bạn có thể chỉ cần sử dụng thuộc tính pattern cho điều đó. Đây là một ví dụ:

Nếu phần tử đầu vào ở trên được sử dụng trong biểu mẫu, người dùng sẽ chỉ có thể nhập địa chỉ email kết thúc bằng tutsplus.com hoặc envato.com . Điều này có nghĩa là hi@gmail.com hoặc howdy@something.com sẽ không hợp lệ.

Xem JavaScript Regex Cheatsheet của chúng tôi để biết thêm ví dụ về các biểu thức chính quy và mẹo về cách sử dụng chúng.

Trường bắt buộc và Văn bản giữ chỗ

Mặc dù các thuộc tính started placeholder không nhất thiết phải liên quan đến xác thực, chúng có thể được sử dụng để cải thiện trải nghiệm người dùng khi ai đó đang điền vào biểu mẫu.

Không phải ai cũng sẵn sàng chia sẻ thông tin của họ với một trang web. Nếu một biểu mẫu chứa mười phần tử đầu vào khác nhau nhưng chỉ cần năm hoặc sáu phần tử trong số đó cho những gì bạn muốn làm và phần còn lại là để lấy thêm thông tin, thì bạn nên thông báo cho người dùng biết.

Bạn có thể đánh dấu các trường nhập nhất định theo yêu cầu bằng cách sử dụng thuộc tính bắt buộc , trong khi vẫn giữ nguyên các trường tùy chọn. Điều này sẽ cho người dùng biết thông tin tối thiểu tuyệt đối mà họ phải cung cấp khi điền vào biểu mẫu. Nó cũng có thể làm tăng số lượng người điền vào biểu mẫu vì họ sẽ biết trước rằng việc điền vào tất cả các trường là không hoàn toàn cần thiết.

Trình giữ chỗ Thuộc tính cũng đi một chặng đường dài khi nói đến việc làm cho biểu mẫu thân thiện hơn với người dùng. Ví dụ: nếu bạn không cho người dùng biết rằng họ phải nhập URL bắt đầu bằng https: // và là tên miền phụ của tutsplus.com , họ có thể chỉ lên sau khi điền không thành công trường URL với something.com hoặc code.tutsplus.com .

Trong ví dụ sau, chúng tôi đã sử dụng các thuộc tính mẫu, bắt buộc và trình giữ chỗ để kiểm soát chi tiết hơn việc xác thực và trải nghiệm người dùng tốt hơn.

Cụm từ thông dụng được sử dụng phổ biến

Regex để kiểm tra tên người dùng hợp lệ

Tên người dùng chỉ đơn giản là các chuỗi chữ và số, đôi khi được phép - _ , tùy thuộc vào người tạo trang web. Bạn có thể sử dụng regex sau để xác định xem tên người dùng chỉ được bao gồm các ký tự chữ và số, - _ : [a-zA-Z0-9-_] {4, 24} . Các số bên trong dấu ngoặc nhọn sẽ giới hạn tên người dùng hợp lệ có độ dài từ 4 đến 24 ký tự.

Bạn có thể sử dụng [a-zA-Z] [a-zA-Z0-9 -_] {4,24} để buộc người dùng sử dụng một chữ cái cho ký tự đầu tiên của tên người dùng của họ .

Regex để kiểm tra số điện thoại hợp lệ

Các số điện thoại thường có 10 chữ số. Regex để xác thực nếu ai đó đã nhập số điện thoại hợp lệ có thể chỉ là \ d {10} .

Tuy nhiên, số điện thoại thường được chia thành ba phần khác nhau: mã vùng, mã nhà cung cấp và mã thuê bao. Và mọi người có thể viết những thứ này ở một số định dạng khác nhau như:

Bạn có thể sử dụng \ (? (\ d {3}) \)? [- \. \ s]? (\ d {3}) [- \. \ s]? (\ d {4 }) để khớp với tất cả các mẫu số điện thoại ở trên. Sử dụng ? yêu cầu trình duyệt tìm kiếm 0 hoặc 1 lần xuất hiện của ký tự trước đó. Các chữ số được chia thành các nhóm 3 và 4 bằng cách sử dụng \ d {3} \ d {4} .

Regex để Kiểm tra Địa chỉ Email Hợp lệ

Địa chỉ email thường có dạng something@else.tld. Bất kỳ địa chỉ email nào theo mẫu trên đều có thể được đối sánh bằng cách sử dụng (\ w \.?) + @ [\ W \ .-] + \. \ W {2,4} .

Ban đầu, TLD dài từ 2 đến 4 ký tự, nhưng giờ chúng có thể có nhiều ký tự hơn, vì vậy bạn có thể thay đổi phần xác thực TLD để phù hợp với tất cả TLD mới dài hơn với regex sau: (\ w \ .?) + @ [\ w \ .-] + \. \ w {2,} .

Regex để kiểm tra URL hợp lệ

Bạn có thể sử dụng [(http (s)?): \ / \ / (www \.)? \ w - / = #% & amp; \. \?] {2,} \. [a-z ] {2,} ([\ w - / = #% & amp; \. \?] *) để khớp với hầu hết các URL hợp lệ. Các mẫu Regex ngày càng phức tạp hơn tùy thuộc vào loại độ chính xác mà bạn đang tìm kiếm trong một trận đấu. Trong trường hợp cụ thể này, chúng tôi kiểm tra http hoặc www tùy chọn và sau đó là một loạt các ký tự khác. Regex ở trên cũng sẽ xử lý các tham số truy vấn và các đoạn URL.

Bạn cũng có thể đọc thêm về Cụm từ thông dụng phổ biến .

Lời kết

Trong hướng dẫn này, chúng tôi đã học cách thêm xác thực cơ bản vào biểu mẫu của mình bằng cách sử dụng HTML và regex. Việc sử dụng giá trị phù hợp cho thuộc tính type sẽ buộc người dùng nhập thông tin vào trường đầu vào theo một định dạng nhất định. Việc sử dụng các biểu thức chính quy với thuộc tính pattern có thể giúp chúng tôi giữ cho đầu vào hợp lệ bị ràng buộc hơn.

Cuối cùng, chúng tôi đã học cách sử dụng thuộc tính placeholder để đảm bảo rằng các biểu mẫu chúng tôi tạo thân thiện với người dùng và những người điền thông tin không cảm thấy bực bội vì họ không ‘không biết định dạng đầu vào mà chúng tôi coi là hợp lệ.

Xác thực biểu mẫu chắc chắn không kết thúc ở đây. Trong hướng dẫn tiếp theo của tôi, bạn sẽ tìm hiểu về các sự kiện biểu mẫu khác nhau trong jQuery và cách xác thực biểu mẫu bằng plugin jQuery .


Xem thêm những thông tin liên quan đến chủ đề xác thực đầu vào biểu mẫu html

HTML Web Forms Part 2: HTML5 Input Types for e-mail, url, number, and range

  • Tác giả: Six Minutes. Smarter.
  • Ngày đăng: 2011-05-24
  • Đánh giá: 4 ⭐ ( 7425 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Use new HTML5 form inputs for…
    email and url which will validate for proper formatting and
    number and range that allow a user to enter numbers

Xác thực biểu mẫu (form) trong PHP

  • Tác giả: comdy.vn
  • Đánh giá: 3 ⭐ ( 1897 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn bạn cách xác thực biểu mẫu (form) trong PHP và chống các kiểu tấn công XSS phổ biến.

Cách xác thực biểu mẫu trong Vue.js

  • Tác giả: galaxyz.net
  • Đánh giá: 3 ⭐ ( 7314 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xác thực biểu mẫu , còn gọi là xác thực trường biểu mẫu, đảm bảo user điền vào tất cả các trường bắt buộc trong biểu mẫu web. Nếu một trường có giá trị không hợp lệ, nó sẽ hiển thị thông báo lỗi và ngăn việc gửi biểu mẫu cho đến khi các giá trị thỏa mãn tất cả các luật .

Cách căn chỉnh biểu mẫu đầu vào trong HTML

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 5051 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Một ví dụ khác, điều này sử dụng CSS, tôi chỉ cần đặt biểu mẫu trong…

Form Validation Part 1: Validation in HTML – Xác thực Form với mã HTML

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 9897 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hầu hết các thư việc validate Javascript đều rất lớn và thường yêu cầu các thư viện đi kèm như jQuery. Nhưng sự thật chúng ta không thể dùng hết những thứ được đi kèm trong các thư viện đó. Việc đó gâ…

Biểu mẫu trong HTML

  • Tác giả: tedu.com.vn
  • Đánh giá: 5 ⭐ ( 3505 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về biểu mẫu trong HTML

Một số Input type và những mẹo hữu ích về Validation Form trong HTML

  • Tác giả: blog.pirago.vn
  • Đánh giá: 5 ⭐ ( 4035 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Python: Kiểm tra xem khóa (hoặc giá trị) có tồn tại trong từ điển hay không (5 cách dễ dàng) • datagy - khóa trong từ điển python

By ads_php