AngularJS validação de entrada
AngularJS formulários e controles pode validar entradas de dados.
validação de entrada
Nas seções anteriores, você aprendeu o conhecimento sobre AngularJS formulários e controles.
AngularJS formulários e controles pode oferecer recursos de validação e dados ilegais introduzidos pelo utilizador um aviso.
 | Verifique se o cliente não pode garantir a segurança de entrada de dados do usuário, servidor de validação de dados também é necessário. |
|---|
O código do aplicativo
<! DOCTYPE html>
<Html>
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Body>
<H2> Exemplo Validação </ h2 >
<Form ng-app = "myApp " ng-controller = "validateCtrl"
name = "myForm" novalidate>
<P> Usuário: <br>
<Input type = "text" name = "user"-modelo ng = "user" necessária>
<Span style = "color: red " ng-show = ".. MyForm.user $ suja && myForm.user $ inválido">
<Span ng-show = "myForm.user . $ Error.required"> nome de usuário é necessária. </ Span>
</ Span>
</ P>
<P> E-mail: <br>
<Input type = "email" name = "email" ng-model = "email" necessária>
<Span style = "color: red " ng-show = ".. MyForm.email $ suja && myForm.email $ inválido">
<Span ng-show = "myForm.email . $ Error.required"> caixa de correio é uma obrigação. </ Span>
<span ng-show = "myForm.email . $ Error.email"> caixas de correio ilegais. </ Span>
</ Span>
</ P>
<P>
<Input type = "submit"
ng-disabled = "myForm.user. $ suja && myForm.user. $ inválida ||
myForm.email. $ suja && myForm.email. $ inválido ">
</ P>
</ Form>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'validateCtrl', function ($ escopo) {
$ Scope.user = 'John Doe';
$ Scope.email = '[email protected]';
});
</ Script>
</ Body>
</ Html>
<Html>
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Body>
<H2> Exemplo Validação </ h2 >
<Form ng-app = "myApp " ng-controller = "validateCtrl"
name = "myForm" novalidate>
<P> Usuário: <br>
<Input type = "text" name = "user"-modelo ng = "user" necessária>
<Span style = "color: red " ng-show = ".. MyForm.user $ suja && myForm.user $ inválido">
<Span ng-show = "myForm.user . $ Error.required"> nome de usuário é necessária. </ Span>
</ Span>
</ P>
<P> E-mail: <br>
<Input type = "email" name = "email" ng-model = "email" necessária>
<Span style = "color: red " ng-show = ".. MyForm.email $ suja && myForm.email $ inválido">
<Span ng-show = "myForm.email . $ Error.required"> caixa de correio é uma obrigação. </ Span>
<span ng-show = "myForm.email . $ Error.email"> caixas de correio ilegais. </ Span>
</ Span>
</ P>
<P>
<Input type = "submit"
ng-disabled = "myForm.user. $ suja && myForm.user. $ inválida ||
myForm.email. $ suja && myForm.email. $ inválido ">
</ P>
</ Form>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'validateCtrl', function ($ escopo) {
$ Scope.user = 'John Doe';
$ Scope.email = '[email protected]';
});
</ Script>
</ Body>
</ Html>
tente »
| formulário HTML atributos novalidate para desativar a validação padrão do navegador. |
|---|
Exemplos de analítico
AngularJS instrução ng-modelo é utilizado para ligar os elementos de entrada para o modelo.
objeto modelo tem dois atributos: de usuário e e-mail.
Usamos ng-show de comando, cor: vermelho na mensagem é de apenas $ $ visualização inválido sujo ou.
| propriedade | descrição |
|---|---|
| $ suja | Existem formas para preencher registro |
| $ Valid | conteúdo do campo legítimo |
| $ inválido | O conteúdo dos campos são ilegais |
| $ Pristine | Não há formulários para preencher registro |