Cara menulis peraturan pemeriksaan dalam kaedah vue

Vue ialah rangka kerja JavaScript popular yang sering digunakan untuk membina aplikasi SPA (Single Page Application). Dalam aplikasi Vue, mengesahkan input pengguna adalah bahagian yang sangat penting. Dalam Vue, anda boleh menyemak kesahihan input pengguna dengan mentakrifkan beberapa peraturan dan kaedah untuk memastikan ia memenuhi keperluan aplikasi dan memastikan keselamatan data.

Vue menyediakan beberapa peraturan pengesahan terbina dalam, seperti: diperlukan, e-mel, angka, dsb. Anda boleh melakukan pengikatan data dengan elemen input dan borang, mengikat peraturan pengesahan terus kepada elemen yang sepadan dan mengikat data kepada data contoh Vue melalui arahan model-v. Selain itu, anda juga boleh menyesuaikan peraturan dan kaedah untuk pengesahan data.

1. Peraturan pengesahan terbina dalam

1 diperlukan

Fungsi peraturan yang diperlukan adalah untuk menentukan sama ada kotak input kosong, pengesahan gagal.

Digunakan dalam templat:

<input type="text" v-model="name" required>

Digunakan dalam keadaan Vue:

data() {
  return {
    name: ''
  }
}

2 e-mel

Fungsi peraturan e-mel adalah untuk menentukan sama ada input adalah sah format e-mel.

Digunakan dalam templat:

<input type="email" v-model="email" required>

Digunakan dalam keadaan Vue:

data() {
  return {
    email: ''
  }
}

3 numerik

Fungsi peraturan angka adalah untuk menentukan sama ada input itu format Nombor tulen.

Digunakan dalam templat:

<input type="number" v-model="age" required>

Digunakan dalam contoh Vue:

data() {
  return {
    age: ''
  }
}

2. Peraturan tersuai

Selain menggunakan peraturan terbina dalam yang disediakan oleh Vue Selain itu, anda boleh menentukan peraturan tersuai untuk mengesahkan input pengguna. Peraturan tersuai boleh disesuaikan mengikut keperluan aplikasi Contohnya, data input mestilah dalam julat tertentu, mesti mematuhi ungkapan biasa tertentu, mesti memenuhi format data tertentu, dsb. Peraturan tersuai boleh dilaksanakan menggunakan kaedah Vue.directive Hanya masukkan fungsi pengesahan apabila mengikat.

Penggunaan templat peraturan tersuai adalah serupa dengan peraturan terbina dalam mula-mula tentukan arahan pengesahan dalam templat, dan kemudian hantar arahan peraturan tersuai kepada arahan v-bind bagi elemen input, supaya. ia boleh digunakan dalam kotak input Peraturan tersuai dicetuskan apabila tidak fokus.

Pelaksanaan peraturan tersuai:

Vue.directive('my-rule', {
  bind: function(el, binding, vnode) {
    el.addEventListener('blur', function() {
      const value = el.value
      const rule = binding.value.rule // 获取规则
      const errorMessage = binding.value.message // 获取错误提示信息
      const isValid = rule(value) // 验证数据
      if (!isValid) { // 显示错误提示
        const errorElement = document.createElement('div')
        errorElement.innerHTML = errorMessage
        errorElement.style.color = 'red'
        insertAfter(errorElement, el)
      } else { // 清除错误提示
        const errorElement = nextSibling(el)
        if (errorElement.nodeType === 1 && errorElement.className === 'error-msg') {
          el.parentNode.removeChild(errorElement)
        }
      }
    })
  }
})

// 实例
new Vue({
  el: '#app',
  data() {
    return {
      name: '',
      age: ''
    }
  },
  methods: {
    // 自定义规则
    myRule(value) {
      return value.length === 4 && /^d+$/.test(value)
    }
  }
})

Gunakan peraturan tersuai dalam templat dan hantar peraturan saya kepada arahan peraturan tersuai dalam arahan v-bind:

<input type="text" v-model="name" v-my-rule="{rule: myRule, message: '年龄必须是4位纯数字'}">

3. Kaedah tersuai

Kaedah tersuai juga boleh digunakan untuk pengesahan data, terutamanya dengan menulis fungsi untuk menentukan sama ada input mematuhi peraturan, dan kemudian mengikatnya melalui arahan v-on dalam templat Untuk acara yang sepadan , panggil kaedah tersuai dalam kod yang mengikat acara.

Penulisan kaedah tersuai dalam Vue:

methods: {
  myMethod(value) {
    return value.length === 11 && /^1d{10}$/.test(value)
  }
}

Panggil kaedah tersuai dalam templat:

<input type="text" v-model="phone" v-on:blur="checkPhone">

methods: {
  checkPhone() {
    const phone = this.phone
    const isValid = this.myMethod(phone)
    if (!isValid) {
      alert('请输入正确的手机号码')
    }
  }
}

Ringkasan:

Pengesahan data dalam Vue ialah Fungsi asas pembangunan program Vue, melalui penggunaan peraturan terbina dalam, peraturan tersuai, kaedah tersuai dan cara teknikal lain, fungsi pengesahan data dapat direalisasikan dengan berkesan. Semasa proses pembangunan, penggunaan munasabah teknologi ini untuk mengesahkan input pengguna bukan sahaja dapat meningkatkan keselamatan dan kestabilan program, tetapi juga meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Cara menulis peraturan pemeriksaan dalam kaedah vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!