Cara mengendalikan pengikatan dua hala dan pengesahan data borang dalam Vue

Cara mengendalikan pengikatan dua hala dan pengesahan data borang dalam Vue memerlukan contoh kod khusus

Pengenalan:
Dalam pembangunan bahagian hadapan, borang ialah salah satu komponen interaktif yang paling biasa. Untuk mencapai pengikatan dan pengesahan dua hala data borang, Vue menyediakan beberapa fungsi dan kaedah yang berkuasa. Artikel ini akan memperkenalkan secara terperinci cara mengendalikan pengikatan dan pengesahan dua hala data borang dalam Vue, dan menyediakan contoh kod khusus untuk membantu pembaca menguasai pengetahuan ini dengan lebih baik.

1. Pengikatan dua hala

Dalam Vue, pengikatan dua hala data borang boleh dicapai melalui arahan v-model. Pengikatan dua hala bermakna perubahan dalam kandungan input borang akan ditunjukkan dalam data tika Vue dalam masa nyata, dan pada masa yang sama, perubahan dalam data dalam tika Vue juga akan dikemas kini dalam borang dalam masa nyata .

Contoh kod khusus adalah seperti berikut:

<template>
  <div>
    <input v-model="name" type="text" placeholder="请输入姓名">
    <p>姓名：{{name}}</p>
  </div>
</template>

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

Dalam kod di atas, nilai teg input diikat dua hala kepada atribut nama dalam contoh Vue melalui arahan model-v. Apabila nilai dalam kotak input berubah, atribut nama dalam contoh Vue akan dikemas kini dengan sewajarnya dan dipaparkan pada halaman.

2. Pengesahan borang

Dalam pembangunan sebenar, pengesahan borang adalah fungsi penting. Vue menyediakan banyak arahan dan kaedah untuk melaksanakan pengesahan borang.

1. Pengesahan borang asas

Dalam Vue, kita boleh menggunakan arahan v-validate untuk melaksanakan pengesahan asas borang. Contoh khusus adalah seperti berikut:

<template>
  <div>
    <input v-model="name" type="text" placeholder="请输入姓名" v-validate="'required'">
    <p v-show="errors.has('name')">{{ errors.first('name') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  mounted() {
    this.$validator.extend('required', {
      validate: value => {
        return value.trim() !== ''
      },
      message: '姓名不能为空'
    })
  }
}
</script>

Dalam kod di atas, kami menggunakan arahan v-validate untuk melaksanakan pengesahan asas pada teg input, yang memerlukan input tidak boleh kosong. Apabila tiada kandungan dalam kotak input, mesej ralat akan dipaparkan dalam tag p.

2. Peraturan pengesahan tersuai

Selain pengesahan borang asas, kami juga boleh menyesuaikan peraturan pengesahan. Dalam Vue, peraturan pengesahan tersuai dilaksanakan dengan memanjangkan pemalam vue-validator. vue-validator来实现自定义验证规则。

具体的代码示例如下：

<template>
  <div>
    <input v-model="password" type="password" placeholder="请输入密码" v-validate="'password'">
    <p v-show="errors.has('password')">{{ errors.first('password') }}</p>
  </div>
</template>

<script>
import { extend } from 'vue-validator'

export default {
  data() {
    return {
      password: ''
    }
  },
  mounted() {
    extend('password', {
      validate: value => {
        return value.length >= 6 && /d/.test(value) && /[a-zA-Z]/.test(value)
      },
      message: '密码长度至少为6位且包含字母和数字'
    })
  }
}
</script>

在上述代码中，我们定义了一个名为password

Contoh kod khusus adalah seperti berikut:

rrreee

Dalam kod di atas, kami mentakrifkan peraturan pengesahan tersuai bernama kata laluan, yang memerlukan kata laluan sekurang-kurangnya 6 aksara dan mengandungi huruf dan nombor . Apabila kandungan dalam kotak input tidak memenuhi peraturan ini, mesej ralat yang sepadan akan dipaparkan dalam tag p.

Ringkasan: 🎜🎜Melalui pengenalan artikel ini, kita dapat melihat bahawa pemprosesan pengikatan dua hala dan pengesahan data borang dalam Vue adalah sangat mudah dan fleksibel. Vue menyediakan banyak arahan dan kaedah yang membolehkan kami melaksanakan fungsi pengikatan dan pengesahan dua hala dengan mudah. Saya harap artikel ini akan membantu anda dan membantu anda memahami dengan lebih baik kaedah pengikatan dan pengesahan dua hala data borang dalam Vue. 🎜

Atas ialah kandungan terperinci Cara mengendalikan pengikatan dua hala dan pengesahan data borang dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!