Cara menggunakan fungsi pengesahan borang dalam dokumentasi Vue

Vue ialah rangka kerja JavaScript progresif untuk membina antara muka pengguna. Fokus Vue ialah kesederhanaan dan fleksibilitinya, yang boleh digunakan dalam hampir mana-mana projek. Sebagai pembangun bahagian hadapan, kita selalunya perlu menggunakan fungsi dalam pengesahan borang. Dokumentasi Vue menyediakan beberapa fungsi pengesahan borang, yang sangat praktikal dan boleh membantu pembangun melengkapkan pengesahan borang dengan lebih cekap. Artikel ini akan memperkenalkan cara menggunakan fungsi pengesahan borang dalam dokumen Vue.

Pertama, kita perlu menggunakan v-model untuk mengikat nilai medan borang dalam templat Vue. Contohnya, kod berikut menggunakan v-model untuk mengikat nilai kotak input:

<template>
  <div>
    <input type="text" v-model="username">
  </div>
</template>

Dalam dokumentasi Vue, fungsi pengesahan borang disertakan dalam kaedah contoh Vue $validator. Untuk menggunakan fungsi pengesahan borang, kami perlu memperkenalkan pemalam VeeValidate terlebih dahulu melalui Vue.use(VeeValidate), iaitu pemalam pengesahan borang yang disyorkan secara rasmi untuk Vue.

Selepas memperkenalkan VeeValidate, kita boleh memanggil kaedah $validator dalam kitaran hayat tika Vue, seperti dalam kaedah created(), untuk melengkapkan permulaan apabila tika Vue dibuat.

<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';  // 引入VeeValidate插件
Vue.use(VeeValidate);  // 使用VeeValidate
export default {
  name: 'formDemo',
  data() {
    return {
      username: '',
    };
  },
  created() {
    this.$validator.localize('zh_CN', {  // 将验证器语言设置为中文
      messages: {
        required: (field) => `${field}不能为空`,
      },
    });
  }
}

Dalam kod di atas, dalam kaedah created(), kami menggunakan kaedah this.$validator.localize() untuk menetapkan bahasa pengesah kepada bahasa Cina dan mentakrifkan mesej ralat tersuai. required di sini ialah peraturan VeeValidate lalai, yang menunjukkan bahawa medan ini diperlukan. Dalam contoh ini, mesej ralat tersuai ialah "Nama pengguna tidak boleh kosong."

Kini, kami mentakrifkan peraturan VeeValidate tersuai checkUsernameAvailable yang dalam kes ini digunakan untuk menyemak sama ada nama pengguna tersedia. Dalam peraturan ini, kami mempunyai akses kepada nilai yang terikat pada kotak input dan kami kemudian boleh menghantar nilai itu kepada pelayan menggunakan kaedah POST permintaan Axios. Jika hasil yang dikembalikan ialah kod status data 200, ini bermakna nama pengguna tersedia, jika tidak, ia bermakna nama pengguna tidak tersedia.

<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import axios from 'axios';
Vue.use(VeeValidate);
export default {
  name: 'formDemo',
  data() {
    return {
      username: '',
    };
  },
  created() {
    this.$validator.localize('zh_CN', {
      messages: {
        required: (field) => `${field}不能为空`,
        checkUsernameAvailable: (field) => `${field}已经被注册了`,
      },
    });

    this.$validator.extend('checkUsernameAvailable', {
      getMessage: (field, params, data) => data.message,
      validate: async (value) => {
        const { data } = await axios.post('/api/checkusername', {
          username: value,
        });
        return {
          valid: data.status === 200,
          data: data,
        };
      },
    });
  }
}
</script>

Dalam kod di atas, kami mentakrifkan peraturan pengesahan dengan fungsi tersuai checkUsernameAvailable, yang menggunakan tak segerak/menunggu untuk menunggu respons kaedah POST Axios. Jika kod status dalam respons ialah 200, true dikembalikan, jika tidak false dikembalikan.

Akhir sekali, kita perlu mengikat peraturan pengesahan ini pada borang HTML. Tambahkan atribut data-vv-validate pada elemen borang Ini memberitahu Vue Validator untuk mula mengesahkan borang. Kemudian, kami menambah peraturan tersuai v-validate="{ rules: { checkUsernameAvailable: true } }" pada elemen borang yang memerlukan pengesahan. Ini memberitahu Vue Validator untuk menggunakan peraturan pengesahan tersuai kami.

<template>
  <div>
    <form @submit.prevent="">
      <div>
        <input type="text" name="username" v-model="username" data-vv-validate="''" v-validate="{ rules: { checkUsernameAvailable: true } }" placeholder="请输入用户名">
        <div v-show="errors.has('username')" class="invalid-feedback">{{ errors.first('username') }}</div>
      </div>
      <button @click="submitForm">提交</button>
    </form>
  </div>
</template>

Dalam kod di atas, kami menambahkan mesej ralat v-show="errors.has('username')" pada kotak input, yang akan dipaparkan apabila mesej ralat tidak kosong.

Kini, kami telah menyelesaikan penciptaan dan pengikatan peraturan pengesahan tersuai. Jika nilai dalam kotak input nama pengguna tersedia di bahagian pelayan, borang menyerahkan data, jika tidak, Vue Validator akan memaparkan mesej ralat tersuai.

Secara keseluruhan, Vue Validator ialah pemalam pengesahan borang yang sangat berkuasa dan mudah digunakan. Vue menyediakan platform yang sangat baik untuk pembangun bahagian hadapan untuk membangunkan pengesahan borang dengan cepat Penggunaan Vue Validator mudah difahami dan boleh meningkatkan kecekapan pembangunan.

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