La validación es un método para autenticar el usuario. Se utiliza en todas las tecnologías web como y . Pero hoy nuestro enfoque estará en la validación en Angular JS en el siguiente orden:
- ¿Qué es la validación de formularios?
- Validación de formularios en Angular JS
- Pasos en la validación de formularios
- Código
¿Qué es la validación de formularios?
La validación de formularios es una técnica mediante la cual podemos validar el formulario HTML. Tomemos un ejemplo simple para suponer que un usuario tiene un formulario HTML y ese formulario HTML tiene diferentes campos, estos campos son validados por el validador de formularios cuando queremos validar el formulario solo necesitamos verificar el valor del campo en particular con la expresión del validador .
Si la expresión regular y el valor del campo son iguales, podemos decir que nuestro formulario está validado. En el formulario HTML, hay diferentes tipos de validaciones como correo electrónico, requerido, mínimo, máximo, contraseña, etc.
Validación de formularios en Angular JS
Hablemos de cómo podemos validar un formulario en JS angular. Angular JS proporciona varios tipos de propiedades de validación de formularios que podemos usar para validar el formulario u obtener los datos del formulario.
$ válido : Esta propiedad indica si el campo es válido o no aplicando la regla adecuada sobre él.
$ inválido : Como el nombre dice inválido, estos mosaicos meteorológicos el campo no es válido o no se basa en la regla apropiada al respecto.
$ prístino : Devolverá verdadero en el formulario. El campo de entrada no se usa.
$ sucio : Devolverá verdadero en la forma en que se use el campo de entrada.
saltar en c ++
$ tocado : BooleanTrue si la entrada ha sido borrosa.
Para acceder al formulario: .
Para acceder a una entrada: ..
Ahora expliquemos la validación de formularios en JS angular con un ejemplo, así que primero creamos dos archivos, uno es app.js y otro es index.html. Nuestro archivo index.htm contiene un formulario HTML simple que tiene la validación angular y nuestro archivo app.js contiene el código backend para manejar la validación del formulario en la página index.html.
losindex.htmlformulario de contenido de la página conno validarpropiedad y qué significa eso exactamente?
La propiedad novalidate en la etiqueta de formulario le dice al HTML que podemos usar nuestra validación de formulario personalizada. Si no proporcionamos la propiedad novalidate, el formulario HTML se valida mediante las propiedades de validación de formulario predeterminadas de HTML5.
Pasos en la validación de formularios
En nuestro formulario, creamos 6 campos en nuestro formulario: nombre, apellido, correo electrónico, teléfono, contraseña y mensaje.
Primero, agregamos el validador de campo requerido, este validador les dice a los usuarios que se requiere un campo específico.
El siguiente es el campo de correo electrónico si un usuario no proporciona ningún correo electrónico válido, entonces nuestro validador de correo electrónico arroja un error de validación de correo electrónico.
Establecemos la longitud mínima y máxima en nuestra validación de contraseña, la longitud mínima es 5 y la longitud máxima es 8 para que el usuario pueda dar una contraseña válida entre 5 y 8 caracteres.
Finalmente, configuramos el teléfono y los campos de mensaje requeridos y, específicamente, aplicamos la validación de número en el teléfono archivado.
Código para la validación de formularios en Angular JS
index.html
Ejemplo de alcance angular Nombre
Este archivo es obligatorio
Apellido
Este archivo es obligatorio
Email
Este archivo es obligatorio
No es un email valido
Teléfono
Este archivo es obligatorio
Este no es un telefono valido
Contraseña
Este archivo es obligatorio
Contraseña entre 5 y 8 caracteres
Mensaje
Este archivo es obligatorio
Enviar
app.js
var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', función ($ alcance) {})Hablemos de algunas directivas de validación utilizadas en el formulario:
- ng-required : Por proporcionar el campo requerido
- ng-show : Para mostrar el mensaje de error basado en la condición (verifique las propiedades de validación)
- de longitud mínima : Para proporcionar una longitud mínima
- ng-maxlength : Para proporcionar la longitud máxima
- de patrón : Para hacer coincidir un patrón específico
- ng-modelo : Vincula el campo con propiedades de validación como $ error, $ valid, etc.
Con esto, llegamos al final de este artículo de Validación en Angular JS. Espero que comprenda las diversas cosas que se deben considerar para la validación de formularios en Angular JS.
Si desea obtener más información sobre el marco angular, consulte nuestro que viene con capacitación en vivo dirigida por un instructor y experiencia en proyectos de la vida real. Esta capacitación lo ayudará a comprender Angular en profundidad y lo ayudará a dominar el tema.
Tienes una pregunta para nosotros? Menciónelo en la sección de comentarios de este artículo y nos pondremos en contacto con usted.