va.js – Der Schreibprozess des Vue-Formularvalidierungs-Plug-ins

Vorwort

Vor einiger Zeit richtete der Chef die Vue-Entwicklungsumgebung ein, sodass wir von JQ glücklich zu Vue kamen. Während dieser Zeit war ich mit der Formularüberprüfung nicht zufrieden. Als ich das Plug-in-Kapitel von Vue sah, hatte ich das Gefühl, dass ich eines schreiben könnte, also begann ich, ein Formularüberprüfungs-Plug-in va.js zu schreiben. Warum nicht ein Plug-in finden? Vue-Validator.

Ich habe darüber nachgedacht, dass die Formularüberprüfung eine sehr individuelle Sache ist. Um den Bedürfnissen verschiedener Unternehmen gerecht zu werden, fügt diese Art von Plug-in viele Funktionen hinzu, die wir haben brauche nicht. Es stellt sich heraus, dass der Vue-Validator 50 KB groß ist und die von mir geschriebene va.js nur 6 KB groß ist.

Die andere Sache ist, dass ich wirklich denke, dass die API von vue-validator sehr lang ist. Es ist immer v-validate:username="['required']", was eine so lange Liste ist, und der Aufruf Ich habe ungefähr so ​​etwas entworfen: —v-va:Money

Natürlich zeigt dieser Artikel nur, wie man ein Vue-Formularvalidierungs-Plug-in schreibt, das den Anforderungen Ihres Unternehmens entspricht. Im Folgenden wird die Idee vorgestellt.

1. Die Zusammensetzung des Formularvalidierungsmoduls

Jedes Formularvalidierungsmodul besteht aus Konfiguration – Überprüfung – Fehlerbericht – Werteerfassung.

Konfiguration: Konfigurationsregeln, Konfigurationsfehlerberichte und Priorität

Überprüfung: Es gibt eine Überprüfung im Änderungsereignis, eine Überprüfung, wenn auf die Schaltfläche „Senden“ geklickt wird, und natürlich gibt es auch eine Überprüfung im Eingabeereignis.

Fehlerberichtsmethoden sind im Allgemeinen in verschiedene Typen unterteilt. Fehlerberichtstexte verfügen über Vorlagen und benutzerdefinierte

Werte: Geben Sie die überprüften Daten an den Entwickler zurück und rufen Sie

unten Es war eine Anfrage meines Chefs an mich für ein Unternehmensprojekt

Zentralisierte Verwaltung von Verifizierungsregeln und Fehlerberichtsvorlagen.

Die Fehlerberichtszeit ist optional

Die korrekten Daten nach der Überprüfung wurden in Objekte gepackt. Sie können

direkt verwenden, um jeder Seite das Überschreiben der Regeln zu ermöglichen und die anzupassen Fehlerinformationen. Nachdem ich die Definition geändert und Ajax erlaubt habe, Daten abzurufen, habe ich dann die Regeln hinzugefügt

Ich war neugierig und fragte, warum das so ist? Dann antwortete mir der Chef nacheinander:

