Bagaimana untuk melaksanakan pengesahan data borang di bawah Vue?

Vue ialah rangka kerja bahagian hadapan yang sangat berkuasa yang menyediakan banyak ciri untuk membantu kami membangunkan aplikasi web berciri penuh dengan cepat. Ini termasuk pengesahan data borang, ciri yang sangat penting yang memastikan bahawa data yang dimasukkan oleh pengguna adalah sah, sah dan dijangka. Vue menyediakan beberapa kaedah berbeza untuk melaksanakan pengesahan data borang, dan artikel ini akan memperkenalkan beberapa kaedah secara terperinci.

1. Arahan pengesahan borang Vue sendiri

Vue menerima beberapa arahan terbina dalam dan boleh digunakan terus dalam templat untuk mengesahkan borang. Ini termasuk arahan seperti v-model, v-bind dan v-on. Arahan ini boleh terikat pada data contoh Vue semasa memproses nilai borang, dan juga boleh digunakan dengan arahan lain untuk melaksanakan pengesahan borang yang lebih kompleks. v-model、v-bind 和 v-on等指令。这些指令在处理表单值时，可以将其绑定到 Vue 实例的数据上，并且还可以与其他指令共同使用，来实现更加复杂的表单验证。

下面是一个示例，展示了如何用 v-model 和 v-on 指令来检查一个表单输入框中的邮件地址是否有效：

<template>
  <div>
    <input v-model="email" @blur="validateEmail" type="email" name="email" required>
    <div v-if="validEmail === false">请输入一个有效的邮箱地址。</div>
  </div>
</template>

<script>
export default {
  data() {
    // 初始值为空
    return {
      email: '',
      validEmail: null
    };
  },
  methods: {
    validateEmail() {
      const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
      this.validEmail = reg.test(this.email);
    }
  }
}
</script>

在此例中，我们在原始数据中添加了 validEmail 的属性，用于跟踪 validateEmail 方法的执行结果。然后，我们绑定了输入框的 v-model 和 v-on 指令，以及在失去焦点时触发的 @blur 事件。在该 @blur 事件中，validateEmail() 方法将输入值与正则表达式进行比较，如果匹配，则将 validEmail 属性设置为 true；否则设置为 false。最后，我们使用 v-if 指令来显示错误消息。

2. 使用插件进行表单校验

除了 Vue 自带的表单校验指令，我们还可以使用一些开源插件来帮助我们实现表单校验。其中最常用的插件是 VeeValidate 。它是一个基于模板的表单验证插件，提供了许多验证规则，例如 required、email、min_length等。此外，还可以自定义规则，满足自己的业务需求。

<template>
  <div>
    <input v-model="email" name="email" v-validate="'required|email'">
    <div v-show="errors.has('email')" class="text-danger">{{ errors.first('email') }}</div>
  </div>
</template>

<script>
import { required, email } from 'vee-validate/dist/rules';
import { extend } from 'vee-validate';
import { ValidationProvider, ValidationObserver, localize } from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN.json';

extend('required', required);

extend('email', email);

localize('zh_CN', zh_CN);

export default {
  data() {
    return {
      email: ''
    };
  },
  components: {
    ValidationProvider,
    ValidationObserver
  }
}
</script>

在此示例中，我们首先导入了 VeeValidate 中的必需引入的组件和方法。然后，我们添加了一个 v-validate 属性，指定某些指令来验证输入。该指令中的参数用于指定要应用的验证规则，例如 required 和 email。我们还可以使用类似于指令的方式来构建自定义规则。

3. 手动进行表单校验

除了自带指令和插件，我们还可以使用手动方式来进行表单验证。下面是一个在 Vue 中手动验证表单输入的示例代码：

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input type="text" v-model="username">
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    };
  },
  methods: {
    handleSubmit() {
      if (this.username === '') {
        alert('用户名不能为空！');
        return;
      }

      alert('提交成功！');
    }
  }
}
</script>

在此示例中，我们首先使用 v-model 将输入框的值绑定到组件的 username 属性上。然后，我们使用 @submit.prevent 监听表单的提交事件，并实现 handleSubmit

Berikut ialah contoh yang menunjukkan cara menggunakan arahan v-model dan v-on untuk menyemak sama ada alamat e-mel dalam kotak input borang adalah sah:

rrreee

Dalam contoh ini, kami menambahkan atribut validEmail pada data asal untuk menjejaki hasil pelaksanaan kaedah validateEmail. Kemudian, kami mengikat arahan v-model dan v-on kotak input, serta peristiwa @blur yang menyala apabila hilang fokus . Dalam acara @blur, kaedah validateEmail() membandingkan nilai input kepada ungkapan biasa dan jika ia sepadan, tetapkan atribut validEmail Adakah benar; jika tidak, ia ditetapkan kepada false. Akhir sekali, kami menggunakan arahan v-if untuk memaparkan mesej ralat.

Gunakan pemalam untuk pengesahan borang🎜🎜🎜Selain arahan pengesahan borang Vue sendiri, kami juga boleh menggunakan beberapa pemalam sumber terbuka untuk membantu kami melaksanakan pengesahan borang. Salah satu pemalam yang paling biasa digunakan ialah VeeValidate. Ia ialah pemalam pengesahan borang berasaskan templat yang menyediakan banyak peraturan pengesahan, seperti diperlukan, emel, min_length, dsb. Selain itu, anda boleh menyesuaikan peraturan untuk memenuhi keperluan perniagaan anda sendiri. 🎜rrreee🎜Dalam contoh ini, kami mula-mula mengimport komponen dan kaedah yang diperlukan dalam VeeValidate. Kemudian, kami menambah atribut v-validate yang menyatakan arahan tertentu untuk mengesahkan input. Parameter dalam arahan ini menentukan peraturan pengesahan untuk digunakan, seperti diperlukan dan e-mel. Kami juga boleh membina peraturan tersuai menggunakan sesuatu yang serupa dengan arahan. 🎜
🎜Pengesahan borang manual🎜🎜🎜Selain arahan terbina dalam dan pemalam, kami juga boleh menggunakan kaedah manual untuk melaksanakan pengesahan borang. Berikut ialah contoh kod untuk mengesahkan input borang secara manual dalam Vue: 🎜rrreee🎜 Dalam contoh ini, kami mula-mula menggunakan v-model untuk mengikat nilai kotak input pada nama pengguna / kod> atribut. Kemudian, kami menggunakan <code>@submit.prevent untuk mendengar acara penyerahan borang dan melaksanakan kaedah handleSubmit untuk pengesahan data. Dalam kaedah ini, kami mula-mula menyemak sama ada nama pengguna kosong, menggesa pengguna jika ia kosong dan menghalang borang daripada diserahkan. Jika tidak, mesej kejayaan dipaparkan. 🎜🎜Ringkasan🎜🎜Di atas ialah beberapa cara untuk mengesahkan data borang dalam Vue. Arahan terbina dalam Vue menyediakan pengesahan yang mudah dan pantas. Menggunakan pemalam VeeValidate, anda boleh melaksanakan definisi peraturan borang dengan cekap dan pelbagai. Pengesahan borang manual bukan sahaja menyusahkan, tetapi juga boleh membawa kepada isu penyelenggaraan kod dan kod yang panjang. Oleh itu, adalah sangat penting untuk memilih kaedah pengesahan borang yang sesuai berdasarkan keperluan perniagaan sebenar. 🎜

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