vue hilang semakan fokus

Vue.js ialah rangka kerja JavaScript popular yang digunakan secara meluas untuk membangunkan aplikasi satu halaman dan aplikasi web dinamik Ia mudah, fleksibel dan cekap. Dalam pembangunan aplikasi Vue.js, selalunya perlu untuk melaksanakan fungsi semakan kehilangan fokus untuk memastikan ketepatan data input pengguna. Artikel ini akan memperkenalkan cara Vue.js melaksanakan fungsi pemeriksaan fokus yang hilang.

Pengesahan borang Vue.js

Vue.js menyediakan banyak fungsi pengesahan borang, yang boleh mengesahkan data input dengan mudah. Pengesahan borang Vue.js boleh dilaksanakan dengan cara berikut:

1. Pengikatan atribut: Gunakan arahan v-bind untuk mengikat nilai atribut dan sahkan nilai input dengan menentukan nilai atribut.
2. Pendengar: Gunakan pendengar untuk memantau perubahan dalam nilai input dan memaparkan gesaan ralat.
3. Arahan tersuai: Membenarkan pembangun menyesuaikan arahan untuk mengesahkan nilai input.

Pelaksanaan semakan fokus hilang

Bagaimana untuk melaksanakan fungsi semakan fokus hilang dalam Vue.js? Proses pelaksanaan adalah seperti berikut:

Langkah pertama ialah mentakrifkan peraturan pengesahan dalam komponen kotak input:

<template>
  <div>
    <label for="name">姓名：</label>
    <input type="text" name="name" id="name" v-model="name" v-on:blur="checkName" />
    <span v-show="nameError" style="color: red;">请输入正确的姓名</span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        nameError: false
      }
    },
    methods: {
      checkName() {
        var reg = /^[u4e00-u9fa5]{2,4}$/;
        if (!reg.test(this.name)) {
          this.nameError = true;
        } else {
          this.nameError = false;
        }
      }
    }
  }
</script>

Langkah kedua ialah menulis campuran global untuk berkongsi kaedah pengesahan secara global :

Vue.mixin({
  methods: {
    checkValidate() {
      const refs = this.$refs;
      for (const ref in this.$refs) {
        if (refs.hasOwnProperty(ref)) {
          const element = refs[ref][0];
          if (element && element.required) {
            element.validate();
          }
        }
      }
    }
  }
})

Langkah ketiga ialah memanggil kaedah checkValidate apabila borang diserahkan:

<template>
  <div>
    <form action="/add" method="post" v-on:submit.prevent="checkValidate">
      <AddInput ref="addInput"></AddInput>
      <button type="submit">添加</button>
    </form>
  </div>
</template>

Melalui langkah di atas, kita boleh menyedari kehilangan fungsi pengesahan fokus. Apabila kotak input kehilangan fokus, kaedah checkName akan dilaksanakan untuk pengesahan. Apabila borang diserahkan, kaedah checkValidate dipanggil untuk mengesahkan borang untuk memastikan ketepatan data yang dimasukkan oleh pengguna.

Atas ialah kandungan terperinci vue hilang semakan fokus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!