Cara mengendalikan ruang semasa mengesahkan ruang dalam vue

Dengan pembangunan berterusan teknologi bahagian hadapan, Vue, sebagai rangka kerja JavaScript yang ringan, telah digunakan secara meluas dalam pelbagai jenis aplikasi web. Dalam Vue, kami biasanya perlu melakukan beberapa pengesahan asas pada data borang yang dimasukkan oleh pengguna. Di antara semakan ini, pemprosesan ruang dalam input adalah isu yang perlu diberi perhatian.

Secara umumnya, peraturan pengesahan borang bahagian hadapan terutamanya termasuk medan, format, panjang yang diperlukan, dsb. Penggubalan peraturan pengesahan selalunya berdasarkan logik perniagaan dan pengalaman pengguna. Oleh itu, anda juga perlu memilih pemalam pengesahan yang baik. Terdapat pelbagai pemalam pengesahan yang tersedia dalam rangka kerja Vue, seperti VeeValidate, Vuelidate, dsb.

Ingin menggunakan Vuelidate sebagai contoh untuk menerangkan cara mengendalikan ruang.

Pertama, dalam projek Vue, kita perlu memasang pemalam Vuelidate terlebih dahulu. Masukkan dalam baris arahan:

npm install vuelidate --save

Selepas pemasangan selesai, dalam fail masukan Vue main.js, perkenalkan pemalam Vuelidate dan daftarkannya:

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Seterusnya, dalam komponen Laksanakan operasi yang berkaitan. Katakan kita perlu mengesahkan kotak input dan memerlukan input pengguna tidak boleh mengandungi ruang.

<template>
  <div>
    <label>Name:</label>
    <input v-model.trim="$v.name.$model" type="text" placeholder="Input your name">
    <p v-if="$v.name.$error">Your name cannot contain spaces.</p>
  </div>
</template>

<script>
export default {
  name: 'testcomponent',
  validations: {
    name: {
      noSpace(value) {
        return /^[^\s]*$/.test(value)
      }
    }
  }
}
</script>

Dalam kod di atas, kami telah menggunakan pengubah trim untuk menapis ruang secara automatik dalam input pengguna. Pada masa yang sama, kami mentakrifkan objek pengesahan dalam pilihan komponen untuk menyimpan peraturan pengesahan kami. Antaranya, nama ialah model data yang terikat pada kotak input kami, dan noSpace ialah fungsi peraturan pengesahan tersuai kami.

Dalam fungsi pengesahan tersuai ini, kami menggunakan ungkapan biasa untuk menentukan sama ada kandungan input mengandungi ruang. Jika ia mengandungi ruang dan ungkapan mengembalikan palsu, ini bermakna pengesahan gagal dan mesej segera akan dipaparkan pada halaman.

Apabila menggunakan Vuelidate untuk pengesahan, anda juga boleh menggunakan pengesah terbina dalam dengan peraturan pengesahan lalai, seperti e-mel, diperlukan, maxLength, dsb. Dalam penggunaan sebenar, kami boleh menyesuaikan beberapa fungsi peraturan pengesahan seperti yang diperlukan untuk menyelesaikan operasi seperti mengesahkan ruang.

Perlu diambil perhatian bahawa dalam peraturan pengesahan Vuelidate, kami boleh mengesahkan atribut tertentu model data atau model data itu sendiri. Jika anda perlu mengesahkan berbilang atribut, anda boleh menggunakan operator logik seperti $and untuk menggabungkannya. Untuk kaedah operasi terperinci, sila rujuk dokumentasi rasmi Vuelidate.

Secara umumnya, menggunakan Vuelidate untuk mengesahkan ruang dalam rangka kerja Vue ialah operasi yang agak mudah dan fleksibel. Dalam proses pembangunan sebenar, kita boleh memilih pemalam pengesahan yang berbeza mengikut keperluan untuk melengkapkan pengesahan dan pemprosesan data input.

Atas ialah kandungan terperinci Cara mengendalikan ruang semasa mengesahkan ruang dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!