La validación de datos es una parte esencial de cualquier aplicación web, ya que ayuda a garantizar que los datos que se cargan cumplan con ciertos requisitos impuestos por los desarrolladores. Los datos se pueden validar tanto en el lado del servidor como en el del cliente, pero la validación del lado del cliente a menudo ahorra tiempo a los usuarios y demuestra una experiencia de usuario más agradable y fluida. La validación de datos del lado del cliente se puede hacer fácilmente y consume mucho menos tiempo.
En esta guía práctica, recorreremos el proceso de creación de un formulario usando HTML, JavaScript/jQuery que valida el tamaño del archivo a medida que se carga. El beneficio de esta validación es que podemos restringir a los usuarios para que carguen solo un cierto tamaño de archivos y asegurarnos de que sigan estrictamente nuestros requisitos. Si el archivo tiene un tamaño incorrecto, podemos enviar un mensaje al usuario sin cargar el archivo en el servidor, lo que ahorra un tiempo precioso.
Crear página web
Primero, crearemos una página web HTML simple:
DOCTIPO html >
< html >
< cabeza >
< título >
Validación de expediente Talla tiempo subir usando JavaScript / jQuery
título >
cabeza >
< cuerpo estilo = 'relleno superior: 10px; alineación de texto: centro;' >
< pags > Sube un expediente pags >
< aporte identificación = 'expediente' escribe = 'expediente' estilo = 'relleno-izquierda: 95px;' />
< hermano >< hermano >
< botón al hacer clic = 'validacióntamaño()' > Subir botón >
cuerpo >
html >
Comprender el código:
En el cuerpo de la página web, simplemente hemos utilizado un ,
y un
los
Definir la función JavaScript sizeValidation()
Ahora vamos a escribir el código JavaScript que define el tamañoValidación() función.
< guion >
función sizeValidation ( ) {
var entrada = documento.getElementById ( 'expediente' ) ;
estaba expediente = entrada.archivos;
si ( archivo.longitud== 0 ) {
alerta ( 'Ningún archivo elegido' ) ;
devolver falso ;
}
var fileSize = Matemáticas.redondo ( ( expediente [ 0 ] .Talla / 1024 ) ) ;
si ( tamaño del archivo < = 5 * 1024 ) {
alerta ( 'Subido' ) ;
} más {
alerta (
'¡Error! Archivo demasiado grande' ) ;
}
}
guion >
Comprender el código:
Dentro del cuerpo del tamañoValidación() primero obtenemos la etiqueta y luego usamos la var archivo = inputElement.files; línea para que podamos obtener acceso al archivo que se está cargando. Luego, verificamos si se ha cargado un archivo; de lo contrario, mostraremos un mensaje de error y saldremos de la función devolviendo falso.
Luego usamos algunas matemáticas para determinar el tamaño del archivo. Si el archivo tiene el tamaño adecuado, es decir, 5 MB (en este caso), se carga.
De lo contrario, se muestra una ventana emergente que contiene un mensaje de error.
Conclusión
Aunque la validación del lado del cliente es mucho más eficiente, aún no es un sustituto de la validación del lado del servidor y se puede eludir en la mayoría de los casos. Siempre es una buena práctica implementar la validación del lado del servidor y del lado del cliente para que pueda garantizar tanto la eficiencia como la precisión de su aplicación.