So implementieren Sie das mobile Anmelde- und Registrierungsmodul elegant in vue3

Vorwort

Das kürzlich entwickelte Mobilprojekt verwendet direkt Vue3. Die neue Feature-Composition-API hat tatsächlich eine völlig neue Entwicklungserfahrung gebracht. Bei Verwendung dieser Funktionen können Entwickler hochgradig gekoppelte Zustände und Methoden für eine einheitliche Verwaltung zusammenstellen und hochgradig wiederverwendbaren Logikcode je nach spezifischen Umständen separat kapseln, was sehr hilfreich ist, um die Robustheit der gesamten Codearchitektur zu verbessern.

Heutzutage enthält fast jedes neu gestartete mobile Projekt ein Registrierungs- und Anmeldemodul. In dieser Praxis haben wir einige Erfahrungszusammenfassungen zu den Formularsteuerelementen im Anmelde- und Registrierungsprozess erstellt und die Wartbarkeit und Entwicklungseffizienz des Codes durch das Extrahieren gemeinsamer Codes verbessert.

Schauen Sie sich als nächstes die von den Kunststudenten bereitgestellten Bilder an.

Registrierungsseite

Anmeldeseite

Seite „Passwort vergessen“

Seite „Passwort ändern“

Wenn wir die Produktbilder oben betrachten, können wir deutlich erkennen, dass die Kernkomponente des gesamten Anmelde- und Registrierungsmoduls das Eingabefeld ist. Solange die Eingabefeldkomponente vollständig entwickelt ist, können andere Seiten direkt darauf verweisen.

Nachdem das Eingabefeld entwickelt wurde, wird nur die statische Seitenanzeige realisiert. Darüber hinaus müssen wir auch eine allgemeine Datenüberprüfungslösung entwerfen, die auf die Formularsteuerelemente auf jeder Seite angewendet werden soll.

Eingabefeldkomponente

Aus der obigen Analyse können wir erkennen, dass die Eingabefeldkomponente den Kerninhalt des gesamten Anmelde- und Registrierungsmoduls darstellt. Schauen wir uns zunächst die UI-Formulare der Eingabefeldkomponente an.

Formular 1

Links steht der Text +86, in der Mitte ein Eingabefeld und rechts ein Kreuzsymbol, wenn im Eingabefeld Daten erkannt werden. Wenn keine Daten vorhanden sind, ist das Feld leer und das Symbol ist ausgeblendet.

Form 2

Es gibt nur ein Eingabefeld auf der linken Seite und Text auf der rechten Seite. Der Inhalt des Textes kann ein Bestätigungscode oder ein Countdown-Text sein, der nach dem Klicken auf den Bestätigungscode angezeigt wird.

Form Drei

Es gibt weiterhin nur ein Eingabefeld auf der linken Seite. Wenn erkannt wird, dass das Eingabefeld auf der rechten Seite Inhalt hat, wird ein Kreuzsymbol angezeigt. Wenn der Inhalt leer ist, wird das Symbol ausgeblendet.

Layout

Basierend auf den obigen Beobachtungen können wir diese Eingabekomponente in drei Teile unterteilen: links, Mitte und rechts. Die linke Seite kann Text enthalten oder leer sein. Die Mitte ist ein Eingabefeld. Die rechte Seite kann Text oder ein Kreuzsymbol enthalten.

Der Inhalt der Vorlage lautet wie folgt:

<Vorlage>
 <div Klasse="Eingabe">
  <!--Linke Seite, es ist der linke Inhalt-->
   <span class="left-text">
   {{ lt }}
   </span>
  
  <!--Mitte-->
  <input class="content" v-bind="$attrs" :value="Wert" @input="onChange" /> 
  
  <!--Auf der rechten Seite befindet sich am Ende der RT-Beurteilung ein Bestätigungscode oder ein Kreuzsymbol-->
   <div v-if="rt == 'timer'" Klasse="rechter-Abschnitt">
    {{ timerData.content }} <!--Es kann sich um einen „Bestätigungscode“ oder einen Countdown handeln -->
   </div>
   <div
   v-else-if="rt == 'schließen'"
   Klasse = "Rechter Abschnitt"
   >
   <van-icon name="schließen" /> <!--Gabelsymbol-->
   </div>
 </div> 
</Vorlage>

