tutoriais mais recente desenvolvimento web
 

AngularJS validação de formulário

❮ Anterior Próxima Capítulo ❯

AngularJS pode validar dados de entrada.

validação de formulário

AngularJS oferece validação de formulário do lado do cliente.

AngularJS monitora o estado dos campos do formulário e de entrada (input, textarea, select), e permite que você notificar o usuário sobre o estado atual.

AngularJS também contém informações sobre se eles foram tocados, ou modificada, ou não.

Você pode usar os atributos padrão HTML5 para validar a entrada, ou você pode fazer suas próprias funções de validação.

Nota a validação do lado do cliente de entrada do usuário segura não pode por si só. validação do lado do servidor também é necessário.

Requeridos

Use o atributo HTML5 required para especificar que o campo de entrada deve ser preenchido:

Exemplo

O campo de entrada é necessária:

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Tente você mesmo "

O email

Use o tipo de HTML5 email para especificar que o valor deve ser um e-mail:

Exemplo

O campo de entrada tem que ser um e-mail:

<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Tente você mesmo "

Estado forma e Estado de Entrada

AngularJS está constantemente atualizando o estado de tanto a forma como os campos de entrada.

Os campos de entrada tem os seguintes estados:

  • $untouched O campo ainda não foi tocado
  • $touched O campo foi tocado
  • $pristine O campo ainda não foi modificado
  • $dirty O campo foi modificado
  • $invalid O conteúdo do campo não é válido
  • $valid o conteúdo do campo é válido

Eles são todas as propriedades do campo de entrada, e são ou true ou false .

Formas têm os seguintes estados:

  • $pristine Nenhum campo foi ainda modificado
  • $dirty Um ou mais foram modificados
  • $invalid o conteúdo do formulário não é válido
  • $valid o conteúdo do formulário é válido
  • $submitted o formulário é enviado

Eles são todas as propriedades do formulário, e são ou true ou false .

Você pode usar esses estados para mostrar mensagens significativas para o usuário. Exemplo, se um campo é obrigatório, e o usuário deixa-o em branco, você deve dar ao usuário um aviso:

Exemplo

Mostrar uma mensagem de erro se o campo foi tocado e está vazio:

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>
Tente você mesmo "

Classes CSS

AngularJS acrescenta classes CSS a formas e campos de entrada, dependendo seus estados.

As seguintes classes são adicionados ou removidos de, campos de entrada:

  • ng-untouched O campo ainda não foi tocado
  • ng-touched O campo foi tocado
  • ng-pristine O campo ainda não foi modificado
  • ng-dirty O campo foi modificado
  • ng-valid o conteúdo do campo é válido
  • ng-invalid O conteúdo do campo não é válida
  • ng-valid- key Uma chave para cada validação. Exemplo: ng-valid-required , útil quando há mais do que uma coisa que deve ser validada
  • ng-invalid- key Exemplo: ng-invalid-required

As seguintes classes são adicionados ou removidos de, formas:

  • ng-pristine Nenhum campo ainda não foi modificado
  • ng-dirty Um ou mais campos foi modificado
  • ng-valid o conteúdo do formulário é válido
  • ng-invalid O conteúdo do formulário não é válido
  • ng-valid- key Uma chave para cada validação. Exemplo: ng-valid-required , útil quando há mais do que uma coisa que deve ser validada
  • ng-invalid- key Exemplo: ng-invalid-required

As aulas são removidos se o valor que eles representam é false .

Adicionar estilos para essas classes para dar a sua aplicação uma melhor e mais intuitiva interface do usuário.

Exemplo

Aplicar estilos, usando CSS padrão:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>
Tente você mesmo "

Os formulários também pode ser denominado:

Exemplo

Aplicar estilos para as formas não modificadas (cristalinas) e para formas modificadas:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>
Tente você mesmo "

Validação personalizada

Para criar sua própria função de validação é um pouco mais complicado. Você tem que adicionar uma nova directiva para a sua aplicação, e lidar com a validação dentro de uma função com certos argumentos especificados.

Exemplo

Crie a sua própria directiva, que contém uma função de validação personalizada, e referem-se a ele usando my-directive .

O campo só será válida se o valor contém o caractere "e":

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>

<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        }
        return value;
      }
      mCtrl.$parsers.push(myValidation);
    }
  };
});
</script>
Tente você mesmo "

Exemplo explicou:

Em HTML, a nova directiva será referida usando o atributo my-directive .

No JavaScript começamos adicionando uma nova directiva chamado myDirective .

Lembre-se, ao nomear uma directiva, você deve usar um nome caso camelo, myDirective , mas quando invocá-lo, você deve usar - nome separados, my-directive .

Em seguida, retornar um objeto que você especificar que exigimos ngModel , que é o ngModelController.

Fazer uma função de ligação que leva alguns argumentos, onde o quarto argumento, mCtrl , é o ngModelController ,

Em seguida, especifique uma função, neste caso chamado myValidation , que tem um argumento, este argumento é o valor do elemento de entrada.

Teste se o valor contém a letra "e", e definir a validade do modelo de controlador, quer true ou false .

Por fim, mCtrl.$parsers.push(myValidation); Adicionará o myValidation função para uma variedade de outras funções, que será executado toda vez que as alterações de valor de entrada.

Exemplo validação

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">Username is required.</span>
  </span>
</p>

<p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = '[email protected]';
});
</script>

</body>
</html>
Tente você mesmo "
Nota O novalidate atributo formulário HTML é usado para desativar a validação de navegador padrão.

exemplo Explicado

O ng-modelo directiva AngularJS liga os elementos de entrada para o modelo.

O objeto modelo tem duas propriedades: de usuário e e-mail.

Por causa de ng-show, os vãos com cor: vermelho são exibidos apenas quando o usuário ou e-mail é de R $ suja e US $ inválido.


❮ Anterior Próxima Capítulo ❯