Der Vorteil zentralisierter Verwaltungsregeln und Fehlerberichtsvorlagen besteht darin, dass die Regeln global verwendet und ein für alle Mal geändert werden können. Der Chef sagte mir, dass die Regelmäßigkeit des Spitznamens dreimal geändert werden müsse. Wenn diese regulären Regeln auf jeder Seite geschrieben sind, o(￣ヘ￣o#) hm, müssen Sie N Seiten ändern

Der Prozess von PC und Mobilgerät ist unterschiedlich Änderungsereignis oder Das Eingabeereignis wird überprüft und ein Fehler gemeldet, während es für die Bewegung im Allgemeinen erforderlich ist, auf die Schaltfläche „Senden“ zu gehen und dann zu überprüfen. Seien Sie also vorbereitet, wenn Sie ein Plug-In schreiben. Dann muss die für die Fehlerberichterstattung verwendete Benutzeroberfläche das Layer-Plug-in unterstützen, das wir jetzt verwenden. Natürlich kann sich die Fehler-Benutzeroberfläche in Zukunft ändern, Sie haben also Verständnis.

Natürlich kann unsere öffentliche Formularüberprüfung in der JQ-Ära die Überprüfung abschließen und alle Daten in einem Objekt sammeln. Auf diese Weise ist es bei der Verwendung von Ajax nicht erforderlich, den Wert abzurufen. Dieses Plugin von Ihnen wird diesen Effekt erzielen

Es stellt sich heraus, dass das öffentliche Skript, die regulären Ausdrücke und die Fehlerberichterstattung von jq alle an einem Ort konzentriert sind, was an vielen Orten sehr praktisch ist. Es ist jedoch nicht flexibel genug, wenn einige Seiten geändert werden müssen. Regeln wie RealName wurden zunächst für eine bestimmte Seite konfiguriert, indem die Feldnamen auf der Backend-Schnittstelle verwendet wurden. Auf einer anderen Zahlungsseite wurde der Feldname auf der Back-End-Schnittstelle in PayUser geändert, aber der reguläre Ausdruck lautet immer noch RealName. Es stellt sich heraus, dass wir RealName überschreiben müssen. Das ist nicht praktisch und sieht gut aus. Der andere Betrag, der Zahlungsbetrag, hat Höchst- und Mindestgrenzen, die vom Backend abgerufen werden müssen. Sie müssen diese Situation auch berücksichtigen. Auf jeder Seite müssen einige flexible Stellen vorhanden sein, an denen Sie Regeln ändern, Fehlerberichte anpassen usw. können.

Nachdem ich es mir angehört habe, habe ich es ungefähr verstanden. Es stellt sich heraus, dass die jq-Formularüberprüfung, die ich zuvor geschrieben habe, so viele unangenehme Punkte enthält. -_-|||Als nächstes werfen wir einen Blick auf die guten Dinge, die Vue mir gegeben hat. Lass mich schreiben

2. Wie schreibe ich ein Vue-Plug-in

Ich bin ein Vue-Neuling, warum habe ich angefangen, ein Vue-Plug-in zu schreiben? Denn als ich über eine Lösung nachdachte, blätterte ich durch die Vue-Dokumentation und kam hierher:

Diese Dinge fühlten sich so real an, als ich mit dem Schreiben von va.js fertig war . Es ist sehr klar.

Eigentlich möchte ich einen Befehl schreiben, um die Formularüberprüfung abzuschließen. Es stellt sich heraus, dass es möglicherweise 2-3 Anweisungen gibt und einige Methoden auf Vue.prototype definiert werden müssen, damit die Regeln innerhalb jeder Unterinstanz erweitert werden können. Der Chef sagte also, das sei gleichbedeutend mit einem Plug-In. Dadurch fühle ich mich wie ein Wal.

va.js verwendet hauptsächlich Vue-Anweisungen

Als ich mit dem Schreiben von va.js fertig war, hatte ich das Gefühl, dass sie wirklich real waren. Es ist sehr klar .

Eigentlich möchte ich einen Befehl schreiben, um die Formularüberprüfung abzuschließen. Es stellt sich heraus, dass es möglicherweise 2-3 Anweisungen gibt und einige Methoden auf Vue.prototype definiert werden müssen, damit die Regeln innerhalb jeder Unterinstanz erweitert werden können. Der Chef sagte also, das sei gleichbedeutend mit einem Plug-In. Dadurch fühle ich mich wie ein Wal.

va.js verwendet hauptsächlich Vue-Anweisungen

Die Vue-Dokumentation ist wirklich sorgfältig geschrieben, aber ich möchte hinzufügen Noch eine Sache:
vnode.context ist eine Instanz von Vue.
Wenn wir Projekte durchführen, hängen oft N Unterkomponenten an einer Stammkomponente und N Unterkomponenten können an Unterkomponenten hängen. Die von vnode.context erhaltene Instanz ist die Instanz der an die Anweisung gebundenen Komponente. Das ist sehr nützlich. Sie können viele Dinge tun

Natürlich verwenden Sie auch einige Vue.prototype

Vue.prototype.$method ist eine Methode, die für jede Komponente aufgerufen werden kann.

, das mit dieser.$-Methode innerhalb der Komponente aufgerufen werden kann