Im Layout sind die linken, mittleren und rechten übergeordneten Elemente auf „display:flex“ eingestellt und die drei untergeordneten Elemente sind alle auf den Inline-Blockmodus „display:inline-block“ eingestellt, sodass die linke und rechte Seite sich an ihren eigenen Inhalt anpassen können und der mittlere Eingang auf „flex:1“ eingestellt ist, um die verbleibende Breite auszufüllen.

Theoretisch ist eine solche Anordnung realisierbar, in der Praxis traten jedoch Probleme auf.

Der Demoeffekt ist wie folgt:

Wenn die Breite der rechten Seite weiter zunimmt, läuft der mittlere Eingang aufgrund der Standardbreite auf der rechten Seite über, was wir nicht möchten.

Die Lösung für dieses Problem ist ganz einfach. Setzen Sie einfach die Breite des mittleren Eingangs auf 0. Folgendes wird den gewünschten Effekt erzielen.

V-Modell

Die Komponentenstruktur des obigen Pakets, auf das von der externen Seite verwiesen wird, ist wie folgt:

 <Eingabeformular
  lt="+86" <!--+86 wird links angezeigt--> 
  rt="close" <!--Das Kreuz-Symbol wird rechts angezeigt-->
  Platzhalter="Bitte geben Sie Ihre Handynummer ein"
 />

