Verificação de entrada do AngularJS
Os formulários e controles do AngularJS podem verificar os dados de entrada.
Digite a verificação
Nos capítulos anteriores, você aprendeu sobre as formas e controles do AngularJS.
Os formulários e controles do AngularJS podem fornecer recursos de verificação e alertar sobre dados ilegais inseridos pelos usuários.
Nota: A verificação do cliente não pode garantir a segurança dos dados de entrada do usuário; portanto, a verificação de dados no servidor também é necessária.
Código do aplicativo
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><h2>Verification instance</h2><form ng-app="myApp" ng-controller = "validateCtry" name = "myform" novalidado> <p> nome de usuário: <br> <input type = "text" name = "user" ng-model = "user" requerido> <span style = "cor: vermelho" ng-show = "myform.user. $ Dirty && myform.user. ng-show = "myform.user. $ error.Required"> O nome de usuário é necessário. </span> </span> </p> <p> email: <br> <input type = "email" name = "email" ng-model = "email" necessário> <span style = "cor: vermelho" ng-show = "myform.mail. </span> <span ng-show = "myform.email. $ error.mail"> endereço de e-mail ilegal. </span> </span> </p> <p> <input type = "submite" ng-disabled = "myform.user. []); App.Controller ('ValidatectRl', função ($ scope) {$ scope.user = 'John doe'; $ scope.email = '[email protected]';}); </script> </body> </html>Resultados em execução:
Exemplo de verificação
nome de usuário:
Correspondência:
NOTA: O atributo de formulário HTML é usado para desativar a verificação padrão do navegador.
Exemplo de análise
A diretiva angularjs ng-model é usada para ligar elementos de entrada ao modelo.
Um objeto modelo possui duas propriedades: usuário e email.
Utilizamos a diretiva NG-SHOW, cor: o vermelho é exibido apenas se a mensagem for $ sujo ou $ inválido.
| propriedade | descrever |
|---|---|
| $ sujo | Existem registros para preencher o formulário |
| $ válido | O conteúdo de campo é legal |
| $ inválido | O conteúdo de campo é ilegal |
| $ primitivo | Nenhum registro é preenchido no formulário |
O acima é uma compilação de informações de verificação de entrada do AngularJS. Continuaremos a complementá -lo mais tarde. Espero que possa ajudar os alunos que estudam.