Verification of complex forms Download - Verification of complex forms Download do código-fonte

Verification of complex forms

Outras categorias

1.0.0

Baixar

fundo

Quando criamos sistemas de gerenciamento de back-end, muitas vezes encontramos formas muito complexas:

Existem muitos itens de formulário
Exibir diferentes itens de formulário em vários tipos de formulário
Certos itens do formulário desativam a validação sob certas condições
Cada item do formulário também terá outra lógica personalizada, como caixas de entrada que podem inserir variáveis de modelo, exibir o número de caracteres de entrada, fazer upload e exibir imagens e rich text . . .
Nesta situação complexa, complete a verificação e envio do formulário
Você pode ver exemplos específicos: Muitas funções triviais são omitidas no exemplo e apenas a estrutura geral do formulário complexo é mantida para demonstrar a solução.

Opção 1: em um arquivo `vue`

Toda a exibição e ocultação de itens do formulário, validação, aquisição de dados, envio, personalização e outras lógicas são reunidas

De acordo com o tipo de formulário, use v-if/v-show para lidar com a exibição e ocultação de itens do formulário.
Na validação personalizada elementui , determine se o item do formulário é validado com base no tipo de formulário
De acordo com o tipo de formulário, obtenha dados diferentes e envie-os para interfaces diferentes
Todas as outras lógicas personalizadas

deficiência

caos
caos
Ainda bagunçado
Um arquivo vue pode facilmente conter 2000 linhas
Quando tentei adicionar um novo tipo de formulário, descobri que não tinha nenhum. de. Abaixo. mão.

Opção 2: componentes separados

Na verdade, é fácil pensar em separar vários subformulários de tipos correspondentes de acordo com diferentes tipos de formulário . Mas ainda encontrei muitos problemas na prática: verificação de formulário pai-filho, obtenção de dados gerais enviados , etc., e resumi um conjunto de soluções:

1. Subcomponentes

Todos os componentes filhos precisam conter dois métodos validate e getData para serem chamados pelo componente pai.

(1) método `validate`

Usado para verificar os itens do formulário de seus próprios componentes e retornar um objeto promise

 vaildate ( ) {
    // 返回`elementUI`表单验证的结果（为`promise`对象）
    return this . $refs [ "ruleForm" ] . validate ( ) ;
} ,

(2) método `getData`

Fornece dados de componentes filhos

 getData ( ) {
    // 返回子组件的form
    return this . ruleForm ;
} ,

2. Componente pai

(1) Modo estratégia

Use o padrão de estratégia para armazenar e obter ref do subformulário (o método usado para obter o subformulário) e a função submit . Muitos julgamentos if-else são omitidos.

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 ) } ` )
  } ,
}

(2) método `submit`

Usado para validação de formulário de componente pai-filho, obtenção de dados gerais e chamada da função de envio de tipo atual para enviar dados

Como o método validate de verificação de formulário elementUI pode retornar um resultado promise , você pode usar as características de promise para lidar com a verificação de formulários pai e filho. Por exemplo, a função then pode retornar outro objeto promise , e catch pode obter reject e Promise.all de todos os then acima dele.

O formulário filho será verificado somente depois que o formulário pai for verificado e houver uma sequência.

 // 父表单验证通过才会验证子表单，存在先后顺序
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 ) ;
    } ) ;
} ,

O formulário pai e o formulário filho são verificados juntos

 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 ) ;
    } ) ;
} ,

Visualize projetos on-line, projetos no GitHub e códigos de componentes

Resumo: Encontrei esse tipo de formulário complexo em muitos projetos e usei muitas soluções. Aqui resumi uma solução relativamente simples e organizada. Claro, existem muitas outras soluções. Por exemplo , o método de envio de dados pode ser colocado em cada subcomponente e os dados do item do formulário público são passados para o subcomponente por meio de props para envio . Se houver outras soluções mais simples, você pode comentar ou enviar issue no github

Fora do tópico: Depois de ler o relato do próprio arquiteto front-end: a pergunta e resposta de N sobre o caminho de crescimento de um engenheiro front-end, isso me inspirou muito. Quando você está confuso sobre sua direção técnica e perspectivas, ou quando reclama que seu projeto é muito baixo, ou quando reclama que está fazendo um trabalho repetitivo todos os dias, ou quando fica sobrecarregado pelo surgimento interminável de novas tecnologias todos os dias , você também pode dar uma olhada séria em seu projeto .

É possível reinventar a roda para tarefas que se repetem todos os dias?
A pilha de tecnologia é muito baixa. Podemos fazer uma transição suave para novas tecnologias e melhorar a eficiência do desenvolvimento?
Não importa quantas novas tecnologias você aprenda, você acabará voltando e implementando-as em projetos.

Começando pelos pontos problemáticos dos processos e projetos de trabalho , você progredirá mais rapidamente na prática, resumindo e resolvendo problemas práticos .