Sekarang untuk memvalidasi apa yang dimasukkan
pengguna, saya tentu saja ingin melakukan sesuatu pada setiap penekanan tombol.
Sekarang kita sudah mendapatkan diChangeText di sini sebagai pendengar pada judul misalnya dan
apa yang kita lakukan sekarang adalah kita mengatur judul di negara kita.
Sekarang langkah selanjutnya adalah tidak hanya melakukan
itu, jadi untuk tidak hanya menyimpan input tetapi juga memvalidasi dan juga mengelola jenis validitas input
ini dalam keadaan.
Jadi oleh karena itu, saya akan menambahkan fungsi baru di sini, misalnya handler perubahan judul yang mendapat teks yang dimasukkan dan kemudian dapat melakukan sesuatu dan saya hanya
akan mengalihdayakan ini ke fungsi bernama terpisah untuk memiliki sedikit pembersih, lebih mudah untuk
mengikuti sepanjang kode karena sekarang saya akan mengikat pendengar ini di sini untuk acara onChangeText saya, sehingga fungsi ini menyala
untuk setiap penekanan tombol dan tentu saja, saya masih akan mengatur judul saya dengan teks tetapi sekarang sebagai tambahan
seperti
yang saya katakan, saya juga ingin mengelola validitas dan untuk itu
kita dapat menambahkan status lain yang ingin kita kelola.
Jadi mungkin di sini setelah mengelola nilai judul, kita juga dapat memiliki judul itu keadaan valid atau apa
pun yang Anda ingin menyebutnya dan menambahkan judul set valid di sini sebagai fungsi setter
dan kemudian keadaan ini di sini
awalnya bisa salah sehingga kami awalnya memperlakukan ini tidak valid. Sekarang untuk setiap penekanan tombol di sini di penangan perubahan judul, sebelum
kami dapat menyimpan ini dan memperbarui status judul kami, kami dapat memvalidasi ini tentu saja dan sekarang
sepenuhnya terserah Anda bagaimana Anda ingin memvalidasi ini.
Sekarang misalnya, Anda bisa mengatakan ini hanya valid jika Anda memiliki teks yang tidak kosong, jadi jika panjang teks lebih
besar dari nol. Teks adalah string
tentu saja, jadi jika panjangnya nol, maka ini berarti string kosong.
Kami juga dapat memanggil teks. trim untuk memangkas kelebihan spasi putih sehingga hanya sekelompok spasi kosong
juga tidak diperlakukan sebagai valid.
Tentu saja, Anda juga dapat menambahkan validasi min atau max panjang dengan memeriksa panjangnya di sini, Anda
dapat menambahkan validasi ekspresi reguler untuk memeriksa teks untuk pola tertentu dan itu sebenarnya sesuatu
yang akan kami lakukan nanti juga tetapi
untuk memulai, saya akan cukup periksa seperti ini
dan sekarang di sini jika kita lebih besar dari nol, kita
baik-baik saja tetapi sebenarnya jika kita memiliki panjang nol, kita tidak baik-baik saja.
Jadi di sini saya
ingin menetapkan judul valid ke false, kalau tidak kita tetapkan judul set valid ke true
tentu
saja, jadi jika kita memang memiliki input yang
valid dan kita akan selalu mengatur judul itu sendiri, kita selalu perlu menyimpannya, kita jangan
pernah kehilangan input pengguna itu jika
tidak kita hancurkan aplikasi.
Dan sekarang dengan validitas judul yang disimpan di negara bagian, kita dapat menggunakannya tentu saja di sini di kode JSX
kita untuk memeriksa apakah judul tersebut tidak valid misalnya dan jika itu masalahnya, kita dapat secara dinamis menampilkan
teks di sini di mana kita misalnya mengatakan silakan masukkan judul yang valid untuk menampilkan sedikit pesan kesalahan di sini yang
tentu saja Anda dapat menetapkan beberapa gaya.
Sekarang dengan yang Anda lihat bahwa jika kita masuk ke input kami di sini, kami melihat bahwa
pesan kesalahan langsung dari awal karena kita mulai dalam keadaan tidak valid dan jika
kita mulai mengetik, ini menghilang tetapi jika saya menghapus semua input, itu muncul kembali dan ini adalah beberapa validasi dasar yang dapat
Anda tambahkan untuk menampilkan sedikit pesan kesalahan atau sedikit petunjuk kepada pengguna Anda, untuk memastikan bahwa pengguna mendapatkan setidaknya
ide jenis input yang Anda inginkan.
Sekarang tentu saja, Anda tidak hanya dapat menggunakan validitas ini untuk menampilkan pesan kesalahan tetapi juga untuk menghindari
agar formulir Anda dikirimkan jika itu tidak valid.
Jadi di sini, di dalam penangan kirim, di mana saya selalu mengirimkan data saya dan membuat atau memperbarui suatu produk tidak peduli apakah
input itu valid, di sana kita dapat menggunakan data validitas yang kami
kumpulkan dan misalnya memeriksa apakah judul itu valid dan jika tidak valid, maka tanda seru, maka kita
hanya kembali yang berarti kita
membatalkan eksekusi fungsi
dan kode setelah itu tidak akan berjalan dan selain itu kita mungkin tidak hanya ingin kembali,
tentu saja kita juga dapat mengimpor peringatan dari
React Native dan melempar peringatan asli yang bagus di sini. Jadi kita bisa dengan mudah menunjukkan peringatan
dengan pesan input salah atau judul itu dan pesan tolong periksa kesalahan dalam formulir dan kemudian cukup tambahkan satu tombol di sana di mana
kita mengatakan oke karena tidak ada lagi yang harus dilakukan untuk mengonfirmasi, ya dengan itu kami memiliki
aliran yang
bagus di sini di mana kami memperingatkan pengguna bahwa input tidak valid.
Jadi misalnya sekarang jika saya mencoba mengirimkan input ini dengan judul saya yang tidak valid, saya mendapatkan kesalahan ini dan
hanya jika saya memasukkan judul yang valid, saya dapat mengirimkannya karena saya belum menambahkan validasi untuk input lain
yang tentu saja harus kita .
Jadi ini adalah betapa mudahnya Anda memulai dengan validasi.
Sekarang karena kami menggunakan Javascript di sini, Anda tentu saja dapat juga membawa pustaka validasi pihak ketiga lainnya, seperti
misalnya ValidateJS yang merupakan paket yang dapat Anda instal ke proyek Anda dan mulai menggunakannya untuk kemudian dengan mudah memvalidasi
string untuk pola tertentu jika Anda mau untuk melakukannya. Dalam modul ini, saya akan menulis pola
dasar
yang kami gunakan secara manual sehingga Anda mendapatkan pemahaman yang jelas tentang apa yang sebenarnya
terjadi di sana tetapi Anda benar-benar dapat membawa perpustakaan pihak ketiga juga.
Nah dan sekarang dengan pemahaman dasar tentang validasi dan sebagainya, mari pastikan bahwa
kita sekarang benar-benar juga bergerak menuju bentuk dan manajemen input yang lebih terukur dan tidak melibatkan
banyak negara yang harus kita kelola secara manual.