Explicação detalhada do exemplo de verificação de formulário AngularJS

Instruções de verificação de formulário comum

1. Verificação necessária

Se uma entrada de formulário foi preenchida, basta adicionar a tag html5 necessária ao elemento do campo de entrada:

Copie o código da seguinte forma: <input type = "text" necessário />

2. Comprimento mínimo

Verifique se o comprimento do texto da entrada do formulário é maior que um determinado valor mínimo e use a instrução ng-minleng = "{número}" no campo de entrada:

Copie o código da seguinte forma: <input type = "text" ng-minlength = "5" />

3. Comprimento máximo

Verifique se o comprimento do texto da entrada do formulário é menor ou igual a um determinado valor máximo e use a instrução ng-maxlength = "{número}" no campo de entrada:

Copie o código da seguinte forma: <input type = "text" ng-maxlength = "20" />

4. Correspondência de padrões

Use Ng-Pattern = "/Pattern/" para garantir que a entrada corresponda à expressão regular especificada:

Copie o código do código da seguinte forma: <input type = "text" ng-tattern = "/[a-za-z]/"/>

5. Email

Verifique se o conteúdo de entrada é um email, basta definir o tipo de entrada como email como abaixo:

Copie o código da seguinte

6. Números

Verifique se o conteúdo de entrada é um número e defina o tipo de entrada como número:

Copie o código da seguinte

7. URL

Verifique se o conteúdo de entrada é um URL e defina o tipo de entrada como URL:

Copie o código da seguinte

Vamos testar essas verificações em implementações específicas:

 <div> <form role = "form"> <div> <div> <gravador para = "name"> 1.Renchired </etiqueta> </div> <div> <input id = "name" type = "text" requerido ng-model = 'user.name'/> </div> </div> <div> <div> <bel para = "minlmen"> 2. Comprimento mínimo = 5 </rótulo> </div> <div> <input type = "text" id = "minlength" ng-minlength = "5" ng-model = "user.minlength"/> </div> </bel> <div> <Label para = "MILLIGNEMENTO 3.MAXIMUM TIMPO = 20 </LABEL <//> </> </> </> </</div> ng-model = "user.maxlength" ng-maxlength = "20"/> </div> </div> <div> <div> <gravador para = "minlength"> 4. MATCRAÇÃO DO PADRÃO </elabel> </div> <div> <input type = "text" id = "minlength" ng-model = "user.pattern" ng-tattern = "/^[a-za-z]*/d $/"/> </div> </div> <div> <div> <belt for = "email"> 5. Email </belt> </div> </div> <div> <Label para = "email"> 5. Email </celt> </div> <div> <input type = "email" id = "email" name = "email" ng-model = "user.mail"/> </div> </div> <div> <div> <etiqueta para = "idade"> 6. Número </elatel> </div> <div> <input type = "número" id = "idade" name = "idade" ng-model = "user.age"/> </div> </div> <div> <div> <bel para = "url"> 7. Url </bel> </div> <div> <input type = "url"> 7. Url </etc. </div> </div> <div> <input type = "submit" value = "submit"/> </div> </form> </div> <div> 1. Campos necessários: {{user.name}} <br> 2. min. comprimento = 5: {{user.MinLength}} <br> 3. Comprimento máximo = 20: {{user.maxlength}} <br> 4. MAIS DE MATERIAÇÃO: {{user.pattern}} <br> 5. Email: {{user.email}} <br> 6. 7.url: {{user.url}} <br> </div>

No teste, descobrimos que a ligação bidirecional será realizada apenas em tempo real quando a expressão satisfaz a verificação. Ao mesmo tempo, também descobrimos que as renderizações são as seguintes:

Nada parece ter acontecido, mas se o portarmos para um navegador com uma equipe de verificação HTML5 que não é muito boa, vamos testá -lo [IE9 neste exemplo], o problema é que alguns campos não são verificados.