Die externe Seite erstellt wie folgt Formulardaten „form_data“, es besteht jedoch die Hoffnung, dass die Daten von „form_data“ über das V-Modell in zweierlei Hinsicht an den Wert des Eingabefelds der untergeordneten Komponente gebunden werden können.

 const form_data = reaktiv({
  number_number: '', //BenutzernamePasswort: '', //PasswortpPasswort: '', //Passwort wiederholenCaptcha: '', //Bestätigungscode})

Es ist sehr einfach, v-model in vue3 zu implementieren. Verwenden Sie v-model:xx in der übergeordneten Komponente, um die Bindung abzuschließen. Hier entspricht xx dem Statusnamen, an den die untergeordnete Komponente gebunden ist, wie unten gezeigt.

 <Eingabeformular
    lt="+86" <!--+86 wird links angezeigt--> 
    rt="close" <!--Das Kreuz-Symbol wird rechts angezeigt-->
    Platzhalter="Bitte geben Sie Ihre Handynummer ein"
    v-Modell:Wert="Formulardaten.Passwort"
 />

Als nächstes deklarieren Sie in der untergeordneten Komponente zuerst den zu bindenden Attributwert und hören auf das Oninput-Ereignis des Eingabefelds. Der Code lautet wie folgt:

<Vorlage>
  <div Klasse="Eingabe">
    ...
      <input class="content" v-bind="$attrs" :value="Wert" @input="onChange" /> 
    ...
  </div> 
</Vorlage>
exportiere StandarddefiniereKomponente({
 Requisiten: {
  lt:Zeichenfolge,
  rt: Zeichenfolge,
  Wert: Zeichenfolge
 },
 setup(Eigenschaften, Kontext) {
  const onChange = (e:Tastaturereignis) => {
   const-Wert = (e.target als HTMLInputElement).Wert;
    Kontext.emit("Update:Wert",Wert);
  };
  zurückkehren {
    beiÄnderung
  }
 }
 })

Die Rückruffunktion des Oninput-Ereignisses gibt den erhaltenen Wert mithilfe von context.emit("update:value",value) zurück.

Der erste Teil von update:value ist ein fester Wortlaut, und der Statusname, der bidirektional gebunden werden soll, wird in den zweiten Teil eingetragen. Auf diese Weise lässt sich die Bindung des V-Modells problemlos abschließen.

Datenüberprüfung

Generell gilt: Solange sich auf der Seite Formularsteuerelemente (z. B. Eingabefelder) befinden, sollte die Datenüberprüfung für die entsprechenden Werte durchgeführt werden. Wenn die ursprüngliche Methode befolgt wird, empfängt js die Antwort, wenn der Benutzer auf die Schaltfläche klickt, und erhält zur Überprüfung nacheinander den Wert jedes Formularelements.

Dieser Ansatz kann die Funktion sicherlich erreichen, ist jedoch nicht effizient und präzise. Da viele Seiten überprüft werden müssen, muss viel Überprüfungslogik wiederholt geschrieben werden.

Als Nächstes entwerfen wir eine universelle Verifizierungslösung, um die wiederverwendbaren Logikcodes zu kapseln und sie schnell auf jede Seite anzuwenden, um die Entwicklungseffizienz zu verbessern.

Am Beispiel der Registrierungsseite lautet der Vorlagencode wie folgt. Erstellen Sie vier Eingabefeldkomponenten: Mobiltelefonnummer, Mobiltelefon-Bestätigungscode, Passwort und Passwort bestätigen. Platzieren Sie abschließend eine Registrierungsschaltfläche. (Um es übersichtlicher zu machen, löscht der folgende Code alle ts-Typen.)

 <Formular ref="Formular" :rules="Regeln">
 
   <Eingabeformular
    lt="+86"
    rt="schließen"
    v-Modell:Wert="Formulardaten.Nummer_Nummer"
    Platzhalter="Bitte geben Sie Ihre Handynummer ein"
    propName="Nummer_Nummer"
   />
   
   <Eingabeformular
    rt="Zeitgeber"
    v-Modell:Wert="form_data.captcha"
    Platzhalter="Bitte geben Sie den mobilen Bestätigungscode ein"
    propName="captcha"
   />

   <Eingabeformular
    rt="schließen"
    v-Modell:Wert="Formulardaten.Passwort"
    Platzhalter="Bitte geben Sie Ihr Passwort ein"
    Typ="Passwort"
    propName="Passwort"
   />

   <Eingabeformular
    rt="schließen"
    v-Modell:Wert="form_data.ppassword"
    Platzhalter="Bitte geben Sie das Bestätigungskennwort ein"
    Typ="Passwort"
    propName="ppasswort"
   />

   <Button text="Registrieren" @sub="onSubmmit" /> <!--Registrierungsschaltfläche-->

  </Form>

Nachdem wir von den Formularpraktiken einiger anderer hervorragender Frameworks gelernt hatten, fügten wir zunächst in der äußersten Ebene eine Komponente „Formular“ hinzu und fügten dann jeder Eingabefeldkomponente eine Eigenschaft „propName“ hinzu. Diese Eigenschaft wird zusammen mit Regeln verwendet. Regeln sind manuell definierte Validierungsregeln. Wenn sie an die Formularkomponente übergeben werden, kann die untergeordnete Komponente (Eingabefeldkomponente) ihre Validierungsregeln über die Eigenschaft „propName“ abrufen.

Die allgemeine Implementierungsidee kann von Anfang an verknüpft werden. Zunächst definiert der Front-End-Entwickler die Validierungsregeln der aktuellen Seite und übergibt sie an die Formularkomponente. Nach dem Empfang verteilt die Formularkomponente die Validierungsregeln an jede ihrer Unterkomponenten (Eingabefeldkomponenten). Nachdem die Unterkomponente die Validierungsregeln erhalten hat, kann sie eine entsprechende Datenvalidierung für den Wert des Eingabefelds durchführen.

Wenn der Benutzer auf die Schaltfläche „Registrieren“ klickt, ruft das Klickereignis die Instanz der Formularkomponente ab und führt deren Validierungsmethode aus. Zu diesem Zeitpunkt führt die Formularkomponente eine Runde der Datenvalidierung für jede ihrer Unterkomponenten durch. Sobald alle Validierungen erfolgreich sind, gibt die Validierungsmethode „true“ zurück. Wenn eine Validierung fehlschlägt, gibt die Validierungsmethode „false“ zurück und zeigt eine Fehlermeldung an.

Die Logik der Registrierungsseite ist wie folgt:

exportiere StandarddefiniereKomponente({
 Komponenten:
  InputForm, //EingabefeldButton, //Registrierung buttonForm, //Formularkomponente},
 setup(Requisiten) {
 
  const form_data = ...; // ausgelassen const rules = ...;
  
  //Holen Sie sich die Instanz der äußersten Formularkomponente const form = ref(null);
  
  const bei Übermittlung = ()=>{
   wenn (!form.value || !form.value.validate()) {
     gibt false zurück;
   }
   //Die Überprüfung ist erfolgreich, Sie können die Registrierungsschnittstelle anfordern}

  zurückkehren {
   bilden,
   Regeln,
   beim Absenden,
   Formulardaten
  };
 },
});

Definieren Sie ein variables Formular und verwenden Sie es, um die Instanz des Formulars abzurufen. Fügen Sie in der Vorlage <Form ref="form" :rules="rules"> einfach ein Ref-Attribut hinzu.

Der Benutzer klickt auf die Schaltfläche „Registrieren“, um die Funktion „onSubmit“ auszulösen. Da „form“ eine mit „ref“ erstellte Variable ist, müssen Sie „.value“ aufrufen, um den Wert abzurufen. Führen Sie die Funktion „form.value.validate()“ aus, um die Validierungslogik für jede Unterkomponente unter dem Formular auszuführen. Wenn alle erfolgreich sind, wird „true“ zurückgegeben, und wenn eine Komponente fehlschlägt, wird „false“ zurückgegeben.

Aus der obigen Analyse können wir ersehen, dass das Formularsteuerelement nur eine Validierungsfunktion bereitstellt. Durch Aufrufen dieser Funktion können wir feststellen, ob die Validierung erfolgreich war. Woher weiß die Validierung also, welche Regeln für die Validierung zu verwenden sind? Wir müssen also zuerst einen Satz Validierungsregeln entwerfen, ihn an die Formularkomponente übergeben und dann kann deren interne Validierungsfunktion die Regeln zur Durchführung der Validierung verwenden.

Regeln Design

Regeln ist ein Objekt. Beispielsweise sind die Regeln der obigen Registrierungsseite wie folgt definiert:

const Regeln = {
   Nummer_Nummer:[{
        Typ: "erforderlich",
        msg:"Bitte geben Sie eine gültige Telefonnummer ein" 
      }
        "Telefon"
      ],
   Captcha:[
    {
     Typ: "erforderlich",
     msg: „Der Bestätigungscode darf nicht leer sein“
    }
   ],
   Passwort: [
    {
     Typ: "erforderlich",
     msg: 'Bitte geben Sie Ihr Passwort ein',
    },
    {
     Typ: "minLength",
     Parameter: 6,
     msg: 'Das Passwort darf nicht weniger als 6 Zeichen lang sein',
    },
   ],
   pPasswort:[
    {
     Typ: 'custome',
     Rückruf() {
      wenn (formular_daten.passwort !== form_data.ppassword) {
       zurückkehren {
        Flagge: falsch,
        msg: 'Die beiden eingegebenen Passwörter stimmen nicht überein',
       };
      }
      zurückkehren {
       Flagge: wahr,
      };
     },
    },
   ]
  }

Die von uns definierten Regeln sind ein Objekt in Form von Schlüssel-Wert-Paaren. Der Schlüssel entspricht dem propName jeder Eingabefeldkomponente in der Vorlage und der Wert ist ein Array, das den Regeln entspricht, die die Eingabefeldkomponente befolgen muss.

Schauen wir uns nun die Zusammensetzung der Werte unter jedem Objekt genauer an. Die Werte sind in Arrays organisiert, da Sie so dem Eingabefeld mehrere Regeln hinzufügen können. Regeln entsprechen zwei Formen, eine ist ein Objekt und die andere ist eine Zeichenfolge.

Zeichenfolgen sind leicht zu verstehen. Beispielsweise entspricht das Attribut number_number oben der Zeichenfolge phone. Die Bedeutung dieser Regel besteht darin, dass der Wert des Eingabefelds den Regeln für Mobiltelefonnummern entsprechen muss. Wenn die Zeichenfolge mit „email“ gefüllt ist, muss sie natürlich als E-Mail-Adresse verifiziert werden.

Wenn die Regel ein Objekt ist, enthält sie die folgenden Eigenschaften:

 {
  Typ, // Typ msg, // benutzerdefinierte Fehlermeldung params, // übergebener Parameterwert, z. B. {type:'minLength',params:6}, die Mindestlänge des Werts darf nicht weniger als 6 Ziffern betragen callback // benutzerdefinierte Validierungsfunktion}

Typ ist der Validierungstyp. Wenn es mit „erforderlich“ ausgefüllt ist, bedeutet dies, dass es sich um ein Pflichtfeld handelt. Wenn der Benutzer es nicht ausfüllt, wird beim Klicken auf die Registrierungsschaltfläche zum Absenden eine von msg definierte Fehlermeldung ausgegeben.

Darüber hinaus kann type auch minLength oder maxLength ausfüllen, um die Länge des Werts zu begrenzen. Auf wie viele Ziffern kann begrenzt werden? Dies kann über Parameter übergeben werden.

Schließlich kann der Typ auch als benutzerdefiniert ausgefüllt werden, wodurch der Entwickler den Rückruf der Validierungslogikfunktion des Eingabefelds definieren kann. Die Funktion muss am Ende ein Objekt mit einem Flag-Attribut zurückgeben. Das Attribut Flag ist ein Boolescher Wert, der dem Validierungssystem mitteilt, ob die Validierung erfolgreich war oder fehlgeschlagen ist.

Bilden

Nachdem die Regeln definiert wurden, werden sie an die Formularkomponente übergeben. Die Formularkomponente muss die Validierungslogik an ihre Unterkomponenten verteilen. Jede ihrer Unterkomponenten sollte für die Generierung ihrer eigenen Validierungsfunktion verantwortlich sein.

<!-- Formularkomponente -->
<Vorlage>
 <div Klasse="Formular">
  <Steckplatz></Steckplatz>
 </div>
</Vorlage>

<script lang="ts">
importiere { ref, provide } von "vue";
exportiere StandarddefiniereKomponente({
 Name: "Formular",
 Requisiten:{
  Regeln:Objekt
 },
 setup(Requisiten) {
  
  ...//Weglassen provide("rules", props.rules); // Validierungsregeln verteilen const validate = ()=>{
   //Offengelegte Überprüfungsfunktion}
  
  zurückkehren {
   bestätigen
  } 
 }
 }) 
</Skript>  

Wie aus der obigen Struktur ersichtlich ist, stellt die Vorlage der Formularkomponente eine Slot-Funktion bereit, verwendet „provide“ im Logikcode, um die Validierungsregeln an die Nachkommen zu übergeben, und stellt eine Validierungsfunktion bereit.

Unterkomponente generiert Validierungsfunktion

Dieses Mal kehren wir zur Kernkomponente InputForm des Anmelde- und Registrierungsmoduls zurück. Jetzt müssen wir der Eingabefeldkomponente eine Validierungslogik hinzufügen.

importiere { inject, onMounted } von "vue";
...

setup(Eigenschaften, Kontext) {

 const Regeln = inject("Regeln");
 
 const rule = rules[props.propName]; // Validierungsregel über propName abrufen const useValidate = () => {
      const validateFn = getValidate(rule); // Validierungsfunktion abrufen const execValidate = () => { 
        return validateFn(props.value); //Führen Sie die Validierungsfunktion aus und geben Sie das Validierungsergebnis zurück};
      beimMounted(() => {
        const Listener = inject('collectValidate');
        wenn (Listener) {
         Listener(execValidate);
        }
      });  
 };
 
 useValidate(); //Validierungslogik initialisieren...
}

Die Struktur der Regeln ähnelt der folgenden. Über Inject und PropName können wir die Regel erhalten, die das Formular an das auszuführende Eingabefeld verteilt.

{
  captcha:[{
   Typ: "erforderlich",
   msg: „Der Bestätigungscode darf nicht leer sein“
  }],
  Passwort:[{
   Typ: "erforderlich",
   msg: 'Bitte geben Sie Ihr Passwort ein', 
  }]
}

Übergeben Sie dann die Regel rule an die Funktion getValidate (später beschrieben), um die Validierungsfunktion validateFn abzurufen. Die Validierungsfunktion validateFn übergibt den Wert des Eingabefelds und gibt das Validierungsergebnis zurück. Hier wird validateFn gekapselt und zur externen Verwendung an execValidate übergeben.

Im obigen Code sehen wir auch den in onMounted verpackten Logikcode. Wenn die Komponente gemountet ist, verwenden Sie inject, um einen von der Form-Komponente übergebenen Funktionslistener abzurufen, und übergeben Sie die Validierungsfunktion execValidate als auszuführenden Parameter.

Gehen wir im folgenden Code zurück zur Formularkomponente und sehen wir uns an, was für eine Art von Funktion der Listener ist.

setup(Requisiten) {

const list = ref([]); //ein Array definieren const listener = (fn) => {
 Liste.Wert.Push(fn);
};

provide("collectValidate", listener); //Listening-Funktion verteilen //Verifizierungsfunktion const validate = (propName) => {
  const array = Liste.Wert.map((fn) => {
    gibt fn( zurück);
  });
  const eins = array.find((Element) => {
    gibt item.flag === false zurück;
  });
  wenn (eins && eins.msg) {
    //Verifizierung fehlgeschlagen Alert(one.msg); //Popup-Fehlermeldung return false;
  } anders {
    gibt true zurück;
  }
};
...

Wie oben zu sehen ist, verteilt die Form-Komponente die Listener-Funktion. Im onMounted-Lebenszyklus-Hook erhält die Unterkomponente die verteilte Listener-Funktion und übergibt die in der Unterkomponente definierte Validierungsfunktion execValidate als auszuführenden Parameter.

Dadurch wird sichergestellt, dass jede Unterkomponente ihre Validierungsfunktion an die Listensammlung in der Formularkomponente übergibt, sobald diese bereitgestellt ist. Die Validierungsmethode der Formularkomponente muss nur die Liste durchlaufen, um die Validierungsfunktion jeder Unterkomponente nacheinander auszuführen. Wenn alle Validierungen erfolgreich sind, wird „true“ an die externe Seite zurückgegeben. Wenn eine Validierung fehlschlägt, wird eine Fehlermeldung angezeigt und „false“ zurückgegeben.

An diesem Punkt ist der gesamte Validierungsprozess abgeschlossen. Form verteilt zuerst Validierungsregeln an Unterkomponenten, und Unterkomponenten erhalten die Regeln, um ihre eigenen Validierungsfunktionen zu generieren, und geben die Validierungsfunktionen dann nach ihrer Bereitstellung zur Sammlung an Form zurück. Zu diesem Zeitpunkt kann die von der Form-Komponente bereitgestellte Validierungsfunktion die Datenvalidierung für alle Formularsteuerelemente implementieren.

Der nächste und letzte Schritt besteht darin, zu untersuchen, wie Unterkomponenten durch Regeln ihre eigenen Validierungsfunktionen generieren können.

überprüfen

Schreiben Sie zunächst eine Klasse „Validate“, um die Validierungslogik zu verwalten. Der Code lautet wie folgt. Wir können die Methoden dieser Klasse gemäß neuen Anforderungen weiter erweitern, z. B. durch Hinzufügen von E-Mail- oder MaxLength-Methoden.

Klasse Validieren {

 Konstruktor() {}

 erforderlich (Daten) { //Überprüfen, ob es erforderlich ist const msg = 'Diese Information ist erforderlich'; //Standardfehlermeldung if (data == null || (typeof data === 'string' && data.trim() === '')) {
   zurückkehren {
    Flagge: falsch,
    Nachricht
   }
  }
  zurückkehren {
    Flagge: wahr
  }
 }
 
 //Überprüfe, ob es sich um eine Mobiltelefonnummer handelt phone(data) { 
  const msg = 'Bitte geben Sie die richtige Mobiltelefonnummer ein'; //Standardfehlermeldung const flag = /^1[3456789]\d{9}$/.test(data);
  zurückkehren {
   Nachricht,
   Flagge
  }
 }
 
 // Prüfe die Mindestlänge der Daten minLength(data, { params }) {
  
    let minLength = params; // Mindestlänge if (data == null) {
     zurückkehren {
      Flagge: falsch,
      msg: "Daten dürfen nicht leer sein"
     }
    }

    wenn (data.trim().length >= minLength) {
     gibt {flag:true} zurück;
    } anders {
     zurückkehren {
      Flagge: falsch,
      msg: `Die Mindestlänge der Daten kann nicht weniger als ${minLength} Bits betragen`
     }
    } 
  }

}

