Vue verliert den Fokus der Inspektion

Vue.js ist ein beliebtes JavaScript-Framework, das häufig zur Entwicklung von Single-Page-Anwendungen und dynamischen Webanwendungen verwendet wird. Es ist einfach, flexibel und effizient. Bei der Entwicklung von Vue.js-Anwendungen ist es häufig erforderlich, die Funktion zur Überprüfung des Fokusverlusts zu implementieren, um die Richtigkeit der Benutzereingabedaten sicherzustellen. In diesem Artikel wird vorgestellt, wie Vue.js die Funktion zur Überprüfung des verlorenen Fokus implementiert.

Vue.js-Formularvalidierung

Vue.js bietet viele Formularvalidierungsfunktionen, mit denen Eingabedaten einfach überprüft werden können. Die Formularvalidierung von Vue.js kann auf folgende Weise implementiert werden:

1. Attributbindung: Verwenden Sie die v-bind-Direktive, um Attributwerte zu binden und Eingabewerte durch Angabe von Attributwerten zu überprüfen.
2. Listener: Verwenden Sie den Listener, um Änderungen in Eingabewerten zu überwachen und Fehlermeldungen anzuzeigen.
3. Benutzerdefinierte Anweisungen: Ermöglichen Sie Entwicklern, Anweisungen zur Überprüfung von Eingabewerten anzupassen.

Implementierung der Fokusverlustprüfung

Wie implementiert man die Funktion zur Fokusverlustprüfung in Vue.js? Der Implementierungsprozess ist wie folgt:

Erster Schritt: Definieren Sie die Validierungsregeln in der Eingabefeldkomponente:

<template>
  <div>
    <label for="name">姓名：</label>
    <input type="text" name="name" id="name" v-model="name" v-on:blur="checkName" />
    <span v-show="nameError" style="color: red;">请输入正确的姓名</span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        nameError: false
      }
    },
    methods: {
      checkName() {
        var reg = /^[u4e00-u9fa5]{2,4}$/;
        if (!reg.test(this.name)) {
          this.nameError = true;
        } else {
          this.nameError = false;
        }
      }
    }
  }
</script>

Zweiter Schritt: Schreiben Sie ein globales Mixin, um die Validierungsmethode global zu teilen:

Vue.mixin({
  methods: {
    checkValidate() {
      const refs = this.$refs;
      for (const ref in this.$refs) {
        if (refs.hasOwnProperty(ref)) {
          const element = refs[ref][0];
          if (element && element.required) {
            element.validate();
          }
        }
      }
    }
  }
})

Schritt 3, im Formular Call the checkValidate-Methode beim Senden:

<template>
  <div>
    <form action="/add" method="post" v-on:submit.prevent="checkValidate">
      <AddInput ref="addInput"></AddInput>
      <button type="submit">添加</button>
    </form>
  </div>
</template>

Durch die oben genannten Schritte können wir die Funktion zur Überprüfung des Fokusverlusts realisieren. Wenn das Eingabefeld den Fokus verliert, wird die checkName-Methode zur Überprüfung ausgeführt. Beim Absenden des Formulars wird die Methode checkValidate aufgerufen, um eine Formularüberprüfung durchzuführen und die Richtigkeit der vom Benutzer eingegebenen Daten sicherzustellen.

Das obige ist der detaillierte Inhalt vonVue verliert den Fokus der Inspektion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!