Pengesahan borang boleh mencabar, tetapi tutorial ini memudahkan proses menggunakan vuelidate. Vuelidate menawarkan pendekatan yang diperkemas, meminimumkan kerumitan dan memaksimumkan fleksibiliti. Tutorial ini menyediakan titik permulaan; Anda boleh menyesuaikannya dengan keperluan khusus anda. Contoh kerja yang lengkap, disertakan pada akhir bagi mereka yang lebih suka pelaksanaan cepat.

Bagi mereka yang menginginkan pemahaman yang lebih mendalam, mari kita mulakan dengan senario yang mudah dan secara beransur -ansur membina contoh yang lebih mantap. Kami juga akan meliputi cara memaparkan kesilapan borang dengan berkesan semasa penyerahan.

Contoh Asas: Maklum balas input masa nyata

Mari kita meneroka fungsi Vuelidate. Kami akan membuat objek validations mencerminkan struktur data borang kami. Contoh asas:

 Data: {
  Nama: ''
},
Pengesahan: {
  Nama: {
    diperlukan
  }
}

Vue Devtools akan mendedahkan harta yang dikira, $v , yang mengandungi maklumat pengesahan. Aspek utama yang perlu diperhatikan: $v adalah harta yang dikira cache, meningkatkan prestasi. Ia mengandungi objek bersarang: objek pengesahan umum dan objek khusus harta. Struktur ini membolehkan akses kepada butiran pengesahan medan keseluruhan dan individu.

Perhatikan tingkah laku apabila menaip ke dalam medan input: $dirty menunjukkan sama ada medan telah berinteraksi dengan; $model mencerminkan nilai input semasa; $error dan $invalid mewakili keadaan ralat (dengan $error memandangkan kedua -dua $invalid dan $dirty ).

Menyediakan vuelidate dan melaksanakan peraturan pengesahan

Mari buat contoh praktikal. Kami akan memasang vuelidate dan menambah peraturan pengesahan required dan minLength .

Pertama, pasang Vuelidate:

 Benang menambah vuelidate

Seterusnya, kemas kini main.js :

 import vue dari 'vue';
import vuelidate dari "vuelidate";
aplikasi import dari './app.vue';
kedai import dari './store';

Vue.use (vuelidate);
Vue.config.productionTip = false

Vue baru ({
 menyimpan,
 render: h => h (app)
}). $ mount ('#app')

Dalam komponen anda, import pengesahan:

 import {diperlukan, minlength} dari 'vuelidate/lib/validators'

Menggabungkan data anda dalam fungsi untuk kebolehgunaan semula:

 import {diperlukan, minlength} dari 'vuelidate/lib/validators'

Eksport Lalai {
 data () {
   kembali {
     Borang -respons: {
       Nama: '',
     }
   }
 },
 Pengesahan: {
   Borang -respons: {
     Nama: {
       diperlukan,
       MinLength: minLength (2)
     },
   }
 }
}

Dalam templat anda, gunakan $v bersempena dengan v-model untuk mengikat data dan memaparkan mesej ralat:

<template>
  <div>
    <label for="fname">Nama*</label>
    <input type="text" v-model="$v.formResponses.name.$model" id="fname">
    <p class="error" v-if="!$v.formResponses.name.required">Bidang ini diperlukan</p>
    <p class="error" v-if="!$v.formResponses.name.minLength">Medan mesti mempunyai sekurang -kurangnya {{$ v.formResponses.name. $ Params.minlength.min}}.</p>
  </div>
</template>

<style scoped>
.error {
  color: red;
}
</style>

Pengesahan tertunda dengan v-model.lazy

Untuk pengalaman pengguna yang kurang mengganggu, gunakan v-model.lazy untuk mencetuskan pengesahan hanya selepas input kehilangan fokus:

<input type="text" v-model.lazy="$v.formResponses.name.$model" id="fname">

Mewujudkan pengesahan tersuai

Vuelidate membolehkan membuat pengesahan tersuai. Mari kita bina satu untuk kata laluan yang kuat dan mengintegrasikannya dengan sameAs untuk pengesahan kata laluan.

Tambahkan medan kata laluan ke data anda:

 data () {
  kembali {
    Borang -respons: {
      Nama: Null,
      E -mel: null,
      kata laluan1: null,
      Kata Laluan2: Null
    }
  };
},

Buat Pengesahan strongPassword Kustom:

 Pengesahan: {
  Borang -respons: {
    kata laluan1: {
      diperlukan,
      StrongPassword: (password1) => {
        return /qReSce…
      }
    },
    kata laluan2: {
      diperlukan,
      SAMEASPASSWORD: SAMEAS ('password1')
    }
  }
}

Tambahkan medan kata laluan dan mesej ralat ke templat anda:

 <label for="fpass1">Kata laluan*</label>
<input type="password" v-model="$v.formResponses.password1.$model" id="fpass1">
<p class="error" v-if="!$v.formResponses.password1.required">Bidang ini diperlukan</p>
<p class="error" v-if="!$v.formResponses.password1.strongPassword">Kata laluan mesti mengandungi sekurang -kurangnya satu huruf kecil, satu nombor, satu watak khas, dan sekurang -kurangnya 6 aksara.</p>

<label for="fpass2">Sahkan Kata Laluan*</label>
<input type="password" v-model="$v.formResponses.password2.$model" id="fpass2">
<p class="error" v-if="!$v.formResponses.password2.required">Bidang ini diperlukan</p>
<p class="error" v-if="!$v.formResponses.password2.sameAsPassword">Kata laluan tidak sepadan.</p>

Pengesahan On-Submission

Untuk pendekatan yang lebih bersih, sahkan hanya apabila penyerahan borang. Gunakan $v.formResponses.$anyError untuk memeriksa sebarang kesilapan.

Tambahkan pemboleh ubah keadaan:

 data () {
  kembali {
    UISTATE: 'Hantar tidak diklik',
    Kesalahan: Salah,
    Borang -respons: {
      // ...
    }
  }
},

Tambahkan butang hantar dan mengendalikan penyerahan:

 <button>Hantar</button>

 hantarForm () {
  this.errors = this. $ v.formResponses. $ anyError;
  this.uistate = 'hantar diklik';
  jika (! this.errors) {
    // Hantar data borang
    this.uistate = 'borang yang dikemukakan';
  }
},

Paparkan mesej yang sesuai berdasarkan keadaan borang:

<p v-if="errors && uiState === 'submit clicked'"> Bentuknya mempunyai kesilapan. Sila betulkannya dan hantar semula.</p>
<p v-else-if="uiState === 'form submitted'">Borang yang dikemukakan dengan jayanya!</p>

Ingatlah untuk menyesuaikan gaya seperti yang diperlukan untuk paparan mesej ralat yang optimum. Pertimbangkan menggunakan perpustakaan yang berdedikasi untuk pengurusan bentuk yang lebih kompleks. Pendekatan yang dipertingkatkan ini memberikan pengalaman pengesahan yang lebih mesra pengguna. Terima kasih kepada Damian Dulisz untuk mengkaji tutorial ini.

Atas ialah kandungan terperinci Pengesahan bentuk dalam masa kurang dari satu jam dengan vuelidate. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!