Cara melaksanakan pengesahan borang dalam pembangunan teknologi Vue

Cara melaksanakan pengesahan borang dalam pembangunan teknologi Vue

Pengesahan borang ialah bahagian yang sangat penting dalam pembangunan bahagian hadapan Ia boleh membantu kami mengesahkan data sebelum pengguna memasukkan data, dengan itu mengelakkan kesilapan yang tidak perlu. Dalam pembangunan teknologi Vue, pengesahan borang boleh dilaksanakan melalui arahan pengesahan Vue sendiri dan pemalam pihak ketiga. Artikel ini akan memperkenalkan penggunaan arahan Vue sendiri dan pustaka VeeValidate untuk melaksanakan pengesahan borang, dan melampirkan contoh kod khusus.

1. Gunakan arahan Vue sendiri untuk melaksanakan pengesahan borang

Arahan Vue sendiri termasuk v-model, v-bind, v-on, dsb. Melalui arahan ini, kami boleh melaksanakan pengesahan borang dengan mudah.

1. v-model directive

Arahan v-model digunakan untuk mewujudkan hubungan mengikat dua hala antara elemen borang dan data tika Vue. Kita boleh mencapai pengesahan masa nyata data borang dengan menambahkan arahan model-v pada elemen borang dan menentukan nama atribut data.

<template>
  <div>
    <input type="text" v-model="username" />
    <span v-if="!isValidUsername">请输入有效的用户名</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
    };
  },
  computed: {
    isValidUsername() {
      // 校验用户名的逻辑
      // 返回布尔值，表示用户名是否有效
    },
  },
};
</script>

Dalam contoh di atas, apabila nama pengguna yang dimasukkan tidak sah, mesej gesaan akan dipaparkan melalui arahan v-if. Kita boleh menulis logik pengesahan dalam atribut yang dikira dan mengembalikan nilai Boolean yang menunjukkan kesahihan medan.

2. v-bind directive

Arahan v-bind digunakan untuk mengikat atribut unsur HTML secara dinamik. Melalui arahan v-bind, kita boleh menukar gaya elemen bentuk secara dinamik berdasarkan kesahihan data borang.

<template>
  <div>
    <input type="text" :class="{ 'is-invalid': !isValidUsername }" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
    };
  },
  computed: {
    isValidUsername() {
      // 校验用户名的逻辑
      // 返回布尔值，表示用户名是否有效
    },
  },
};
</script>

Dalam contoh di atas, melalui arahan mengikat :class, apabila nama pengguna tidak sah, nama kelas "is-invalid" ditambah untuk menukar gaya kotak input.

3. v-on command

v-on command digunakan untuk mendengar acara tertentu. Dengan menambahkan arahan v-on pada elemen borang dan menyatakan nama acara dan kaedah yang akan dilaksanakan, kami boleh mengesahkan data borang.

<template>
  <div>
    <input type="text" @input="validateUsername" />
    <span v-if="!isValidUsername">请输入有效的用户名</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
    };
  },
  methods: {
    validateUsername() {
      // 校验用户名的逻辑
      // 更新isValidUsername的值
    },
  },
};
</script>

Dalam contoh di atas, apabila nilai kotak input berubah, @input mendengar acara input dan memanggil kaedah validateUsername untuk mengesahkan nama pengguna.

2. Gunakan perpustakaan VeeValidate untuk melaksanakan pengesahan borang

VeeValidate ialah perpustakaan pengesahan borang yang berkuasa Ia menyediakan peraturan pengesahan yang kaya dan pilihan konfigurasi yang fleksibel, yang boleh membantu kami melaksanakan keperluan pengesahan borang yang kompleks.

1. Pasang perpustakaan VeeValidate

Gunakan npm atau benang untuk memasang perpustakaan VeeValidate.

npm install vee-validate

2. Perkenalkan perpustakaan VeeValidate

Perkenalkan dan gunakan perpustakaan VeeValidate dalam main.js fail masukan projek Vue.

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

Vue.use(VeeValidate);

3. Gunakan VeeValidate dalam komponen

Gunakan arahan pengesahan dan peraturan pengesahan yang disediakan oleh perpustakaan VeeValidate dalam komponen borang.

<template>
  <div>
    <input type="text" v-model="username" v-validate="'required'" />
    <span v-show="errors.has('username')">请输入有效的用户名</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
    };
  },
};
</script>

Dalam contoh di atas, arahan v-validate digunakan untuk menentukan peraturan pengesahan yang akan digunakan. errors.has('username') digunakan untuk menentukan sama ada terdapat ralat dalam medan, dan jika ya, mesej gesaan dipaparkan.

4. Konfigurasi peraturan pengesahan

Kami boleh mengkonfigurasi peraturan pengesahan dalam pilihan data komponen.

export default {
  data() {
    return {
      username: '',
    };
  },
  validations: {
    username: {
      required: true,
      // 其他校验规则
    },
  },
};

Dalam contoh di atas, kami menentukan peraturan pengesahan untuk medan nama pengguna dalam pilihan pengesahan yang diperlukan kepada benar bermakna medan itu tidak boleh kosong.

Ringkasnya, kami boleh melaksanakan pengesahan borang melalui arahan Vue sendiri dan perpustakaan VeeValidate. Dengan menggunakan teknologi ini, kami boleh membangunkan halaman borang dengan lebih mudah dan cepat dengan fungsi lengkap dan kesahihan data yang terjamin. Saya berharap pengenalan dan contoh kod artikel ini dapat membantu anda melaksanakan pengesahan borang dalam pembangunan teknologi Vue.

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