So implementieren Sie die dynamische Formularvalidierung über Vue

Mit der rasanten Entwicklung der Front-End-Entwicklung ist die Formularvalidierung zu einer wesentlichen Fähigkeit für die Front-End-Entwicklung geworden. Als eines der aktuellen Mainstream-Frontend-Frameworks bietet Vue auch eine sehr praktische und effiziente Lösung für die Formularvalidierung. In diesem Artikel wird die Implementierung der dynamischen Formularüberprüfung durch Vue unter den folgenden drei Aspekten vorgestellt.

1. Das Formularvalidierungsprinzip in Vue

Das Formularvalidierungsprinzip in Vue wird hauptsächlich durch V-Modell und berechnete Attribute implementiert. Das V-Modell wird verwendet, um die bidirektionale Bindung des Formulars zu implementieren, und das berechnete Attribut kann dynamisch Validierungsregeln basierend auf den vom V-Modell an das Formularsteuerelement gebundenen Daten generieren. Wenn sich die Formularsteuerdaten ändern, wird auch die berechnete Eigenschaft neu berechnet und aktualisiert, und die Validierungsregeln werden neu generiert und treten in Kraft.

2. Formularvalidierungsmethoden in Vue

Vue bietet eine Vielzahl von Methoden zur Implementierung der Formularvalidierung, darunter benutzerdefinierte Validatoren, integrierte Validatoren und Plug-ins von Drittanbietern.

(1) Benutzerdefinierter Validator

Durch die Definition einer Methode muss die Methode „true“ oder „false“ zurückgeben, um anzugeben, ob die Formularüberprüfung bestanden wurde, wie unten gezeigt:

methods: {
  validateEmail(email) {
    // 正则表达式验证邮箱格式是否正确
    const reg = /^([a-zA-Z]|[0-9])(w|-)+@[a-zA-Z0-9]+.[a-zA-Z]{2,4}$/;
    return reg.test(email);
  }
}

Binden Sie die Methode an das Formularsteuerelement und fügen Sie v-show hinzu Anweisungen zum Implementieren der Formularvalidierung, wie unten gezeigt:

<input v-model="email" />
<span v-show="!validateEmail(email)">邮箱格式不正确</span>

(2) Integrierter Validator

Vues integrierte Validatoren umfassen erforderliche, E-Mail-, numerische usw. Diese Validatoren können direkt im Formularsteuerelement verwendet werden, wie unten gezeigt :

<input type="text" v-model="name" required />
<span v-show="$v.name.$error">姓名不能为空</span>

<input type="email" v-model="email" />
<span v-show="$v.email.$error">邮箱格式不正确</span>

<input type="number" v-model="age" />
<span v-show="$v.age.$error">年龄必须是数字</span>

(3) Plug-ins von Drittanbietern

Vue verfügt auch über mehrere Plug-ins von Drittanbietern für die Formularvalidierung, beispielsweise das VeeValidate-Plug-in. VeeValidate kann die Komplexität der Formularvalidierung erheblich vereinfachen und auch erweiterte Funktionen wie i18n und benutzerdefinierte Nachrichten unterstützen.

3. Beispiel zur Formularüberprüfung in Vue

Das Folgende ist ein Beispiel für die Implementierung der Benutzerregistrierungsformularüberprüfung. In diesem Beispiel wird das VeeValidate-Plug-in verwendet, um die Namens-, E-Mail- und Passwortüberprüfung zu implementieren:

<template>
  <div>
    <form @submit.prevent="submitForm">
      <label>姓名:</label>
      <input type="text" v-model="name" v-validate="'required'" />
      <span v-show="errors.has('name')">{{ errors.first('name') }}</span>
       
      <label>邮箱:</label>
      <input type="text" v-model="email" v-validate="'required|email'" />
      <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
       
      <label>密码:</label>
      <input type="password" v-model="password" v-validate="'required'" />
      <span v-show="errors.has('password')">{{ errors.first('password') }}</span>
      
      <button type="submit" :disabled="errors.any()">提交</button>
    </form>
  </div>
</template>

<script>
import { required, email } from 'vee-validate/dist/rules';
import { extend, ValidationProvider, ValidationObserver, setInteractionMode } from 'vee-validate';

setInteractionMode('eager');

extend('required', required);
extend('email', email);

export default {
  components: {
    ValidationProvider,
    ValidationObserver,
  },

  data() {
    return {
      name: '',
      email: '',
      password: '',
    };
  },

  methods: {
    submitForm() {
      alert('表单验证通过，开始提交数据');
    },
  },
};
</script>

Im obigen Beispiel haben wir es vorgestellt VeeValidate-Plug-in und erweitert die erforderlichen und E-Mail-Validierungsregeln durch die Extend-Methode. In der Vorlage haben wir V-Validate-Anweisungen für die Namens-, E-Mail- und Passwortkontrollen festgelegt und entsprechende Verifizierungsregeln hinzugefügt. Wir legen außerdem eine Beurteilungsformel für die Schaltfläche „Senden“ fest, um festzustellen, ob im Formular ein Fehler vorliegt. Wenn ein Fehler vorliegt, wird die Schaltfläche „Senden“ deaktiviert.

Anhand der obigen Beispiele können wir sehen, dass das VeeValidate-Plug-in die Komplexität der Formularvalidierung erheblich vereinfachen kann und gleichzeitig umfassende Validierungsregeln und erweiterte Funktionen bereitstellt, wodurch die Formularvalidierung bequemer und schneller wird.

Kurz gesagt, Vue bietet eine Vielzahl von Möglichkeiten zur Implementierung der Formularüberprüfung, und Entwickler können je nach spezifischen Anforderungen die für sie geeignete Überprüfungsmethode auswählen. Unabhängig von der verwendeten Methode kann eine gute Formularvalidierung das Benutzererlebnis und die Datensicherheit verbessern sowie die Stabilität und Zuverlässigkeit von Webanwendungen erhöhen.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die dynamische Formularvalidierung über Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!