Verification of complex forms
1.0.0
Wenn wir Backend-Managementsysteme erstellen, stoßen wir oft auf sehr komplexe Formen:
- Es sind zu viele Formularelemente vorhanden
- Zeigen Sie verschiedene Formularelemente unter verschiedenen Formulartypen an
- Bestimmte Formularelemente deaktivieren die Validierung unter bestimmten Bedingungen
- Jedes Formularelement verfügt außerdem über andere benutzerdefinierte Logik, z. B. Eingabefelder, in die Vorlagenvariablen eingefügt, die Anzahl der eingegebenen Zeichen angezeigt, Bilder hochgeladen und angezeigt werden können, sowie Rich Text . . .
- Schließen Sie in dieser komplizierten Situation die Überprüfung und Übermittlung des Formulars ab
- Sie können sich konkrete Beispiele ansehen: Viele triviale Funktionen werden im Beispiel weggelassen und nur das gesamte komplexe Formulargerüst wird beibehalten, um die Lösung zu demonstrieren.
vue -DateiDie gesamte Anzeige und das Ausblenden von Formularelementen, die Validierung, Datenerfassung, Übermittlung, Anpassung und andere Logik werden zusammengefasst
- Verwenden Sie je nach Formulartyp
v-if/v-showum das Anzeigen und Ausblenden von Formularelementen zu verwalten.- Bestimmen Sie in der benutzerdefinierten
elementuiValidierung, ob das Formularelement basierend auf dem Formulartyp validiert wird- Je nach Formulartyp erhalten Sie unterschiedliche Daten und übermitteln diese an unterschiedliche Schnittstellen
- Alle anderen benutzerdefinierten Logiken
vue -Datei kann problemlos 2000 Zeilen enthaltenTatsächlich ist es leicht vorstellbar , mehrere Unterformulare entsprechender Typen nach verschiedenen Formulartypen zu trennen . In der Praxis bin ich jedoch immer noch auf viele Probleme gestoßen: Überprüfung des Eltern-Kind-Formulars, Erhalt aller übermittelten Daten usw., und ich habe eine Reihe von Lösungen zusammengefasst:
Alle untergeordneten Komponenten müssen zwei Methoden validate und getData enthalten, damit die übergeordnete Komponente sie aufrufen kann.
validate Wird verwendet, um die Formularelemente seiner eigenen Komponenten zu überprüfen und ein promise zurückzugeben
vaildate ( ) {
// 返回`elementUI`表单验证的结果（为`promise`对象）
return this . $refs [ "ruleForm" ] . validate ( ) ;
} ,
getData -MethodeStellen Sie Daten von untergeordneten Komponenten bereit
getData ( ) {
// 返回子组件的form
return this . ruleForm ;
} , Verwenden Sie das Strategiemuster, um ref des Unterformulars (die zum Abrufen des Unterformulars verwendete Methode) und die Absendefunktion zu speichern und abzurufen. Viele if-else -Urteile werden weggelassen.
data: {
// type和ref名称的映射
typeRefMap : {
1 : "message" ,
2 : "mail" ,
3 : "apppush"
} ,
// type和提交函数的映射。不同类型，接口可能不同
typeSubmitMap : {
1 : data => alert ( `短信模板创建成功${ JSON . stringify ( data ) } ` ) ,
2 : data => alert ( `邮件模板创建成功${ JSON . stringify ( data ) } ` ) ,
3 : data => alert ( `push模板创建成功${ JSON . stringify ( data ) } ` )
} ,
} submitWird zur Formularvalidierung von Eltern-Kind-Komponenten, zum Abrufen von Gesamtdaten und zum Aufrufen der Übermittlungsfunktion des aktuellen Typs zum Übermitteln von Daten verwendet
Da die
validatederelementUI-Formularüberprüfung einpromiseErgebnis zurückgeben kann , können Sie die Eigenschaften vonpromiseverwenden, um die Überprüfung von übergeordneten und untergeordneten Formularen durchzuführen. Beispielsweise kann die Funktionthenein anderespromise-Objekt zurückgeben, undcatchkannrejectundPromise.allallerthenliegenden Objekte erhalten.
// 父表单验证通过才会验证子表单，存在先后顺序
submitForm ( ) {
const templateType = this . typeRefMap [ this . indexForm . type ] ;
this . $refs [ "indexForm" ]
. validate ( )
. then ( res => {
// 父表单验证成功后，验证子表单
return this . $refs [ templateType ] . vaildate ( ) ;
} )
. then ( res => {
// 全部验证通过
// 获取整体数据
const reqData = {
// 获取子组件数据
... this . $refs [ templateType ] . getData ( ) ,
... this . indexForm
} ;
// 获取当前表单类型的提交函数，并提交
this . typeSubmitMap [ this . indexForm . type ] ( reqData ) ;
} )
. catch ( err => {
console . log ( err ) ;
} ) ;
} , submitForm1 ( ) {
const templateType = this . typeRefMap [ this . indexForm . type ] ;
const validate1 = this . $refs [ "indexForm" ] . validate ( ) ;
const validate2 = this . $refs [ templateType ] . vaildate ( ) ;
// 父子表单一起验证
Promise . all ( [ validate1 , validate2 ] )
. then ( res => {
// 都通过时，发送请求
const reqData = {
... this . $refs [ templateType ] . getData ( ) ,
... this . indexForm
} ;
this . typeSubmitMap [ this . indexForm . type ] ( reqData ) ;
} )
. catch ( err => {
console . log ( err ) ;
} ) ;
} , Zusammenfassung: Ich bin in vielen Projekten auf diese Art komplexer Formen gestoßen und habe viele Lösungen verwendet. Hier habe ich eine relativ übersichtliche und einfache Lösung zusammengefasst. Natürlich gibt es viele andere Lösungen. Beispielsweise kann die Datenübermittlungsmethode in jeder Unterkomponente platziert werden und die Daten des öffentlichen Formularelements werden über
propszur Übermittlung an die Unterkomponente übergeben . Wenn es andere einfachere Lösungen gibt, können Sie gerne einen Kommentar abgeben oderissueaufgithub
Off-Topic: Nachdem ich den eigenen Bericht des Front-End-Architekten gelesen hatte: Ns Frage und Antwort zum Wachstumspfad eines Front-End-Ingenieurs, hat mich das sehr inspiriert. Wenn Sie über Ihre technische Richtung und Ihre Aussichten verwirrt sind oder wenn Sie sich darüber beschweren, dass Ihr Projekt zu niedrig ist, oder wenn Sie sich darüber beschweren, dass Sie jeden Tag sich wiederholende Arbeiten ausführen, oder wenn Sie von der endlosen Entstehung neuer Technologien jeden Tag überwältigt sind , Dann sollten Sie sich Ihr Projekt doch einmal genauer ansehen .
Ausgehend von den Schmerzpunkten von Arbeitsprozessen und Projekten kommen Sie beim Üben, Zusammenfassen und Lösen praktischer Probleme schneller voran .
Meine Gefühle beim Schreiben dieses Artikels: die Schwierigkeit, diese Dinge auszudrücken
>>die technische Schwierigkeit, die im Artikel selbst enthalten ist