In allen von der Klasse Validate definierten Methoden ist der erste Parameter data der zu validierende Wert und der zweite Parameter die in jeder Regel auf der Seite definierte Regel. Beispiel: {type: 'minLength', params: 6, msg: 'Das Kennwort darf nicht weniger als 6 Zeichen lang sein'}.

Die von jeder Methode in der Validate-Klasse zurückgegebene Datenstruktur hat die Form {flag:true,msg:""}. Im Ergebnis gibt flag an, ob die Validierung erfolgreich war, und msg ist die Fehlermeldung.

Die Validierungsklasse Validate stellt eine Vielzahl von Validierungsmethoden bereit. Anschließend wird mithilfe eines Singleton-Musters eine Instanz dieser Klasse generiert und das Instanzobjekt auf das eigentliche Validierungsszenario angewendet.

 const getInstance = (Funktion(){
  lass _instance;
  Rückgabefunktion(){
     wenn(_instance == null){
      _instance = neues Validieren();
     }
     gibt _Instanz zurück;
   }
 })()

Durch Aufrufen der Funktion getInstance können Sie das Singleton-Validate-Instanzobjekt abrufen.

Die Eingabefeldkomponente kann die von der Komponente benötigte Validierungsfunktion zurückgeben, indem sie eine Regel an die Funktion getValidate übergibt. Als Nächstes sehen wir uns an, wie die Funktion getValidate die Validierungsfunktion durch die Regel generiert. Der Code lautet wie folgt:

