Cara mengendalikan pengesahan dan gesaan input pengguna dalam Vue
Oct 15, 2023 am 08:51 AMCara mengendalikan pengesahan dan gesaan input pengguna dalam Vue
Vue ialah rangka kerja progresif untuk membina antara muka pengguna, yang membolehkan kami mengendalikan pengesahan dan gesaan input pengguna dengan mudah. Dalam artikel ini, kami akan memperkenalkan beberapa teknik biasa dan contoh kod dalam Vue untuk mencapai fungsi ini.
1. Pengesahan dan gesaan input pengguna asas
-
Gunakan arahan model-v untuk mengikat nilai kotak input
Arahan model-v ialah arahan penting dalam Vue untuk melaksanakan pengikatan data dua hala gunakannya Nilai kotak input terikat pada data dalam contoh Vue. Sebagai contoh, kita boleh mengikat nilai kotak input kepada pembolehubah inputValue dalam data:<input v-model="inputValue" type="text">
Salin selepas log masuk Gunakan sifat yang dikira untuk mengesahkan
Dalam Vue, kita boleh menggunakan sifat yang dikira untuk mengesahkan nilai kotak input. Sebagai contoh, dengan mengandaikan kami ingin mengesahkan sama ada nilai dalam kotak input ialah nombor, kami boleh mentakrifkan sifat terkira yang dipanggil isNumeric:computed: { isNumeric: function() { return !isNaN(this.inputValue); } }
Salin selepas log masukKami kemudian boleh menggunakan sifat terkira ini dalam templat untuk memaparkan hasil pengesahan:
<div v-if="isNumeric">输入的值是一个数字</div> <div v-else>输入的值不是一个数字</div>
Salin selepas log masukGunakan atribut jam tangan untuk memantau perubahan dalam kotak input Selain menggunakan sifat yang dikira, Vue juga menyediakan atribut jam tangan untuk memantau perubahan dalam kotak input. Dengan mentakrifkan pendengar bernama inputValue dalam atribut jam tangan, kami boleh melaksanakan logik yang sepadan apabila nilai kotak input berubah:
watch: { inputValue: function(newVal, oldVal) { // 执行验证逻辑 } }
Salin selepas log masuk- Mesej ralat pengesahan paparan
Apabila nilai yang dimasukkan oleh pengguna tidak memenuhi keperluan, kami Anda boleh menggunakan arahan v-if untuk memaparkan mesej ralat yang sepadan. Sebagai contoh, katakan kita ingin mengesahkan sama ada nilai kotak input lebih besar daripada 10. Jika ia tidak memenuhi keperluan, kita boleh menggunakan arahan v-if untuk memaparkan kotak gesaan ralat:
<div v-if="inputValue <= 10">输入的值必须大于10</div>
Salin selepas log masuk
- Gunakan pemalam untuk mengendalikan pengesahan dan gesaan
- Selain pengesahan asas dan kaedah gesaan yang dinyatakan di atas, Vue juga mempunyai banyak pemalam yang sangat baik yang boleh membantu kami mengendalikan pengesahan dan gesaan input pengguna . Sebagai contoh, vee-validate ialah pemalam pengesahan borang Vue yang sangat popular yang boleh melaksanakan peraturan pengesahan yang kompleks dan maklumat segera yang disesuaikan.
- Pengesahan dan gesaan masa nyata
Kadangkala, kita perlu mengesahkan dan menggesa dalam masa nyata semasa pengguna menaip. Dalam Vue, fungsi ini boleh dicapai dengan mengikat acara input ke kotak input. Sebagai contoh, kita boleh menambah pendengar peristiwa input pada kotak input untuk mengendalikan pengesahan dan logik gesaan setiap kali pengguna memasukkan:
<input v-model="inputValue" type="text" @input="handleInput">
Salin selepas log masukmethods: { handleInput: function() { // 处理验证和提示逻辑 } }
Salin selepas log masuk - Pengesahan dan gesaan tak segerak
Sesetengah pengesahan dan logik segera mungkin perlu memanggil antara muka bahagian belakang atau memulakan Permintaan tak segerak. Vue boleh menggunakan async/wait atau Promise untuk mengendalikan situasi ini. Contohnya, kita boleh menggunakan kata kunci await dalam logik pengesahan untuk menunggu keputusan permintaan tak segerak:
async handleInput() { const result = await this.validateInput(); // 处理验证结果 }, validateInput() { return new Promise(resolve => { // 向后端发起验证请求 // 处理验证结果,并调用resolve函数 }); }
Salin selepas log masuk
Atas ialah kandungan terperinci Cara mengendalikan pengesahan dan gesaan input pengguna dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Bagaimana saya membuat dan menggunakan plugin tersuai dalam vue.js?

Cara mengkonfigurasi cangkuk kitaran hayat komponen di Vue

Apa itu Vuex dan bagaimana saya menggunakannya untuk pengurusan negeri dalam aplikasi Vue?

Cara mengkonfigurasi jam tangan komponen dalam lalai eksport vue

Apakah ciri-ciri utama Vue.js (seni bina berasaskan komponen, DOM maya, pengikatan data reaktif)?

Bagaimanakah saya melaksanakan teknik penghalaan lanjutan dengan Vue Router (laluan dinamik, laluan bersarang, pengawal laluan)?

Bagaimanakah saya mengkonfigurasi Vue CLI untuk menggunakan sasaran binaan yang berbeza (pembangunan, pengeluaran)?

Bagaimanakah saya menggunakan Vue dengan Docker untuk penggunaan kontena?
