Verification of complex forms
1.0.0
Lorsque nous réalisons des systèmes de gestion backend, nous rencontrons souvent des formes très complexes :
- Il y a trop d'éléments de formulaire
- Afficher différents éléments de formulaire sous différents types de formulaire
- Certains éléments de formulaire désactivent la validation sous certaines conditions
- Chaque élément de formulaire aura également une autre logique personnalisée, telle que des zones de saisie pouvant insérer des variables de modèle, afficher le nombre de caractères saisis, télécharger et afficher des images et du texte enrichi . . .
- Dans cette situation complexe, complétez la vérification et la soumission du formulaire
- Vous pouvez afficher des exemples spécifiques : de nombreuses fonctions triviales sont omises dans l'exemple et seul le cadre de formulaire complexe global est conservé pour démontrer la solution.
vueTous les éléments de formulaire affichés et masqués, la validation, l'acquisition de données, la soumission, la personnalisation et d'autres logiques sont rassemblés
- Selon le type de formulaire, utilisez
v-if/v-showpour gérer l'affichage et le masquage des éléments du formulaire.- Dans la validation personnalisée
elementui, déterminez si l'élément de formulaire est validé en fonction du type de formulaire- Selon le type de formulaire, obtenez différentes données et soumettez-les à différentes interfaces
- Toute autre logique personnalisée
vue peut facilement contenir 2000 lignesEn fait, il est facile de penser à séparer plusieurs sous - formulaires de types correspondants selon différents types de formulaires . Mais j'ai quand même rencontré de nombreux problèmes en pratique : vérification du formulaire parent-enfant, obtention des données globales soumises , etc., et j'ai résumé un ensemble de solutions :
Tous les composants enfants doivent contenir deux méthodes validate et getData pour que le composant parent puisse les appeler.
validate la méthode Utilisé pour vérifier les éléments de formulaire de ses propres composants et renvoyer un objet promise
vaildate ( ) {
// 返回`elementUI`表单验证的结果（为`promise`对象）
return this . $refs [ "ruleForm" ] . validate ( ) ;
} ,
getDataFournir des données à partir de composants enfants
getData ( ) {
// 返回子组件的form
return this . ruleForm ;
} , Utilisez le modèle de stratégie pour stocker et obtenir ref du sous-formulaire (la méthode utilisée pour obtenir le sous-formulaire) et la fonction de soumission . De nombreux jugements if-else sont omis.
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 ) } ` )
} ,
} submitUtilisé pour la validation du formulaire de composant parent-enfant, l'obtention de données globales et l'appel de la fonction de soumission de type actuelle pour soumettre des données
Étant donné que la méthode
validatede vérification du formulaireelementUIpeut renvoyer un résultatpromise, vous pouvez utiliser les caractéristiques depromisepour gérer la vérification des formulaires parent et enfant. Par exemple, la fonctionthenpeut renvoyer un autre objetpromise, etcatchpeut obtenirrejectetPromise.allde toutthense trouve au-dessus.
// 父表单验证通过才会验证子表单，存在先后顺序
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 ) ;
} ) ;
} , Résumé : J'ai rencontré ce type de formulaires complexes dans de nombreux projets et utilisé de nombreuses solutions. J'ai résumé ici une solution relativement soignée et simple. Bien sûr, il existe de nombreuses autres solutions. Par exemple , la méthode de soumission des données peut être placée dans chaque sous-composant et les données des éléments du formulaire public sont transmises au sous-composant via
propspour la soumission . S'il existe d'autres solutions plus simples, vous êtes invités à commenter ou à soumettreissuesurgithub
Hors sujet : Après avoir lu le propre récit de l'architecte front-end : les questions et réponses de N sur le parcours de croissance d'un ingénieur front-end, cela m'a beaucoup inspiré. Lorsque vous êtes confus quant à votre orientation technique et vos perspectives, ou lorsque vous vous plaignez que votre projet est trop faible, ou lorsque vous vous plaignez de faire un travail répétitif chaque jour, ou lorsque vous êtes dépassé par l'émergence incessante de nouvelles technologies chaque jour , autant réfléchir sérieusement à votre projet .
En partant des points faibles des processus de travail et des projets , vous progresserez plus rapidement dans la pratique, la synthèse et la résolution de problèmes pratiques .
Mon ressenti en écrivant cet article : la difficulté d'exprimer ces choses
>>la difficulté technique contenue dans l'article lui-même
