Xác thực HTML

Xác thực biểu mẫu HTML là một quá trình kiểm tra nội dung của trang biểu mẫu HTML để tránh gửi dữ liệu bị lỗi đến máy chủ. Quá trình này là một bước quan trọng trong việc phát triển các ứng dụng web dựa trên HTML, vì nó có thể dễ dàng cải thiện chất lượng của trang web hoặc ứng dụng web. Có hai cách để thực hiện Xác thực biểu mẫu HTML và đó là bằng cách Sử dụng chức năng tích hợp sẵn của HTML5 và bằng cách Sử dụng JavaScript

Xác thực biểu mẫu HTML

Có hai cách chủ yếu để thực hiện xác thực biểu mẫu HTML,

  • Sử dụng chức năng tích hợp HTML5
  • Sử dụng JavaScript

1. Sử dụng chức năng tích hợp HTML5

HTML5 cung cấp tính năng xác thực biểu mẫu này mà không cần sử dụng JavaScript. Các thành phần của biểu mẫu sẽ được thêm các thuộc tính xác thực, điều này sẽ tự động kích hoạt xác thực biểu mẫu cho chúng tôi. Thuộc tính xác thực cho phép chúng tôi chỉ định các loại quy tắc khác nhau trên các thành phần biểu mẫu của chúng tôi. Chúng cho phép chúng tôi đặt độ dài của dữ liệu, đặt giới hạn đối với các giá trị của dữ liệu, v.v.

Hãy xem một ví dụ đơn giản về xác thực biểu mẫu HTML bằng cách sử dụng các phần tử xác thực biểu mẫu tích hợp sẵn và sau đó sẽ tiếp tục xác thực biểu mẫu HTML bằng JavaScript

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác

Gói phát triển phần mềm tất cả trong một(hơn 600 khóa học, hơn 50 dự án)

Xác thực HTML
Xác thực HTML
Xác thực HTML
Xác thực HTML

Xác thực HTML
Xác thực HTML
Xác thực HTML
Xác thực HTML

Giá bán
Xem các khóa học

Hơn 600 khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập trọn đời
4. 6 (86.452 xếp hạng)

Thí dụ

Xác thực biểu mẫu bằng thuộc tính xác thực HTML5 – Trong ví dụ này, chúng tôi sẽ sử dụng thẻ xác thực biểu mẫu bắt buộc, điều này sẽ khiến dữ liệu trong trường đó bắt buộc phải nhập; . Dưới đây là đoạn mã giống nhau, cùng với một số kiểu dáng của biểu mẫu web







Name:

Vậy là chúng ta đã có một form web vô cùng đơn giản cùng với duy nhất một trường nhập liệu là “Tên”. Xin lưu ý rằng chúng tôi đã sử dụng từ khóa bắt buộc trong phần tử thẻ đầu vào

đầu ra

Xác thực HTML

Hãy thử gửi biểu mẫu mà không nhập bất kỳ giá trị nào vào trường tên. Khi gửi, bạn sẽ nhận được thông báo lỗi là Vui lòng điền vào trường này, và biểu mẫu sẽ không được gửi

Đầu ra với dữ liệu trống

Xác thực HTML

Như vậy có thể thấy thông báo lỗi không phải do chúng tôi thêm vào mà do chính HTML cung cấp

Giống như thuộc tính bắt buộc do HTML cung cấp, có nhiều thẻ biểu mẫu khác nhau có sẵn để sử dụng. Dưới đây là danh sách một số thẻ xác thực biểu mẫu,

  • Độ dài nhỏ nhất. Được sử dụng để đặt độ dài tối thiểu cần thiết của một phần tử
  • độ dài tối đa. Được sử dụng để đặt độ dài tối đa cần thiết của một phần tử
  • mẫu. Dùng để định nghĩa một biểu thức chính quy

2. Sử dụng JavaScript

JavaScript được sử dụng rộng rãi để xác thực biểu mẫu HTML vì nó cung cấp nhiều cách hơn để tùy chỉnh và đặt quy tắc xác thực; . JavaScript đang được sử dụng trong một thời gian dài để xác thực biểu mẫu

Về cơ bản, trong xác thực biểu mẫu JavaScript, chúng tôi xác định các chức năng để xác thực dữ liệu trước khi gửi đến máy chủ. Chúng tôi có thể triển khai bất kỳ logic nào cần thiết để đạt được các quy tắc xác thực. JavaScript linh hoạt hơn theo cách này vì không có giới hạn nào trong việc xác định quy tắc. Tuy nhiên, cần phải biết JavaScript để triển khai điều này so với xác thực biểu mẫu bằng các thẻ tích hợp

Hãy xem ví dụ về xác thực biểu mẫu bằng JavaScript. Chúng tôi sẽ thực hiện cùng một ví dụ về biểu mẫu chỉ với một đầu vào là phần tử tên

Thí dụ







Name:

From the previous example, we have removed the required tag from the form element “name”. Instead, we have added one tag onsubmit in the form element. As mentioned before, we will be writing a function for validation for which the