Validación de formularios web (Una via fácil y rápido con HTML)

administrador

Al agregar validación de formularios web con HTML, se asegurará de que los usuarios ingresen sus datos con precisión y en el formato correcto. En el pasado, la validación de las entradas de formularios requería el uso de complementos de JavaScript, pero hoy en día la mayoría de los navegadores tienen soluciones integradas que pueden manejar la mayor parte de la validación.

En este tutorial le mostraremos cómo agregar reglas de validación a sus formularios, utilizando únicamente atributos de entrada HTML nativos.

Para demostrar el proceso de creación de reglas de validación, hemos preparado un formulario de registro HTML simple usando Bootstrap 4, usando sus clases para hacerlo responsive .

Diseño

HTML

Nuestro diseño consiste en un formulario Bootstrap con un par de campos de entrada y un botón de envío. Para este ejemplo, hemos utilizado 3 tipos diferentes de campos de entrada: una entrada de texto, una entrada de contraseña y una entrada de correo electrónico.

<div class="registration-form">
    <form>
        <h3 class="text-center">Registrarse</h3>
        <div class="form-group">
            <input class="form-control item" type="text" name="username" maxlength="15" minlength="4" pattern="^[a-zA-Z0-9_.-]*$" id="username" placeholder="Nombre de Usuario" required>
        </div>
        <div class="form-group">
            <input class="form-control item" type="password" name="password" minlength="6" id="password" placeholder="Password" required>
        </div>
        <div class="form-group">
            <input class="form-control item" type="email" name="email" id="email" placeholder="Email" required>
        </div>
        <div class="form-group">
            <button class="btn btn-primary btn-block create-account" type="submit">Registrarse</button>
        </div>
    </form>
</div>

CSS

También hemos agregado algunos estilos CSS básicos para que se vea su funcionamiento.

html {
   background-color : # 214c84 ;
  background-blend-mode : superposición;
  pantalla : flexión;
  alinear elementos : centro;
  justify-content : center;
  background-image : url (../../assets/img/image4.jpg);
  background-repeat : no-repeat;
  fondo de pantalla : cubierta;
  altura : 100% ;
}

cuerpo {
   color de fondo : transparente;
}

.registration-form {
   relleno : 50px  0 ;
}

.registration-form  form {
   max-width : 800px ;
  relleno : 50px  70px ;
  radio del borde : 10px ;
  caja-sombra : 4px  4px  15px  rgba (0, 0, 0, 0.2);
  color de fondo : #fff ;
}

.registration-form  form  h3 {
   font-weight : bold;
  margen inferior : 30px ;
}

.registration-form  .item {
   border-radius : 10px ;
  margen inferior : 25px ;
  relleno : 10px  20px ;
}

.registration-form  .create-account {
   border-radius : 30px ;
  relleno : 10px  20px ;
  tamaño de letra : 18px ;
  font-weight : negrita;
  color de fondo : # 3f93ff ;
  borde : ninguno;
  color : blanco;
  margen superior : 20px ;
}

@ media (max-width: 576px ) {
   .registration-form  form {
     relleno : 50px  20px ;
  }
}

Tipos de validación

HTML5

ofrece una manera agradable y fácil para la validación en línea, utilizando atributos de entrada. Hay una gran cantidad de atributos disponibles, solo veremos algunos de los más comunes. Para obtener una lista completa, puede visitar esta excelente guía MDN.

required

Este atributo especifica que el campo de entrada no puede estar vacío. Requiere que el usuario ingrese algo antes de enviar el formulario.

maxlength y minlength

Especifica la cantidad máxima / mínima de símbolos que el usuario puede ingresar en el campo de entrada. Esto es especialmente útil en campos de contraseña donde una contraseña más larga significa una contraseña más segura.

pattern

Especifica una expresión regular que tiene que coincidir para que los datos ingresados ​​pasen. Se puede usar con los siguientes tipos de entrada: texto, búsqueda, url, correo electrónico y contraseña.

Esta es una vía fácil y rápida de validación de formularios web, está desaconsejado solo usar este tipo de validaciones porque son vulnerables, se recomienda usar un lenguaje de programacion de lado del servidor y darle mas seguridad a lo que permitimos ingresar a nuestras bases de datos.
Saludos espero les haya gustado este pequeño tutorial…

DEMOSTRACIÓN

Relacionado