/**
 * Verifizierungsfunktion generieren */
export const getValidate = (Regel) => {
  const ob = getInstance(); //Holen Sie sich das Instanzobjekt der Klasse Validate const fn_list = []; //Sammeln Sie alle Validierungsfunktionen //Durchlaufen Sie das Regel-Array, holen Sie sich die Validierungsmethode in der Klasse Validate entsprechend ihrem Typ und fügen Sie sie in fn_list ein, um sie zu sammeln rule.forEach((item) => {
   wenn (Typ des Elements === 'Zeichenfolge') { // Zeichenfolgentyp fn_list.push({
     fn: ob[Element], 
    });
   } sonst wenn (isRuleType(item)) { // Objekttyp fn_list.push({
     //Wenn item.type ein benutzerdefinierter Typ ist, verwendet die Überprüfungsfunktion direkt den Rückruf. Andernfalls wird das Element aus der ob-Instanz abgerufen. 
     fn: Artikeltyp === 'Kundenspezifisch'? Artikelrückruf: ob[Artikeltyp],
    });
   }
  });
  //Die Überprüfungsfunktion, die zurückgegeben werden muss const execuate = (value) => {
   lass flag = true,
    Nachricht = '';
   für (lass i = 0; i < fn_list.length; i++) {
    const item = fn_list[i];
    const result = item.fn.apply(ob, [value, item]); //item.fn entspricht der von der Klasse Validate definierten Validierungsmethode if (!result.flag) {
     //Verifizierung fehlgeschlagen Flag = false;
     msg = item.msg ? item.msg : result.msg; //Ob die Standardfehlermeldung oder ein benutzerdefinierter Nachrichtenumbruch verwendet werden soll;
    }
   }
   zurückkehren {
    Flagge,
    Nachricht,
   };
  };
  zurückgeben ausführen;
};

