Cara mengosongkan gesaan pengesahan dalam vue

Dalam Vue.js, kami menggunakan pemalam pengesahan borang untuk menangkap ralat pengesahan borang. Walau bagaimanapun, terdapat situasi di mana kita perlu mengosongkan ralat pengesahan borang. Artikel ini akan membincangkan cara mengosongkan gesaan pengesahan borang melalui kod Vue.js.

Memahami pengesahan borang Vue.js

Pengesahan borang Vue.js bergantung pada dua faktor utama: model borang dan peraturan pengesahan. Model borang ialah objek yang menyimpan dan mengawal data borang, manakala peraturan pengesahan ialah satu atau lebih peraturan yang ditakrifkan pada borang untuk memastikan integriti dan ketepatan data borang.

Dalam Vue.js, kami menggunakan pustaka pengesahan borang Vuelidate untuk mentakrifkan peraturan pengesahan borang. Sebagai contoh, kita boleh mentakrifkan peraturan untuk memastikan bahawa medan input tidak kosong:

validations: {
  name: {
    required: validators.required,
  },
}

Peraturan ini akan menyemak sama ada medan name kosong dan memaparkan mesej ralat jika kosong. Secara lalai, mesej ralat akan muncul secara automatik di bawah medan borang.

Kosongkan gesaan pengesahan borang

Sekarang, katakan kita perlu mengosongkan mesej ralat itu supaya pengguna boleh mula memasukkan data semula. Untuk mengosongkan mesej, kami perlu mengakses status pengesahan kawalan borang dan menandakannya sebagai "tidak sah".

Dalam Vue.js, kita boleh menggunakan langkah berikut untuk mengosongkan gesaan pengesahan borang:

1. Akses objek pengesahan model borang melalui this.$v untuk mendapatkan borang Semua status pengesahan.

   const validationState = this.$v;

2. Gunakan kaedah setPropagation untuk menentukan sama ada pengesahan harus diserahkan kepada komponen anak. Di sini kami ingin melumpuhkan "pengesahan mendalam" supaya hanya status pengesahan kawalan borang semasa dikosongkan.

   validationState.$touch();
   validationState.$setDirty();
   validationState.$setChildrenDirty(true);

3. Tetapkan status pengesahan kepada status "Tidak Disahkan".

   validationState.name.$touch();

4. Kami boleh mengalih keluar mesej ralat daripada kawalan borang jika perlu.

   validationState.$reset();

Kod lengkap adalah seperti berikut:

methods: {
  clearValidation() {
    const validationState = this.$v;
    validationState.$touch();
    validationState.$setDirty();
    validationState.$setChildrenDirty(true);
    validationState.name.$touch();
    validationState.$reset();
  },
},

Apabila anda perlu mengosongkan ralat pengesahan borang, cuma panggil kaedah clearValidation.

Kesimpulan

Dalam Vue.js, kita boleh menggunakan pemalam Vuelidate untuk melaksanakan pengesahan borang. Walau bagaimanapun, kadangkala kita perlu mengosongkan gesaan pengesahan borang supaya pengguna boleh mula memasukkan data semula. Kami boleh mengosongkan ralat pengesahan borang dengan mudah dengan mengakses status pengesahan kawalan borang dan menandakannya sebagai "tidak sah".

Atas ialah kandungan terperinci Cara mengosongkan gesaan pengesahan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!