De fato, no exemplo acima, usamos a verificação HTML5 e a própria verificação de NG para combiná -la. Não suporta a verificação do HTML5, mas a verificação gratuita da NG funciona bem. A solução é muito simples. Você pode usar a correspondência de padrões para resolver essas situações ou pode personalizar instruções de verificação para reescrever ou redefinir as regras de verificação.

Bloqueie o comportamento de verificação padrão do navegador para formas

Basta adicionar a tag novo no elemento de formulário. A questão é como sabemos quais campos em nossa forma são válidos e quais coisas são ilegais ou inválidas? Ng também fornece uma ótima solução para isso. As propriedades do formulário podem ser acessadas no objeto $ SCOPE ao qual ele pertence, e podemos acessar o objeto $ scope, para que o JavaScript possa acessar indiretamente as propriedades do formulário no DOM. Com essas propriedades, podemos responder em tempo real ao formulário.

Essas propriedades podem ser acessadas usando o format formname.inputfieldName.property.

Forma não modificada

Propriedade booleana indicando se o usuário modificou o formulário. Se estiver turo, significa que não foi modificado; Falso significa que foi modificado:

A cópia do código é a seguinte: formname.inputfieldName. $ Pristine; forma modificada

Propriedade booleana se e somente se o usuário tiver modificado o formulário. Independentemente de o formulário ser verificado ou não:

A cópia do código é a seguinte: formname.inputfieldName. $ DIRTY

Forma verificada

Propriedade booleana que indica se o formulário passou na verificação. Se o formulário for validado atualmente, será verdade:

O código da cópia é o seguinte: formname.inputfieldName.

As duas últimas propriedades são particularmente úteis quando usadas para exibir ou ocultar o elemento DOM. Ao mesmo tempo, eles também são muito úteis se você deseja configurar uma classe específica.

erro

Esta é outra propriedade muito útil fornecida pelo AngularJS: o objeto de erro $. Ele contém todo o conteúdo de verificação do formulário atual, bem como informações sobre se elas são legítimas. Acesse esta propriedade usando a seguinte sintaxe

A cópia do código é a seguinte: formname.inputfieldName. $ Error

Se a verificação falhar, o valor dessa propriedade será verdadeiro; Se o valor for falso, significa que o valor do campo de entrada passou na verificação.

