Aunque no soy un programador front-end, entiendo lo importante que es hacer un buen trabajo de verificación en el front-end.
Porque de esta manera, el backend puede respirar más y compararse con el backend, el interfaz puede mejorar el sentido de felicidad del usuario.
AngularJS proporciona una función de verificación de forma muy conveniente, registértela aquí.
Primero comienza con el siguiente código
La copia del código es la siguiente:
<Form Ng-App = "MyApp" Ng-Controller = "ValidationController" name = "mainform" Novalidate>
<p> Correo electrónico:
<input type = "correo electrónico" name = "correo electrónico" ng-model = "correo electrónico" requerido>
<span style = "color: rojo" ng-show = "mainform.email. $ sucio && mainform.email. $ inválido">
<span ng-show = "mainform.email. $ Error.Required"> Se requiere correo electrónico. </span>
<span ng-show = "mainform.email. $ Error.email"> Dirección de correo electrónico no válida. </span>
</span>
</p>
<p>
<input type = "enviar" ng-disable = "mainform. $ invalid">
</p>
</form>
<script>
angular.module ('myapp', [])
.Controller ('ValidationController', ['$ Scope', function ($ Scope) {
$ scope.user = 'kavlez';
$ scope.email = '[email protected]';
}]);
</script>
Algunas opciones de verificación para etiquetas de entrada generalmente se usan con etiquetas HTML5.
Requerido
<input type = "text" requerido />
longitud
Use la directiva ng-minlength/ng-maxLength
<input type = "text" ng-minLength = "5" />
Formato específico
Por ejemplo, correo electrónico, URL y número, simplemente establezca el tipo en el tipo correspondiente, por ejemplo:
La copia del código es la siguiente:
<input type = "correo electrónico" name = "correo electrónico" ng-model = "user.email" />
<input type = "number" name = "edad" ng-model = "user.age" />
<input type = "url" name = "HomePage" ng-model = "user.facebook_url" />
Coincidencia de patrones
Use la directiva ng-patern, por ejemplo:
La copia del código es la siguiente:
<input type = "text" ng-pattern = "[AZ]" />
Propiedades de formulario, estas propiedades facilitan la operación en formularios
prístino/sucio
Indica si ha sido modificado, p.
La copia del código es la siguiente:
<form de nombre = "mainform" ng-confontroller = "OrderController">
<input type = "correo electrónico" name = "userEmail" ng-model = "myEmail" />
{{mainform.useremail. $ pristine}}
{{mainform.useremail. $ sucio}}
</form>
Accedido en formname.fieldname. $ Modo Pristine, la entrada debe tener una declaración de modelo NG.
La copia del código es la siguiente:
válido/inválido
Indica si pasa la verificación.
La copia del código es la siguiente:
$ error
Información de verificación de formulario y la información correspondiente se devuelve si la verificación falla.
AngularJS proporciona la clase CSS en consecuencia para el estado de formulario
La copia del código es la siguiente:
.ng-prístino
.ng-dirty
.ng-valid
.ng-inválido
Por ejemplo, deje que la verificación pase verde y falla rojo:
La copia del código es la siguiente:
input.ng-válido {
Color: verde;
}
input.ng-inválido {
Color: verde;
}
En el ejemplo dado, solo una verificación de correo electrónico se escribe mucho. Si agrega algunos campos, agrega algunas indicaciones diferentes y agrega algunos eventos, el código se volverá desordenado.
De hecho, no se recomienda hacer esto, tenemos una mejor manera.
Es usar pasajes angulares.js
En primer lugar, no olvides estos dos pasos
La copia del código es la siguiente:
<script src = "angular-messages.js"> </script>
Angular.module ('myApp', ['ngMessages'])
Ok, primero reemplace esos duplicados con mensajes NG y Ng-Message, y el ejemplo anterior se convierte en:
La copia del código es la siguiente:
<Form Ng-Controller = "ValidationController" name = "mainform">
<p> Correo electrónico:
<Entrada
type = "Correo electrónico" name = "Correo electrónico" ng-model = "myEmail" ng-minLength = "3" ng-maxLength = "50" requerido />
<div style = "color: rojo" ng-messages = "mainform.email. $ Error" Ng-Messages-Multiple>
<p ng-Message = "requerido"> Se requiere correo electrónico. </p>
<P ng-Message = "Correo electrónico"> Dirección de correo electrónico no válida. </p>
<p ng-mesage = "minlength"> min longitud 10 </p>
<p ng-mesage = "maxLength"> max longitud 50 </p>
</div>
</p>
<p>
<input type = "enviar" ng-disable = "mainform. $ invalid" />
</p>
</form>
No hay cambios en la función, solo se ha eliminado el código duplicado.
Presta atención a distinguir entre mensajes ng y mensajes ng. ¿Se siente un poco como con ()? El Ng-Messages-Multiple detrás de él se usa para hacer que múltiples indicaciones aparezcan al mismo tiempo.
Pero esto todavía no es lo suficientemente bueno. Incluso si se omite el contenido en el mensaje NG, todavía habrá duplicación cuando exista verificación en múltiples campos.
Además, habrá más y más indicaciones de verificación repetidas si los formularios en diferentes páginas involucran el mismo contenido.
Para resolver este problema, podemos usar la Directiva NG-Messages-Include.
Esta directiva se usa para referencia a las plantillas, por ejemplo, el ejemplo anterior se convierte en:
La copia del código es la siguiente:
<Form Ng-Controller = "ValidationController" name = "mainform">
<p> Correo electrónico:
<Entrada
type = "Correo electrónico" name = "Correo electrónico" ng-model = "myEmail" ng-minLength = "3" ng-maxLength = "50" requerido />
<div style = "color: rojo" ng-messages = "mainform.email. $ Error" Ng-Messages-Multiple ng-Messages-Include = "ValidateTemplate/Correo electrónico.html">
</div>
</p>
<p>
<input type = "enviar" ng-disable = "mainform. $ invalid" />
</p>
</form>
No es complicado, agreguemos algo.
Para hacer que las indicaciones sean más amigables (?), Tratamos de lograr el efecto de las indicaciones que aparecen después de que el cursor se va.
En este momento, será mucho más conveniente usar directivas. Aquí primero involucramos información relacionada con las instrucciones.
Ejecutarlo primero y luego hablar de ello:
La copia del código es la siguiente:
var myApp = angular.module ('myApp', [])
.Controller ('ValidationController', ['$ Scope', function ($ Scope) {
$ scope.user = 'kavlez';
$ scope.email = '[email protected]';
}])
.Directive ('Hintonblur', [function () {
devolver {
requiere: 'ngmodel',
enlace: función (alcance, elemento, attrs, ctrl) {
ctrl.ocused = false;
element.bind ('focus', function (evt) {
alcance. $ Aplicar (function () {ctrl.focused = true;});
}). bind ('blur', function (evt) {
alcance. $ aplicar (function () {ctrl.focused = false;});
});
}
}
}]);
Aquí usamos enfocado para determinar si el cursor está en una determinada propiedad. Cuando el evento Focus o Blur se produce en un objeto que usa la Directiva Hintonblur, el estado de enfoque cambió.
El formulario se cambiará de la siguiente manera:
La copia del código es la siguiente:
<Form Ng-Controller = "ValidationController" name = "mainform">
<p> Correo electrónico:
<input type = "correo electrónico" name = "correo electrónico" ng-model = "myEmail" ng-minLength = "3" ng-maxLength = "50" requerido de insinuado-in-blur />
<div style = "color: rojo" ng-messages = "mainform.email. $ error" ng-show = "! MainForm.email.eCused" Ng-Messages-Multiple ng-Messages-Include = "ValidateTemplate/Correo electrónico.html">>
</div>
</p>
<p>
<input type = "enviar" ng-disable = "mainform. $ invalid" />
</p>
</form>
Agregue el juicio de Focused in Ng-Show, y un aviso aparece cuando se falsa.
Se ve así ahora.
Personalizar los métodos de verificación y la validez, que también utiliza directivas.
Verifique que el correo electrónico que haya completado ha ocupado. Aquí hay una simple simulación:
La copia del código es la siguiente:
.Directive ('isalreadytaken', function () {
devolver {
requiere: 'ngmodel',
enlace: función (alcance, ele, attrs, ctrl) {
Ctrl. $ parsers.push (function (val) {
ctrl. $ setValidity ('correo electrónico a la altura', falso);
VAR ELECHTABLE = [[
para (var i = 0; i <cagueTable.length; i+= 1)
if (val == CORRAGETTABLE [i])
devolver;
ctrl. $ setValidity ('correo electrónico a la altura', true);
devolver val;
})
}
}
})
Agregue el atributo IS-AlReady Taken al elemento de entrada y agregue otro mensaje NG:
La copia del código es la siguiente:
<P ng-Message = "EmailVailable"> ¡Ya se toma! ¡Prueba otras direcciones de correo electrónico! </p>