Cara menggunakan acara pemulangan pengangkutan kotak input dan fungsi pengesahan dalam dokumen Vue

Vue ialah rangka kerja bahagian hadapan JavaScript yang popular dengan pengikatan data responsif dan sistem komponen pada terasnya. Dalam aplikasi Vue, kotak input ialah salah satu elemen UI yang paling biasa digunakan. Apabila pengguna memasukkan teks, kami berharap untuk mendengar acara pemulangan pengangkutan dan mengesahkan input sebelum menyerahkan. Artikel ini akan memperkenalkan kotak input masukkan acara dan penggunaan fungsi pengesahan dalam dokumen Vue.

1. Masukkan acara kotak input dalam Vue

Sangat mudah untuk memantau acara masukkan kotak input dalam Vue. Kita hanya perlu menggunakan pengubah suai @keydown.enter untuk mendengar untuk acara masuk. Contohnya:

<template>
  <div>
    <input v-model="content" @keydown.enter="submitForm">
    <button @click="submitForm">提交</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  methods: {
    submitForm() {
      // 提交表单代码
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan arahan v-model untuk mengikat nilai atribut content dan kotak input. Apabila kekunci Enter ditekan atau butang "Hantar" diklik, kaedah submitForm dipanggil untuk menyerahkan borang.

2. Fungsi pengesahan kotak input dalam Vue

Apabila mengesahkan kandungan input borang dalam Vue, kami boleh menulis fungsi semak untuk memastikan integriti dan ketepatan data borang . Fungsi ini boleh dipanggil sebelum borang diserahkan untuk menyemak data yang dimasukkan. Berikut ialah contoh menggunakan fungsi untuk mengesahkan data borang:

<template>
  <div>
    <input v-model="username" @blur="checkUsername">
    <input v-model="password" @blur="checkPassword">
    <button @click="submit">提交</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      usernameError: '',
      passwordError: ''
    }
  },
  methods: {
    checkUsername() {
      if (!this.username) {
        this.usernameError = '用户名不能为空';
      } else {
        this.usernameError = '';
      }
    },
    checkPassword() {
      if (!this.password) {
        this.passwordError = '密码不能为空';
      } else {
        this.passwordError = '';
      }
    },
    submit() {
      this.checkUsername();
      this.checkPassword();
      if (!this.usernameError && !this.passwordError) {
        // 提交表单代码
      }
    }
  }
}
</script>

Dalam kod di atas, kami mengikat nilai atribut v-model dan username dan kotak input melalui password arahan. Sahkan kandungan kotak input dalam kaedah checkUsername dan checkPassword Jika pengesahan gagal, tetapkan mesej ralat yang sepadan jika tidak, tetapkan mesej ralat kepada kosong. Apabila mengklik butang "Serah", kami memanggil kaedah submit untuk menyemak input dan menyerahkan borang.

Ringkasan

Artikel ini memperkenalkan cara menggunakan kotak input masukkan fungsi acara dan pengesahan dalam dokumen Vue. Dengan menggunakan @keydown.enter pengubah suai untuk mendengar acara pemulangan pengangkutan dan menulis fungsi semak untuk mengesahkan kandungan input, pemprosesan borang yang mudah dan boleh dipercayai boleh dicapai. Dalam pembangunan Vue, memahami dan menguasai kemahiran ini akan membantu kami melaksanakan aplikasi bahagian hadapan dengan lebih cekap.

Atas ialah kandungan terperinci Cara menggunakan acara pemulangan pengangkutan kotak input dan fungsi pengesahan dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!