Abaixo, testamos estas instruções de verificação:

 <! Doctype html> <html ng-app = "mytest"> <head> <meta name = "viewport" content = "width = width device-width"/> <title> Índice </title> <link href = "~/content/css/bootstrap.min.css" Rel = "Stylesetet" " src = "~/javascript/angular.min.js"> </script> <style type = "text/css"> body {tapdding-top: 30px; } </style> </ad Head> <corpo ng-controller = "myController"> <div> <form role = "formulário" name = "myform" ng-submit = "submitform (myform. $ válido)" Novalidate> <div> <div> <bel for = "name"> 1.Required </LABT "<div> <div> <div> <div> <div> <div. ng-model = 'user.name'/> <span ng-show = "myform.name. $ DIRTY && myform.name. $ válido"> </span> </div> </div> <div> <div> <Label para = "minlengthing"> 2. Comprimento mínimo = 5 </rótulo> </div> <div> <input type = "text" id = "minlength" name = "minlength" ng-minlengthing = "5" ng-model = "user.minlength"/> <span ng-show = "myform.minlength. for="maxlength">3.Maximum length=20</label> </div> <div> <input type="text" id="maxlength" name="maxlength" ng-model="user.maxlength" ng-maxlength="20" /> <span ng-show="myForm.maxlength.$dirty && myForm.maxlength.$valid"></span> </div> </div> <div> <div> <Label para = "Pattern"> 4. MATTRÃO MATERIAL </LABEL> </div> <div> <input type = "text" id = "padrony" name = "padrony" ng-model = "user.pattern" ng-tattern = "/^[a-za-z]*/d $/"/> <span ng-show = "myform.pattern. <div> <Label para = "Email"> 5. Email </cret> </div> <div> <input type = "email" id = "email" name = "email" ng-model = "user.mail"/> <span ng-show = "myform.email. Número </celt> </div> <div> <input type = "número" id = "idade" name = "idade" ng-model = "user.age"/> <span ng-show = "myform.age. id = "url" name = "url" ng-model = "user.url"/> <span ng-show = "myform.url. {{user.name}} $ pristine [não modificado]: {{myform.name. $ pristine}} $ dirty [modificado]: {{myform.name. {{myform.name. $ válido}} requerido: {{myform.name. $ error.Required}} <br> 2. Comprimento mínimo = 5: {{user.MinLength}} $ pristine [não modificado]: {{myform.minLength. {{myForm.MinLength. $ Dirty}} $ inválido 【Verificação falhou】: {{myform.minLlength. $ inválido}} $ inválido 【verificação bem -sucedida】: {{{myform.MinLength. comprimento = 20: {{user.maxLength}} $ pristine 【não modificado】: {{myform.maxlength. $ inválido 【verificação bem -sucedida】: {{myform.maxlength. $ válida}} $ error 【Detalhes do erro】: {{myform.maxlength. $ DIRTY 【Modificado】: {{myform.pattern. $ DIRTY}} $ inválido 【Verificação falhou】: {{myform.pattern. $ inválido}} $ inválido 【Verificação bem -sucedida】: {{myform.pattern. $ inválido}} $ Error 【Error】 {{myform.pattern. $ error}} <br> 5. email: {{user.email}} $ pristine 【não modificado】: {{myform.email. {{myform.email. $ inválido}} $ inválido 【Verificação bem -sucedida】: {{myform.email. $ válida}} $ erro 【Detalhes do erro】: {{{myform.email. $ Dirty 【Modificado】: {{myform.age. $ Dirty}} $ inválido 【Verificação falhou】: {{myform.age. $ inválido}} $ inválido 【verificação】】: {{myform.age. 7.url: {{user.url}} $ pristine 【não modificado】: {{myform.url. $ Pristine}} $ dirty 【modificado】: {{myform.url. {{myform.url. $ válido}} $ erro 【Detalhes do erro】: {{myform.url. $ scope.subMitform = function (isValid) {if (! isValid) {alert ('verificação falhou');

Os efeitos são os seguintes:

Ao mesmo tempo, o NG definiu alguns estilos CSS para essas instruções de verificação de maneira direcionada.

Eles incluem:

A cópia de código é a seguinte: .ng-valida {} .ng-invalid {} .ng-pristina {} .ng-Dirty {}/ * Regras CSS realmente específicas aplicadas por angular */. Ng-interquado {} .nng-invalid-minLengmengngmen.

Eles correspondem ao estado específico do campo de entrada do formulário.

Por exemplo, quando a entrada em um campo é ilegal, a classe .ng-Invlid será adicionada a esse campo. Você pode editar seu CSS favorito. Você pode personalizar essas classes em particular para implementar aplicativos de cenário específicos.

No entanto, as instruções de verificação padrão podem não ser capazes de atender totalmente aos nossos cenários de aplicação reais, e as funções das instruções de verificação personalizadas também são fornecidas pelo NG.

