Bagaimana untuk melaksanakan pengesahan borang dalam Vue

Dengan pembangunan aplikasi web yang berterusan, pengesahan borang secara beransur-ansur menjadi bahagian yang sangat diperlukan dalam proses pembangunan web. Dalam Vue, pengesahan borang juga merupakan ciri yang sangat penting. Dalam artikel ini, kami akan memperkenalkan kaedah dan teknik asas tentang cara menggunakan Vue untuk melaksanakan pengesahan borang.

1. Pengesahan asas

Asas pengesahan borang adalah untuk mengesahkan data yang dimasukkan oleh pengguna dalam borang untuk memastikan ketepatan data. Dalam Vue, anda boleh menggunakan arahan v-model Vue sendiri untuk mengikat nilai elemen borang dan menggunakan arahan v-bind untuk mengikat peraturan pengesahan. Pada masa yang sama, anda boleh menetapkan pembolehubah dalam data komponen untuk merekodkan hasil pengesahan elemen borang.

Sebagai contoh, kami boleh mentakrifkan komponen borang untuk melaksanakan fungsi pengesahan nama pengguna dan kata laluan:

<template>
  <div>
    <label>用户名：</label>
    <input v-model="username" type="text" v-bind:class="{ error: !validUsername }">
    <span v-if="!validUsername">请输入合法的用户名！</span>
    <br>
    <label>密码：</label>
    <input v-model="password" type="password" v-bind:class="{ error: !validPassword }">
    <span v-if="!validPassword">请输入合法的密码！</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      validUsername: true,
      validPassword: true
    }
  },
  watch: {
    // 监听用户名输入框的值变化
    username() {
      this.validUsername = this.username.length > 3
    },
    // 监听密码输入框的值变化
    password() {
      this.validPassword = this.password.length > 5
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan arahan model v untuk mengikat input nama pengguna dan kata laluan Nilai kotak itu. Kemudian, gunakan arahan v-bind untuk mengikat peraturan pengesahan: jika nilai kotak input adalah menyalahi undang-undang, tambahkan nama kelas CSS bernama "ralat" pada elemen input. Akhir sekali, gunakan jam tangan untuk memantau perubahan nilai kotak input dan tetapkan status pengesahan yang sepadan mengikut peraturan pengesahan yang berbeza.

2. Peraturan pengesahan tersuai

Untuk beberapa elemen borang khas, kami perlu menyesuaikan peraturan pengesahan. Dalam Vue, anda boleh menggunakan kaedah pengiraan untuk mentakrifkan sifat yang dikira, mengira nilai unsur bentuk dan mendapatkan hasil pengesahan. Contohnya, anda boleh menyesuaikan peraturan pengesahan nombor telefon mudah alih:

<template>
  <div>
    <label>手机号码：</label>
    <input v-model="phone" type="text" v-bind:class="{ error: !validPhone}">
    <span v-if="!validPhone">请输入合法的手机号码！</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      validPhone: false
    }
  },
  computed: {
    validPhone() {
      const reg = /^1[3456789]d{9}$/ //定义手机号码正则表达式
      return reg.test(this.phone) //返回验证结果
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan kaedah pengiraan untuk mentakrifkan atribut yang dikira validPhone untuk mengesahkan nombor telefon mudah alih yang dimasukkan. Pertama, ungkapan biasa untuk nombor telefon mudah alih ditakrifkan, dan kemudian kaedah ujian digunakan untuk mengesahkan sama ada nilai kotak input mematuhi ungkapan biasa. Jika ia sepadan, kembalikan benar, jika tidak kembalikan palsu.

3. Pengesahan tak segerak

Dalam beberapa senario khas, seperti apabila pengesahan data perlu diperoleh daripada pelayan atau disahkan melalui Ajax, kami perlu menggunakan pengesahan tak segerak. Dalam Vue, anda boleh menggunakan pustaka axios atau mengambil API yang disediakan oleh Vue untuk mendapatkan data dan menggunakan janji untuk memproses hasil pemprosesan tak segerak.

Sebagai contoh, kami boleh menggunakan perpustakaan axios untuk melaksanakan pengesahan tak segerak:

<template>
  <div>
    <label>邮箱：</label>
    <input v-model="email" type="text" v-bind:class="{ error: !validEmail }">
    <span v-if="!validEmail">请输入合法的邮箱地址！</span>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      email: '',
      validEmail: false
    }
  },
  watch: {
    email() {
      if (this.email === '') {
        return
      }
      axios.get('/api/checkEmail', { //请求后台接口
        params: {
          email: this.email
        }
      }).then((response) => {
        if (response.data.success) {
          this.validEmail = true
        } else {
          this.validEmail = false
        }
      }).catch(() => {
        this.validEmail = false
      })
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan kaedah axios.get untuk menghantar permintaan, menghantar alamat e-mel dalam kotak input sebagai parameter Berikan antara muka latar belakang. Jika ia berjaya kembali, tetapkan nilai validEmail kepada benar, jika tidak tetapkannya kepada false.

Ringkasnya, melaksanakan pengesahan borang dalam Vue agak mudah Anda hanya perlu mengikut tiga bahagian di atas: pengesahan asas, peraturan pengesahan tersuai dan pengesahan tak segerak. Pada masa yang sama, fleksibiliti Vue membolehkan kami melaksanakan fungsi pengesahan bentuk yang lebih kompleks. Saya berharap pengenalan dalam artikel ini boleh membawa sedikit bantuan kepada kerja pembangunan Vue anda.

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