Die Datenstruktur der Regel ähnelt dem folgenden Code. Wenn die Regel an die Funktion getValidate übergeben wird, ermittelt sie, ob es sich um ein Objekt oder eine Zeichenfolge handelt, ruft dann die entsprechende Validierungsfunktion aus der ob-Instanz ab und speichert sie in fn_list.

 [
  {
   Typ: "erforderlich",
   msg: "Bitte geben Sie Ihre Telefonnummer ein"
  },
  "Telefon"
 ]

Die Funktion getValidate gibt schließlich die Funktion Execute zurück, die gleichzeitig die von der Eingabefeldkomponente abgerufene Validierungsfunktion ist. Der Wert des Eingabefelds kann in der Eingabefeldkomponente abgerufen werden. Wenn der Wert an den Aufruf der Methode Execute übergeben wird, durchläuft die Methode die zuvor zwischengespeicherte Validierungsfunktionsliste fn_list, übergibt den Wert an jede auszuführende Validierungsmethode und ruft dann das Validierungsergebnis der Eingabefeldkomponente für den aktuellen Wert ab und gibt es zurück.

Die obige Überprüfungslogik wurde implementiert. Unabhängig davon, ob Sie eine Anmeldeseite, eine Seite zum Vergessen von Passwörtern oder eine Seite zum Ändern von Passwörtern entwickeln, müssen Sie als Nächstes nur die Form-Komponente und die InputForm-Komponente verwenden, um die Seitenstruktur zu organisieren und einen Regelsatz für die aktuelle Seite zu schreiben. Alle verbleibenden Überprüfungsdetails und interaktiven Aktionen werden intern von Form und InputForm gehandhabt, was die Entwicklungseffizienz erheblich verbessert.

Endergebnis

Zusammenfassen

Dies ist das Ende dieses Artikels über die elegante Implementierung des mobilen Anmelde- und Registrierungsmoduls in vue3. Weitere relevante Inhalte zum mobilen Anmelde- und Registrierungsmodul von vue3 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!