So schreiben Sie Inspektionsregeln in der Vue-Methode

Vue ist ein beliebtes JavaScript-Framework, das häufig zum Erstellen von SPA-Anwendungen (Single Page Application) verwendet wird. In Vue-Anwendungen ist die Validierung von Benutzereingaben ein sehr wichtiger Teil. In Vue können Sie die Gültigkeit von Benutzereingaben überprüfen, indem Sie einige Regeln und Methoden definieren, um sicherzustellen, dass sie den Anforderungen der Anwendung entsprechen und die Datensicherheit gewährleisten.

Vue bietet einige integrierte Validierungsregeln, wie zum Beispiel: erforderlich, E-Mail, numerisch usw. Sie können eine Datenbindung mit Eingabe- und Formularelementen durchführen, Validierungsregeln direkt an die entsprechenden Elemente binden und Daten über die v-model-Direktive an Vue-Instanzdaten binden. Darüber hinaus können Sie auch Regeln und Methoden zur Datenvalidierung anpassen.

1. Integrierte Validierungsregeln

Die Funktion der erforderlichen Regeln besteht darin, festzustellen, ob das Eingabefeld leer ist, schlägt die Überprüfung fehl.

In der Vorlage verwendet:

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

In der Vue-Instanz verwendet:

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

2. E-Mail

Die Funktion der E-Mail-Regel besteht darin, zu bestimmen, ob die Eingabe in einem zulässigen E-Mail-Format vorliegt.

In Vorlagen verwendet:

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

In Vue-Instanzen verwendet:

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

3. Die Funktion numerischer Regeln besteht darin, zu bestimmen, ob die Eingabe im reinen numerischen Format vorliegt.

Verwendung in Vorlagen:

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

Verwendung in Vue-Instanzen:

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

2. Benutzerdefinierte Regeln

Zusätzlich zur Verwendung der von Vue bereitgestellten integrierten Regeln können Sie auch Regeln anpassen, um Benutzereingaben zu validieren. Benutzerdefinierte Regeln können entsprechend den Anforderungen der Anwendung angepasst werden. Beispielsweise müssen die Eingabedaten innerhalb eines bestimmten Bereichs liegen, bestimmten regulären Ausdrücken entsprechen, bestimmte Datenformate erfüllen usw. Benutzerdefinierte Regeln können mit der Vue.directive-Methode implementiert werden. Übergeben Sie beim Binden einfach eine Überprüfungsfunktion.

Die Verwendung benutzerdefinierter Regeln durch Vorlagen ähnelt den integrierten Regeln. Definieren Sie zunächst eine Überprüfungsanweisung in der Vorlage und übergeben Sie dann die benutzerdefinierte Regelanweisung an die V-Bind-Anweisung des Eingabeelements, sodass das Eingabefeld angezeigt wird ist unscharf. Benutzerdefinierte Regeln werden ausgelöst.

Implementierung benutzerdefinierter Regeln:

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)
    }
  }
})

Verwenden Sie benutzerdefinierte Regeln in der Vorlage und übergeben Sie my-rule an den benutzerdefinierten Regelbefehl in der V-Bind-Anweisung:

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

3. Benutzerdefinierte Methode

Benutzerdefinierte Methoden können auch für verwendet werden Datenüberprüfung, hauptsächlich durch Schreiben einer Funktion, um zu bestimmen, ob die Eingabe den Regeln entspricht, und anschließendes Binden des entsprechenden Ereignisses über die v-on-Anweisung in der Vorlage und Aufrufen der benutzerdefinierten Methode im Code, die das Ereignis bindet.

Benutzerdefinierte Methoden in Vue schreiben:

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

Benutzerdefinierte Methoden in Vorlagen aufrufen:

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

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

Zusammenfassung:

Die Datenvalidierung in Vue ist eine Grundfunktion der Vue-Programmentwicklung, indem integrierte Regeln und benutzerdefinierte Regeln, benutzerdefinierte Methoden usw. verwendet werden Andere technische Mittel können die Datenüberprüfungsfunktion effektiv realisieren. Während des Entwicklungsprozesses kann der sinnvolle Einsatz dieser Technologien zur Überprüfung von Benutzereingaben nicht nur die Sicherheit und Stabilität des Programms verbessern, sondern auch das Benutzererlebnis verbessern.

Das obige ist der detaillierte Inhalt vonSo schreiben Sie Inspektionsregeln in der Vue-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!