Embora eu não seja um programador de front-end, entendo como é importante fazer um bom trabalho de verificação no front-end.
Porque dessa maneira, o back -end pode respirar mais e, comparado ao back -end, o front -end pode realmente melhorar o sentimento de felicidade do usuário.
O AngularJS fornece uma função de verificação de formulário muito conveniente, grave -a aqui.
Primeiro começo com o seguinte código
A cópia do código é a seguinte:
<form ng-app = "myApp" ng-controller = "validationController" name = "mainform" Notalidate>
<p> Email:
<input type = "email" name = "email" ng-model = "email" necessário>
<span style = "cor: vermelho" ng-show = "mainform.mail. $ Dirty && mainform.email. $ inválido">
<span ng-show = "mainform.mail. $ error.reabled"> é necessário e-mail. </span>
<span ng-show = "mainform.mail. $ error.mail"> endereço de email inválido. </span>
</span>
</p>
<p>
<input type = "submite" ng-disabled = "mainform. $ inválido">
</p>
</morm>
<Cript>
angular.module ('myApp', [])
.Controller ('ValidationController', ['$ scope', função ($ scope) {
$ scope.User = 'Kavlez';
$ scope.email = '[email protected]';
}]);
</script>
Algumas opções de verificação para tags de entrada geralmente são usadas com tags HTML5.
Obrigatório
<input type = "text" necessário />
comprimento
Use a diretiva ng-minlength/ng-maxlength
<input type = "text" ng-minlength = "5" />
Formato específico
Por exemplo, email, URL e número, basta definir o tipo para o tipo correspondente, por exemplo:
A cópia do código é a seguinte:
<input type = "email" name = "email" ng-model = "user.email" />
<input type = "número" name = "idade" ng-model = "user.age" />
<input type = "url" name = "homepage" ng-model = "user.facebook_url" />
Correspondência de padrões
Use a diretiva NG-Pattern, por exemplo:
A cópia do código é a seguinte:
<input type = "text" ng-tattern = "[az]" />
Formam propriedades, essas propriedades facilitam a operação em formulários
intocado/sujo
Indica se foi modificado, p.
A cópia do código é a seguinte:
<nome name = "mainform" ng-controller = "OrderController">
<input type = "email" name = "userEmail" ng-model = "myemail" />
{{Mainform.UserEmail. $ Pristine}}
{{mainform.UserEmail. $ Dirty}}
</morm>
Acessado em formname.fieldName. $ Modo primitivo, a entrada deve ter uma declaração de modelo NG.
A cópia do código é a seguinte:
válido/inválido
Indica se passa a verificação.
A cópia do código é a seguinte:
$ erro
Informações de verificação do formulário e as informações correspondentes são retornadas se a verificação falhar.
AngularJS fornece a classe CSS de acordo para o status do formulário
A cópia do código é a seguinte:
.ng-pristine
.ng-Dirty
.ng-Valid
.ng-invalid
Por exemplo, deixe a verificação passar verde e falhar em vermelho:
A cópia do código é a seguinte:
input.ng-valida {
Cor: verde;
}
input.ng-invalid {
Cor: verde;
}
No exemplo dado, apenas uma verificação de email é muito escrita. Se você adicionar alguns campos, adicione algumas instruções diferentes e adicione alguns eventos, o código ficará confuso.
De fato, não é recomendável fazer isso, temos uma maneira melhor.
É para usar messages angular.js
Primeiro de tudo, não se esqueça desses dois passos
A cópia do código é a seguinte:
<script src = "angular-messages.js"> </sCript>
angular.module ('myApp', ['ngmessages']))
OK, primeiro substitua essas duplicatas por mensagens NG e NG-Message, e o exemplo acima se torna:
A cópia do código é a seguinte:
<form ng-controller = "validationController" name = "mainform">
<p> Email:
<entrada
type = "email" name = "email" ng-model = "mymail" ng-minlength = "3" ng-maxlength = "50" necessário />
<div style = "cor: vermelho" ng-messages = "mainform.mail. $ error" ng-messages-multiple>
<p ng-message = "requerir"> é necessário email. </p>
<P ng-message = "email"> endereço de email inválido. </p>
<P ng-message = "MinLength"> Min Comprimento 10 </p>
<P ng-message = "maxlength"> Comprimento máximo 50 </p>
</div>
</p>
<p>
<input type = "submite" ng-disabled = "mainform. $ inválido" />
</p>
</morm>
Não há alteração na função, apenas o código duplicado foi removido.
Preste atenção à distinção entre as-massas NG e as mensagens NG. Parece um pouco como ()? O NG-Messages-Multiple por trás dele é usado para fazer com que vários avisos apareçam ao mesmo tempo.
Mas isso ainda não é bom o suficiente. Mesmo que o conteúdo da mensagem NG seja omitido, ainda haverá duplicação quando existir uma verificação necessária em vários campos.
Além disso, haverá mais e mais solicitações de verificação repetidas se os formulários em diferentes páginas envolverem o mesmo conteúdo.
Para resolver esse problema, podemos usar a diretiva NG-Messages-Include.
Esta diretiva é usada para fazer modelos de referência, por exemplo, o exemplo acima se torna:
A cópia do código é a seguinte:
<form ng-controller = "validationController" name = "mainform">
<p> Email:
<entrada
type = "email" name = "email" ng-model = "mymail" ng-minlength = "3" ng-maxlength = "50" necessário />
<div style = "cor: vermelho" ng-messages = "mainform.mail. $ error" ng-messages-multiple ng-messages-include = "validateTemplate/email.html">
</div>
</p>
<p>
<input type = "submite" ng-disabled = "mainform. $ inválido" />
</p>
</morm>
Não é complicado, vamos adicionar algo.
Para tornar as solicitações mais amigáveis (?), Tentamos alcançar o efeito de prompts aparecendo após as folhas do cursor.
Neste momento, será muito mais conveniente usar diretivas. Aqui, primeiro envolvemos algumas informações relacionadas às instruções.
Execute primeiro e depois fale sobre isso:
A cópia do código é a seguinte:
var myApp = angular.module ('myApp', [])
.Controller ('ValidationController', ['$ scope', função ($ scope) {
$ scope.User = 'Kavlez';
$ scope.email = '[email protected]';
}])
.Directive ('Hintonblur', [function () {
retornar {
requer: 'ngmodel',
link: function (escopo, elemento, attrs, ctrl) {
ctrl.focused = false;
Element.Bind ('Focus', function (EVT) {
escopo. $ aplicar (function () {ctrl.focused = true;});
}). Bind ('Blur', função (EVT) {
escopo. $ aplicar (function () {ctrl.focused = false;});
});
}
}
}]);
Aqui usamos foco para determinar se o cursor está em uma determinada propriedade. Quando o evento Focus ou Blur ocorre em um objeto usando a diretiva Hintonblur, o estado de foco mudou.
O formulário será alterado da seguinte forma:
A cópia do código é a seguinte:
<form ng-controller = "validationController" name = "mainform">
<p> Email:
<input type = "email" name = "email" ng-model = "mymail" ng-minlength = "3" ng-maxlength = "50" exigido dica-on-blur />
<div style = "cor: vermelho" ng-messages = "mainform.mail.
</div>
</p>
<p>
<input type = "submite" ng-disabled = "mainform. $ inválido" />
</p>
</morm>
Adicione o julgamento do foco no NG-Show e um prompt aparece quando falso.
Parece que agora.
Personalize métodos de verificação e validade, que também usa diretivas.
Verifique se o e -mail que você preencheu ocupou. Aqui está uma simulação simples:
A cópia do código é a seguinte:
.Directive ('IsalReadyTaken', function () {
retornar {
requer: 'ngmodel',
link: function (escopo, ele, attrs, ctrl) {
Ctrl. $ parsers.push (função (val) {
Ctrl. $ setValidity ('emailAvilable', false);
var e -mailtable = [
for (var i = 0; i <e -mailtable.length; i+= 1)
if (val == emailtable [i])
retornar;
Ctrl. $ setValidity ('emailAvailable', true);
retornar val;
})
}
}
})
Adicione o atributo IS-Alseady tirado ao elemento de entrada e adicione outra mensagem NG:
A cópia do código é a seguinte:
<P ng-message = "emailAvailable"> já leva! Experimente outros endereços de e -mail! </p>