Bagaimana untuk melihat pengesahan vue

Vue.js ialah rangka kerja bahagian hadapan yang popular yang menyokong penciptaan antara muka pengguna yang kompleks melalui sintaks templat dan sistem komponen. Semasa proses pembangunan, pengesahan borang ialah isu yang mesti dipertimbangkan Vue.js menyediakan beberapa alat pengesahan untuk membantu pembangun membuat pengesahan borang yang boleh dipercayai masalah pengesahan.

1. Pengesahan borang Vue.js

Vue.js menyediakan beberapa arahan pengesahan dan pemalam yang boleh digunakan untuk mengesahkan data dalam borang. Arahan dan pemalam ini dilaksanakan untuk arahan mengikat borang (model v) Vue.js. Berikut ialah arahan dan pemalam yang biasa digunakan untuk pengesahan borang Vue.js:

1. arahan model v: Ini ialah arahan dalam Vue.js yang digunakan untuk mengikat elemen borang dan atribut data dalam Instance Vue. Ia boleh mengendalikan perubahan dalam nilai elemen bentuk secara automatik, iaitu, apabila nilai elemen borang berubah, atribut data yang terikat pada contoh Vue juga akan berubah dengan sewajarnya.
2. Arahan v-bind: Ini ialah arahan dalam Vue.js yang digunakan untuk mengikat elemen bukan bentuk dan atribut data dalam tika Vue. Ia boleh mengikat atribut data dalam tika Vue kepada atribut elemen bukan bentuk nilai atribut.
3. arahan v-on: Ini ialah arahan yang digunakan dalam Vue.js untuk mengikat acara dan fungsi pengendalian acara Anda boleh menggunakan arahan ini untuk mendengar pelbagai acara elemen borang dan melaksanakan operasi yang sepadan.
4. Pemalam VeeeValidate: Ini ialah pemalam pengesahan borang yang popular yang boleh digunakan untuk mengesahkan sama ada data dalam borang memenuhi keperluan. Ia menyokong pelbagai peraturan pengesahan, seperti yang diperlukan, e-mel, kata laluan, dsb. Selepas menambahkan arahan VeeValidate dan peraturan pengesahan yang sepadan pada borang, VeeValidate akan secara automatik mengesahkan data borang mengikut peraturan.

Mari kita lihat cara menggunakan pemalam Vue.js dan VeeValidate untuk pengesahan borang.

2. Contoh pengesahan borang Vue.js

Mari kita lihat dahulu cara menggunakan pemalam VeeValidate untuk mengesahkan sama ada data borang memenuhi keperluan dan memberikan maklumat segera yang sepadan. Berikut ialah contoh pengesahan borang mudah:

<template>
   <form @submit.prevent="submitForm">
      <div>
         <label>Email:</label>
         <input type="text" v-model="email" v-validate="'required|email'">
         <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
      </div>
      <div>
         <label>Password:</label>
         <input type="password" v-model="password" v-validate="'required'">
         <span v-show="errors.has('password')">{{ errors.first('password') }}</span>
      </div>
      <div>
         <button type="submit">Submit</button>
      </div>
   </form>
</template>

<script>
   import { required, email } from 'vee-validate/dist/rules';
   import { extend } from 'vee-validate';
   import { ValidationProvider } from 'vee-validate';

   extend('email', email);
   extend('required', required);

   export default {
      name: 'LoginForm',
      components: {
         ValidationProvider
      },
      data() {
         return {
            email: '',
            password: ''
         };
      },
      methods: {
         submitForm() {
            if (this.$validator.validate()) { // 验证表单
               console.log("表单验证成功"); // 验证成功，提交表单
            }
         }
      }
   }
</script>

Dalam kod di atas, kami mula-mula memperkenalkan peraturan pengesahan yang diperlukan dan e-mel dalam pemalam VeeValidate, dan menggunakan kaedah lanjutan untuk mendaftarkan peraturan ini dengan VeeValidate. Kemudian elemen borang ditambahkan pada templat, termasuk dua label dan elemen input yang sepadan. Elemen input ini menggunakan v-model untuk mengikat atribut yang sepadan dalam contoh Vue, dan juga menggunakan arahan v-validate untuk menambah peraturan pengesahan. Berikut ialah peraturan pengesahan borang:

1. Medan E-mel diperlukan dan mestilah dalam format e-mel yang sah.
2. Medan kata laluan diperlukan.

Untuk setiap peraturan pengesahan dalam borang, kami menambah elemen span yang boleh ditetapkan sama ada untuk dipaparkan berdasarkan mesej ralat. Akhir sekali, dalam kaedah submitForm, kami menggunakan kaedah $validator.validate() untuk mengesahkan sama ada data dalam borang mematuhi peraturan Jika pengesahan berjaya, "Pengesahan borang berjaya" akan dikeluarkan dan borang akan diserahkan .

3. Penyahpepijatan isu pengesahan Vue.js

Dalam pembangunan sebenar, kerana pengesahan borang Vue.js perlu memenuhi sejumlah besar peraturan yang ketat, pembangun mungkin menghadapi beberapa masalah pengesahan. Untuk menyelesaikan masalah ini, kita perlu menggunakan alat nyahpepijat yang disediakan oleh Vue.js untuk nyahpepijat.

Vue.js menyediakan alat penyahpepijat Chrome Vue Devtools dan Vue.js, yang boleh digunakan untuk memeriksa pelbagai keadaan dan acara dalam aplikasi Vue.js. Selain itu, kami juga boleh melihat log pengesahan borang dan maklumat penyahpepijatan melalui alat pembangun penyemak imbas.

Ringkasnya, apabila melakukan pengesahan borang, pembangun mesti memahami arahan pengesahan dan pemalam dalam Vue.js, dan menggunakan alat penyahpepijatan untuk menyemak isu pengesahan dalam aplikasi. Dengan cara ini, kebolehpercayaan dan kecekapan kod dapat dimaksimumkan.

Atas ialah kandungan terperinci Bagaimana untuk melihat pengesahan vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!