Xác thực dữ liệu là một phần thiết yếu của bất kỳ ứng dụng web nào vì nó giúp đảm bảo rằng dữ liệu được tải lên phù hợp với các yêu cầu nhất định do nhà phát triển áp đặt. Dữ liệu có thể được xác thực trên cả phía máy chủ và máy khách nhưng xác thực phía máy khách thường tiết kiệm thời gian của người dùng và chứng minh trải nghiệm người dùng đẹp hơn, mượt mà hơn. Việc xác thực dữ liệu phía máy khách có thể được thực hiện dễ dàng và tốn ít thời gian hơn nhiều.
Trong hướng dẫn cách làm này, chúng ta sẽ đi qua quá trình tạo biểu mẫu bằng HTML, JavaScript / jQuery để xác thực tệp có kích thước như nó đang được tải lên. Lợi ích của việc xác thực này là chúng tôi có thể hạn chế người dùng chỉ tải lên một kích thước tệp nhất định và đảm bảo rằng họ tuân thủ nghiêm ngặt các yêu cầu của chúng tôi. Nếu tệp có kích thước sai, chúng tôi có thể nhắc thông báo cho người dùng mà không cần tải tệp lên máy chủ, giúp tiết kiệm thời gian quý báu.
Tạo trang web
Đầu tiên, chúng tôi sẽ tạo một trang web HTML đơn giản:
DOCTYPE html >
< html >
< cái đầu >
< Tiêu đề >
Xác thực của tập tin kích thước trong khi tải lên bằng JavaScript / jQuery
Tiêu đề >
cái đầu >
< thân hình Phong cách = 'padding-top: 10px; text-align: center;' >
< P > Tải lên một tập tin P >
< đầu vào Tôi = 'tập tin' loại hình = 'tập tin' Phong cách = 'padding-left: 95px;' />
< br > < br >
< cái nút trong một cái nhấp chuột = 'sizeValidation ()' > Tải lên cái nút >
thân hình >
html >
Tìm hiểu Quy tắc:
Trong phần nội dung của trang web, chúng tôi chỉ sử dụng một , ,
và một nhãn. Các thẻ được sử dụng để người dùng có thể chọn một tệp và sau đó tải nó lên bằng cách sử dụng nút được hiển thị bằng cách sử dụng nhãn.
Các thẻ gọi sizeValidation () chức năng trên sự kiện nhấp chuột, sau đó xác định kích thước của tệp và in một cảnh báo thích hợp tùy thuộc vào kích thước của tệp.
Định nghĩa hàm JavaScript sizeValidation ()
Bây giờ chúng ta hãy viết mã JavaScript xác định sizeValidation () hàm số.
< script >
hàm số sizeValidation ( ) {
var input = document.getElementById ( 'tập tin' ) ;
là tập tin = input.files;
nếu ( file.length == 0 ) {
báo động ( 'Không có tập tin nào được chọn' ) ;
trở về sai ;
}
var fileSize = Math.round ( ( tập tin [ 0 ] .kích thước / 1024 ) ) ;
nếu ( Kích thước tập tin < = 5 * 1024 ) {
báo động ( 'Đã tải lên' ) ;
} khác {
báo động (
'Lỗi! Tệp quá lớn' ) ;
}
}
script >
Tìm hiểu Quy tắc:
Bên trong cơ thể của sizeValidation () trước tiên, chúng ta lấy thẻ và sau đó sử dụng var tệp = inputElement.files; để chúng tôi có thể truy cập vào tệp đang được tải lên. Sau đó, chúng tôi kiểm tra xem một tệp đã được tải lên hay chưa, nếu chưa, chúng tôi sẽ nhắc thông báo lỗi và thoát khỏi chức năng bằng cách trả về false.
Sau đó, chúng tôi sử dụng một số toán học để xác định kích thước của tệp. Nếu tệp có kích thước thích hợp, tức là 5MB (trong trường hợp này), nó sẽ được tải lên.
Nếu không, một cửa sổ bật lên chứa thông báo lỗi sẽ được hiển thị.
Sự kết luận
Mặc dù xác thực phía máy khách hiệu quả hơn rất nhiều, nó vẫn không thể thay thế cho xác thực phía máy chủ và có thể bị phá vỡ trong hầu hết các trường hợp. Thực tiễn tốt nhất là thực hiện cả xác thực phía máy chủ và phía máy khách để bạn có thể đảm bảo cả hiệu quả và độ chính xác của ứng dụng của mình.