Primeiro, vamos dar uma olhada em um exemplo simples:

 angular.module ("mytest", []) .Directive ('múltipla eil /^( NGMODEL.

O código da página HTML é o seguinte:

 <form role = "form" id = "custom_form" name = "custom_form" novelidate> <div> <belt> email múltiplo </creat> <div> <input múltiplo-email name = "user_email" ng-model = "user.mail" PISSIDADOR exigido = "verificação personalizada, vários endereços de email, split com"; ou ";" /> verificação " /> verification = </div> </div> <div> <input ng-Disabled = "custom_form.

O código é muito simples e o efeito é o seguinte:

Esse código é muito simples, mas envolve várias propriedades importantes do NGMODelController. $ ViewValue

A propriedade $ ViewValue detém a sequência real necessária para atualizar a visualização.

$ ModelValue

$ ModelValue é mantido pelo modelo de dados. $ ModelValue e $ ViewValue podem ser diferentes, dependendo se o oleoduto $ parser opera nele.

$ parsers

O valor de $ parsers é uma matriz composta por funções. Quando o usuário interage com o método do controlador e o $ setViewValue () no ngmodelcontroller é chamado, as funções no ngmodelcontroller são chamadas uma por uma quando o usuário interage com o controlador e o método $ setviewValue () no método do NGMOLCONTROLLER é chamado de um por um a um a um dos formulários. O valor lido por Ngmodel do DOM é passado para a função em $ parsers e é processado pelo analisador em sequência. Isto é para processar e modificar os valores.

NOTA: A função ngmodel. $ SetViewValue () é usada para definir o valor de exibição no escopo.

A função ngmodel. $ SetViewValue () pode aceitar um parâmetro.

Value (String): O parâmetro Valor é o valor real que queremos atribuir à instância NGModel.

Este método atualiza o $ ViewValue local no controlador e passa o valor para cada função $ Parser (incluindo o validador). Quando o valor é analisado e todas as funções no oleoduto $ parser são chamadas, o valor será atribuído à propriedade $ ModelValue e passada para a expressão fornecida pela propriedade NG-modelo na instrução. Finalmente, depois que todas as etapas forem concluídas, todos os ouvintes do $ ViewCangelistenners serão chamados. Observe que chamando $ setViewValue () por si só não evocará um novo loop de resumo; portanto, se você deseja atualizar a diretiva, precisará acionar manualmente o resumo depois de definir $ ViewValue. O método $ setViewValue () é adequado para ouvir eventos personalizados em diretrizes personalizadas (como o uso de um plug -in jQuery com funções de retorno de chamada), gostaríamos de definir $ ViewValue e executar loops de digerir quando o retorno de chamada for chamado.

$ formatters

O valor de $ formatters é uma variedade de funções chamadas uma a uma na forma de um pipeline quando o valor do modelo de dados muda. Não tem efeito no pipeline $ parser e é usado para formatar e converter valores a serem exibidos nos controles com esse valor limitado.

$ ViewChangelisteners

O valor de $ ViewChangelistenners é uma variedade de funções chamadas uma a uma na forma de um pipeline quando o valor na visualização muda. Com $ ViewChangelistenners, comportamentos semelhantes podem ser alcançados sem usar o $ Watch. Como o valor de retorno é ignorado, essas funções não precisam retornar valores.

$ erro

O objeto de erro $ contém o nome do validador que não passou a verificação e as informações de erro correspondentes.

$ primitivo

O valor de $ Pristine é booleano, que pode nos dizer se o usuário modificou o controle.

$ sujo

O valor de $ sujo é o oposto de $ primitivo, que pode nos dizer se o usuário interagiu com o controle.

$ válido

O valor de $ válido nos diz se existem erros no controle atual. O valor é falso quando há um erro e o valor é verdadeiro quando não há erro.

$ inválido

O valor de $ inválido nos diz se há pelo menos um erro no controle atual e seu valor é oposto de $ válido.

Depois de aprender os pontos básicos do conhecimento, você precisa aprender profundamente o método de escrita de verificação personalizada. Após o NG1.3, a facilidade de uso das instruções de verificação foi aprimorada.

O acima é uma explicação detalhada dos exemplos de uso do formulário de verificação do AngularJS introduzido pelo editor. Espero que possa ajudá -lo. Continuarei atualizando o conhecimento relevante do formulário de verificação do AngularJS para você no futuro. Por favor, preste atenção ao site wulin.com!