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]
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
.formData {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
}
form {
font-size: 30px;
}
form input {
margin-left: 10px;
font-size: 15px;
}
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
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
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ụ
.formData {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
}
form {
font-size: 30px;
}
form input {
margin-left: 10px;
font-size: 15px;
}
.errorMessage {
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
}
.errorMessage.top-arrow:after {
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
}
Name:
function validateForm[] {
var nameVal = document.forms["simpleForm"]["name"].value;
if[nameVal == null || nameVal == ""] {
document.getElementsByClassName[ "errorMessage" ][0].style.visibility = "visible";
document.getElementsByClassName[ "errorMessage" ][0].innerHTML = "Please Fill out this field";
return false;
} else {
return true;
}
}
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 tag is added.
Chúng tôi đã viết một hàm có tên là validateForm[] sẽ thực hiện việc xác thực. Chúng tôi đang thực hiện cùng một quy tắc kiểm tra xem dữ liệu đã nhập trong trường tên có trống hay không. Logic để kiểm tra điều này là khi nhấp vào nút gửi, chức năng này sẽ được gọi và giá trị đã nhập sẽ được kiểm tra xem giá trị đó là rỗng hay trống. Hàm sẽ trả về giá trị true trong trường hợp dữ liệu không phải là null hoặc trống, nhưng nếu dữ liệu là trống hoặc không thì thông báo lỗi sẽ được hiển thị cho người dùng
đầu ra
Nếu chúng tôi cố gắng gửi biểu mẫu mà không nhập bất kỳ dữ liệu nào, chúng tôi sẽ nhận được thông báo lỗi trên màn hình. Như có thể thấy từ ví dụ, chúng tôi đã thiết kế thông báo lỗi theo cùng một cách có thể
Đầu ra với dữ liệu trống
Kết luận- Xác thực biểu mẫu HTML
Vì vậy, chúng ta đã thấy một ví dụ rất đơn giản về xác thực biểu mẫu ở phía máy khách. Chủ yếu có hai cách để thực hiện xác thực biểu mẫu HTML. Đầu tiên là sử dụng chức năng tích hợp được cung cấp trong HTML5 và thứ hai là sử dụng JavaScript. Sử dụng phương pháp đầu tiên, chúng tôi không cần phải viết thêm mã
Bài viết được đề xuất
Đây là hướng dẫn về Xác thực biểu mẫu HTML. Ở đây chúng ta thảo luận về tổng quan và hai cách Xác thực biểu mẫu HTML mà chúng có thể được thực hiện. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –