Bagaimana untuk melaksanakan pengesahan borang dalam Vue

Cara melaksanakan pengesahan borang dalam Vue

Dalam pembangunan bahagian hadapan, pengesahan borang adalah fungsi yang sangat penting. Ia boleh memastikan bahawa data yang dimasukkan oleh pengguna mematuhi format dan keperluan yang diharapkan, memastikan integriti dan kesahihan data. Dalam Vue, melaksanakan pengesahan borang telah menjadi sangat mudah. Artikel ini akan memperkenalkan secara terperinci cara melaksanakan pengesahan borang dalam Vue dan memberikan contoh kod khusus.

1. Kebergantungan pemasangan

Pertama sekali, kami perlu memasang pemalam Vue, yang boleh memudahkan operasi pengesahan borang. Jalankan arahan berikut dalam terminal:

npm install vee-validate --save

2. Tetapkan pemalam

Dalam fail main.js projek, tambah kod berikut untuk ditetapkan naikkan pemalam:

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

3. Tambah peraturan pengesahan dalam borang

Dalam templat komponen Vue, anda boleh menggunakan v-validate arahan untuk menambah peraturan pengesahan. Sebagai contoh, kita boleh menambah peraturan pengesahan untuk medan yang diperlukan:

<template>
  <form @submit="submitForm">
    <div>
      <label>姓名:</label>
      <input type="text" v-validate="'required'" v-model="name">
      <span>{{ errors.first('name') }}</span>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

Dalam kod di atas, v-validate="'required'" bermaksud medan itu tidak boleh kosong. Arahan model-v digunakan untuk mengikat nilai kotak input, dan errors.first('name') digunakan untuk memaparkan maklumat ralat tertentu.

4. Menulis logik pengesahan

Dalam komponen Vue, anda boleh menulis logik pengesahan dengan merujuk objek this.$validator yang disediakan oleh palam- dalam. Sebagai contoh, tambahkan kaedah submitForm dalam kaedah:

methods: {
  submitForm() {
    this.$validator.validateAll().then(result => {
      if (result) {
        // 表单验证通过，可以提交数据
        console.log('提交表单');
      } else {
        // 表单验证不通过，显示错误信息
        console.log('验证不通过');
      }
    });
  }
}

Dalam kod di atas, ini.$validator.validateAll() akan mencetuskan pengesahan semua kotak input dan mengembalikan objek Promise. Jika semua pengesahan lulus, keputusannya adalah benar jika tidak, hasilnya adalah palsu.

5. Peraturan pengesahan tersuai

Selain peraturan pengesahan terbina dalam, kami juga boleh menyesuaikan peraturan pengesahan mengikut keperluan. Dalam komponen Vue, anda boleh menggunakan ini.$validator.extend untuk menambah peraturan pengesahan tersuai, contohnya:

created() {
  this.$validator.extend('phone', {
    validate: value => {
      return /^1[3456789]d{9}$/.test(value);
    },
    getMessage: field => field + '格式错误'
  });
}

Dalam kod di atas, kami menambah peraturan pengesahan bernama 'telefon', melalui ungkapan Biasa untuk menentukan sama ada format nombor telefon bimbit adalah betul. Melalui kaedah getMessage, kami boleh menyesuaikan mesej ralat.

6. Memaparkan keputusan pengesahan

Dalam templat borang dalam langkah 3 kod, kami menggunakan errors.first('name') untuk dipaparkan mesej ralat. Anda juga boleh menggunakan errors.has('name') untuk menentukan sama ada medan mempunyai ralat. Selain itu, anda juga boleh menggunakan errors.collect() untuk mendapatkan semua maklumat ralat sekaligus.

Selepas melengkapkan langkah di atas, kita boleh melaksanakan fungsi pengesahan borang. Apabila anda memasukkan data ke dalam borang, pemalam akan mengesahkan mengikut peraturan pengesahan dan memaparkan mesej ralat yang sesuai. Apabila semua pengesahan lulus, data borang boleh diserahkan.

Ringkasan:

Melaksanakan pengesahan borang dalam Vue adalah sangat mudah Dengan bantuan pemalam vee-validate, kami boleh menambah peraturan pengesahan dan memproses keputusan pengesahan dengan mudah . Melalui langkah di atas, kami boleh mencipta sistem pengesahan borang yang berkuasa untuk meningkatkan ketepatan dan kesempurnaan data input pengguna.

Saya harap artikel ini membantu anda, jika anda mempunyai sebarang pertanyaan, sila tinggalkan mesej.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pengesahan borang dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!