Cara melaksanakan pengesahan dan penyerahan borang dalam Vue

Cara melaksanakan pengesahan dan penyerahan borang dalam Vue

Dalam pembangunan web, borang ialah antara muka penting untuk pengguna berinteraksi dengan halaman web. Data yang dimasukkan oleh pengguna dalam borang perlu disahkan dan diserahkan untuk memastikan kesahihan dan integriti data. Vue.js ialah rangka kerja bahagian hadapan yang popular yang menyediakan kaedah pengesahan dan penyerahan borang yang mudah, membolehkan kami melaksanakan fungsi borang dengan cepat. Artikel ini akan memperkenalkan cara menggunakan Vue.js untuk melaksanakan pengesahan dan penyerahan borang serta memberikan contoh kod khusus.

1 Pengesahan borang

1. Pasang pemalam vee-validate

#🎜🎜 #Vue .js menyediakan pemalam pengesahan borang yang berkuasa vee-validate Mula-mula kita perlu memasang pemalam melalui npm. vee-validate插件

Vue.js提供了一个强大的表单校验插件vee-validate，首先我们需要通过npm安装该插件。

npm install vee-validate

2. 在main.js中引入插件

在项目的main.js文件中引入插件并注册。

import Vue from 'vue';
import VeeValidate from 'vee-validate'; // 引入vee-validate插件

Vue.use(VeeValidate); // 注册插件

3. 在表单中添加校验规则

<template>
  <form @submit.prevent="submitForm">
    <div class="form-group">
      <label for="name">姓名</label>
      <input type="text" v-model="name" v-validate="'required'" name="name">
      <span v-show="errors.has('name')">{{ errors.first('name') }}</span>
    </div>
    <div class="form-group">
      <label for="email">邮箱</label>
      <input type="email" v-model="email" v-validate="'required|email'" name="email">
      <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

在上面的示例代码中，我们给两个输入框分别添加了v-validate指令。v-validate指令用于指定校验规则，以|分割多个校验规则。在这里，我们将姓名设置为required，即不能为空；将邮箱设置为required和email，即不能为空且必须为邮箱格式。使用errors.has('name')和errors.first('name')能够检测并显示校验错误信息。

4. 校验表单并提交

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    };
  },
  methods: {
    submitForm() {
      this.$validator.validateAll().then(result => {
        if (result) {
          // 表单校验通过，提交表单
          // 这里可以调用API进行数据提交
          console.log('表单提交成功');
        }
      });
    }
  }
};
</script>

在上面的代码中，我们在methods中定义了一个submitForm方法，当用户点击提交按钮时会触发该方法。在submitForm方法中，通过this.$validator.validateAll()来校验整个表单，返回一个Promise对象。如果校验通过，Promise会返回true，我们就可以在该回调函数中进行表单的提交操作。

二、表单提交

在表单校验通过之后，我们可以进行表单的提交，这里我们使用axios库来发送HTTP请求。首先，我们需要通过npm安装axios。

npm install axios

然后在Vue组件中引入axios，并修改submitForm方法：

import axios from 'axios';

// ...

methods: {
  submitForm() {
    this.$validator.validateAll().then(result => {
      if (result) {
        // 表单校验通过，提交表单
        axios.post('/api/submit', {
          name: this.name,
          email: this.email
        }).then(response => {
          console.log('表单提交成功');
        }).catch(error => {
          console.error('表单提交失败', error);
        });
      }
    });
  }
}

在上面的代码中，我们使用axios发送POST请求到/api/submit接口，并将表单数据作为请求体进行提交。在成功回调函数中输出'表单提交成功'rrreee

Perkenalkan pemalam dalam main.js

Dalam main.js projek fail Perkenalkan pemalam dan daftarkannya.

rrreee

Tambah peraturan pengesahan pada borang

rrreeeDalam kod sampel di atas, kami memberikan dua kotak input Ditambah v-sahkan arahan masing-masing. Arahan v-validate digunakan untuk menentukan peraturan pengesahan dan memisahkan berbilang peraturan pengesahan dengan |. Di sini, kami menetapkan nama kepada diperlukan, yang tidak boleh kosong; berada Dalam format e-mel. Gunakan errors.has('name') dan errors.first('name') untuk mengesan dan memaparkan mesej ralat pengesahan.

Sahkan borang dan serahkan

rrreee#🎜🎜#Dalam kod di atas, kami berada dalam kaedah Kaedah submitForm ditakrifkan dalam, yang akan dicetuskan apabila pengguna mengklik butang serah. Dalam kaedah submitForm, sahkan keseluruhan borang melalui this.$validator.validateAll() dan kembalikan objek Promise. Jika pengesahan lulus, Promise akan mengembalikan true dan kami boleh menyerahkan borang dalam fungsi panggil balik. #🎜🎜##🎜🎜# 2. Penyerahan borang #🎜🎜##🎜🎜#Selepas pengesahan borang lulus, kami boleh menyerahkan borang Di sini kami menggunakan perpustakaan axios untuk menghantar permintaan HTTP . Mula-mula, kita perlu memasang axios melalui npm. #🎜🎜#rrreee#🎜🎜#Kemudian perkenalkan axios dalam komponen Vue dan ubah suai kaedah submitForm: #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami menggunakan axios untuk menghantar permintaan POST ke /api / hantar antara muka dan serahkan data borang sebagai badan permintaan. Output 'Borang penyerahan berjaya' dalam fungsi panggil balik kejayaan dan maklumat ralat output dalam fungsi panggil balik kegagalan. #🎜🎜##🎜🎜# 3. Ringkasan #🎜🎜##🎜🎜# Melalui langkah di atas, kami menggunakan pemalam Vue.js dan VeeValidate untuk melaksanakan fungsi pengesahan dan penyerahan borang. Kami hanya perlu mengkonfigurasi peraturan pengesahan dan antara muka penyerahan untuk melengkapkan keseluruhan proses borang dengan mudah. Vue.js menyediakan fungsi pemprosesan borang yang kaya, yang membawa kemudahan yang hebat kepada pembangunan web kami. #🎜🎜##🎜🎜#Sudah tentu, kod di atas hanyalah contoh asas Dalam pembangunan sebenar, mungkin terdapat logik pengesahan dan penyerahan yang lebih kompleks, tetapi prinsipnya adalah sama. Dengan menggunakan fungsi bentuk Vue.js secara rasional, kami boleh membantu kami meningkatkan kecekapan pembangunan dan memastikan kesahihan dan integriti data, memberikan pengguna pengalaman interaktif yang lebih baik. #🎜🎜#

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