Validasi data adalah bagian penting dari aplikasi web apa pun karena membantu memastikan bahwa data yang diunggah sesuai dengan persyaratan tertentu yang diberlakukan oleh pengembang. Data dapat divalidasi di sisi server dan klien tetapi validasi sisi klien sering menghemat waktu pengguna dan membuktikan pengalaman pengguna yang lebih baik dan lebih lancar. Validasi data sisi klien dapat dilakukan dengan mudah dan menghabiskan lebih sedikit waktu.
Dalam panduan how-to-do ini kita akan melalui proses pembuatan formulir menggunakan HTML, JavaScript/jQuery yang memvalidasi ukuran file saat sedang diunggah. Manfaat dari validasi ini adalah kami dapat membatasi pengguna untuk hanya mengunggah ukuran file tertentu dan memastikan bahwa mereka benar-benar mengikuti persyaratan kami. Jika ukuran file salah, kami dapat meminta pesan kepada pengguna tanpa mengunggah file ke server yang menghemat waktu berharga.
Buat Halaman Web
Pertama, kita akan membuat halaman web HTML sederhana:
DOCTYPE html >
< html >
< kepala >
< judul >
Validasi dari mengajukan ukuran ketika mengunggah menggunakan JavaScript / jQuery
judul >
kepala >
< tubuh gaya = 'padding-top: 10px; text-align:center;' >
< p > Unggah mengajukan p >
< memasukkan Indo = 'mengajukan' Tipe = 'mengajukan' gaya = 'padding-kiri: 95px;' />
< br >< br >
< tombol klik = 'ukuranValidasi()' > Mengunggah tombol >
tubuh >
html >
Memahami Kode:
Di badan halaman web, kami hanya menggunakan ,
dan
Itu
Tentukan JavaScript sizeValidation() Fungsi
Sekarang mari kita tulis kode JavaScript yang mendefinisikan ukuranValidasi() fungsi.
< naskah >
fungsi ukuranValidasi ( ) {
var input = document.getElementById ( 'mengajukan' ) ;
dulu mengajukan = masukan.file;
jika ( file.panjang== 0 ) {
peringatan ( 'Tidak ada file yang dipilih' ) ;
kembali Salah ;
}
var fileSize = Math.round ( ( mengajukan [ 0 ] .ukuran / 1024 ) ) ;
jika ( ukuran file < = 5 * 1024 ) {
peringatan ( 'Diunggah' ) ;
} kalau tidak {
peringatan (
'Kesalahan! File terlalu besar' ) ;
}
}
naskah >
Memahami Kode:
Di dalam tubuh ukuranValidasi() fungsi pertama kita mendapatkan tag dan kemudian menggunakan var file = inputElement.files; baris sehingga kami bisa mendapatkan akses ke file yang sedang diunggah. Kemudian kami memeriksa apakah file telah diunggah, jika tidak, kami akan meminta pesan kesalahan dan keluar dari fungsi dengan mengembalikan false.
Kami kemudian menggunakan beberapa matematika untuk menentukan ukuran file. Jika file memiliki ukuran yang sesuai, yaitu 5MB (dalam hal ini), file tersebut diunggah.
Jika tidak, pop-up yang berisi pesan kesalahan akan ditampilkan.
Kesimpulan
Meskipun validasi sisi klien jauh lebih efisien, itu masih bukan pengganti validasi sisi server dan dapat dielakkan dalam banyak kasus. Itu selalu merupakan praktik terbaik untuk menerapkan validasi sisi server dan klien sehingga Anda dapat memastikan efisiensi dan akurasi aplikasi Anda.