Bagaimana untuk memproses borang dalam Vue?

Dengan populariti aplikasi web, borang telah menjadi bahagian penting dalam interaksi pengguna. Dalam Vue.js, kami boleh menggunakan arahan dan kaedah yang disediakan untuk memproses borang, menjadikan pembangunan lebih mudah. Artikel ini akan memperkenalkan pemprosesan borang dalam Vue, termasuk pengikatan borang, pengesahan, penyerahan, dsb.

1. Pengikatan borang

Arahan model v digunakan dalam Vue untuk mencapai pengikatan dua hala medan borang dan data. Kita boleh menggunakan arahan ini pada elemen borang untuk mengikat nilai borang kepada data komponen. Seperti yang ditunjukkan di bawah:

<template>
  <div>
    <input type="text" v-model="inputValue" placeholder="请输入...">
    <p>{{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

Dalam kod di atas, kami mengikat atribut nilai elemen input kepada data inputValue komponen, dengan itu mencapai pengikatan dua hala. Apabila pengguna mengubah suai nilai borang melalui kotak input, Vue akan mengemas kini data komponen secara automatik. Begitu juga, paparan dikemas kini secara automatik apabila data komponen diubah suai.

2. Pengesahan borang

Sebelum menyerahkan borang, biasanya kami perlu mengesahkan data borang untuk memastikan data itu sah dan lengkap. Dalam Vue.js, anda juga boleh menggunakan pemalam pengesahan yang disediakan untuk mengesahkan data borang. Antaranya, pemalam pengesahan yang paling biasa ialah Vuelidate.

Vuelidate menyediakan pelbagai peraturan dan kaedah pengesahan yang boleh digunakan untuk mengesahkan nilai input dalam borang. Beberapa peraturan pengesahan yang biasa digunakan adalah seperti berikut:

• diperlukan: Nilai mesti wujud.
• MinLength: Panjang nilai mestilah lebih besar daripada atau sama dengan panjang yang ditentukan.
• maxLength: Panjang nilai mestilah kurang daripada atau sama dengan panjang yang ditentukan.
• e-mel: Nilai mestilah dalam format e-mel yang sah.

Kami boleh menggunakan peraturan ini pada nilai borang dan menyemaknya sebelum borang diserahkan. Seperti yang ditunjukkan di bawah:

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="username" placeholder="请输入用户名">
      <input type="password" v-model="password" placeholder="请输入密码">
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import { required, minLength } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  validations: {
    username: { required, minLength: minLength(6) },
    password: { required, minLength: minLength(8) }
  },
  methods: {
    submitForm() {
      if (this.$v.$invalid) {
        console.log('表单校验失败')
        return
      }
      console.log('表单校验通过')
    }
  }
}
</script>

Dalam kod di atas, kami mengikat nilai elemen borang pada data komponen dan menggunakan peraturan pengesahan yang disediakan oleh Vuelidate untuk mengesahkan nilai. Selepas menetapkan peraturan pengesahan dalam pilihan pengesahan komponen, kita boleh memanggil atribut $v apabila borang diserahkan untuk menentukan sama ada data borang itu sah. Jika atribut $v.$invalid adalah benar, pengesahan borang gagal. Jika tidak, data borang boleh diserahkan.

3. Penyerahan borang

Selepas pengesahan borang lulus, kami perlu menyerahkan data borang ke pelayan untuk diproses. Dalam Vue, kami boleh menyerahkan data borang melalui AJAX. Sebagai contoh, kod sampel untuk menyerahkan data borang menggunakan perpustakaan Axios adalah seperti berikut:

<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="username" placeholder="请输入用户名">
      <input type="password" v-model="password" placeholder="请输入密码">
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    submitForm() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
        .then(response => {
          console.log('表单提交成功')
        })
        .catch(error => {
          console.log('表单提交失败')
        })
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan kaedah pos pustaka Axios semasa menyerahkan borang. Kaedah ini menghantar permintaan POST ke pelayan dan menghantar data borang sebagai badan permintaan. Selepas permintaan berjaya atau gagal, kami boleh melakukan pemprosesan yang sepadan dalam kaedah then or catch.

Ringkasan

Memproses borang dalam Vue.js memerlukan operasi seperti pengikatan data, pengesahan dan penyerahan. Vue menyediakan arahan model v dan data komponen untuk melaksanakan pengikatan data, dan anda juga boleh menggunakan pemalam pengesahan untuk mengesahkan data borang. Selepas data borang disahkan, kami boleh menggunakan teknologi AJAX untuk menyerahkan data borang kepada pelayan untuk diproses. Di atas adalah ringkasan artikel ini, saya harap ia akan membantu semua orang untuk memahami pemprosesan borang Vue.

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