Formas en JavaScript (forma validaciones)

Formas de JavaScript : En este tutorial, vamos a aprender formas en HTML utilizando JavaScript , junto con las validaciones de entrada amigo .

Formas de JavaScript

Una de las principales tareas de un desarrollador frontend es llevar a cabo validaciones de la forma class ciertos tipos de campos de un formulario . Usted debe haber notado cuando se está configurando una contraseña for su cuenta en un sitio web, se le permite introducir sólo ciertos caracteres. Ese campo de la contraseña es un campo de entrada que es una parte de la forma que comprende otros campos tales como nombre de usuario, correo electrónico, etc. En general, casi todos los sitios web necesita una forma ya que los usuarios se inscriban y de inicio de sesión no es más que un formulario HTML que toma valores del usuario.

Al cumplimentar el formulario, pulsa regístrate o accede en el que lleva a cabo otras operaciones como la que le llevará a su cuenta o provocó un error si hubo un error de inicio de sesión. Su formulario a la web reacciona a eventos que se activan al hacer clic en el botón de envío o pulsar enter si el campo está en foco. De ahí que las formas son muy importantes para entender. Ya que nunca son for, que dinámicamente interactuar con el usuario mediante el campo de formulario para llevar a cabo la siguiente secuencia de tareas. En este artículo, vamos a ver cómo construir una forma básica y cómo reaccionar a los acontecimientos de la forma?

Vamos a empezar por la creación de un simple formulario HTML con algunos estilos básicos

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Forms</title>
</head>
<style>
form {
margin: 20px auto;
padding: 20px 20px;
text-align: center;
width: 400px;
height: 400px;
background: rgba(85, 84, 165, 0.356);
}
h2 {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 40px;
color: white;
}
input {
background: white;
border: 2px solid gainsboro;
height: 30px;
padding: 10px auto;
margin: 10px auto;
}
input::placeholder {
color: rgba(86, 90, 141, 0.61);
text-transform: uppercase;
letter-spacing: 3px;
text-align: center;
}
input[type=submit] {
border: 2px solid gainsboro;
border-radius: 8px;
cursor: pointer;
background-color: rgb(97, 176, 179);
color: whitesmoke;
padding: 5px 5px;
margin: 10px;
text-transform: uppercase;
box-shadow: 2px 2px 2px rgb(15, 52, 83);
}
</style>
<body>
<form action="">
<h2>Form</h2>
<input type="text" placeholder="name" id="name">
<input type="submit" value="submit">
</form>
</body>

Bueno por lo que ahora tenemos una forma muy básica preparada, que se ve algo como esto.

Forms in JavaScript (form validations) - 4

Bueno por lo que vamos a imaginar que tiene este formulario en su sitio web y lo que necesita para enviar la información sobre el usuario entra en su nombre de back-end que valida este nombre en su base de datos y envía una respuesta. Imagine esto como una versión muy básica del formulario de acceso. Tenemos un campo de nombre simple y cada usuario en nuestra base de datos tiene un nombre único y de un click en enviar tenemos que comprobar si existe en nuestra base de datos de inicio de sesión o no static el nombre de usuario introducido. Por lo tanto tenemos que capturar el valor introducido en el campo de entrada y se unen a que un detector de eventos en nuestro botón de enviar.

Una manera fácil de hacer esto es usar el evento click en el botón de envío. Sin embargo, los eventos de clic sólo reaccionan a clics y una forma versátil reacciona al pulsar enter cuando el campo está en foco. Por lo tanto vamos a utilizar una Envía una prueba class este propósito.

Así que primero vamos a capturar el botón de enviar y añadir un evento presentara

<script>
const form = document.querySelect('form');
form.addEventListener('submit', e => {})
</script>

El comportamiento for del evento es presentar para recargar la página. Intente hacer clic en el botón verá su página de recarga en Enviar. No necesitamos eso, así que vamos a eliminarla. Tenemos el objeto de evento disponible para nosotros y podemos contar nuestra forma de utilizar ese objeto evento para evitar que el comportamiento de nuestro evento for presentar.

    e.preventDefault();

Muy bien, ahora vamos a capturar el valor de nuestro campo de entrada. Tenemos una forma tradicional de hacer esto en el cual primero se añade un selector de consultas y luego utilizar el valor de la propiedad.

const name=document.querySelector('#name')
console.log(name.value);

También podemos utilizar directamente la variable de formulario para obtener el valor del campo de entrada haciendo referencia al ID asignado a ese campo.

console.log(form.name.value);

En el default de múltiples campos de entrada en un formulario, este método es muy útil, ya que ahorra tiempo y código donde adjuntamos todos los campos de entrada a una variable para hacer referencia a ella.

< script >
const form = document.querySelector('form');
//const name=document.querySelector('#name');
form.addEventListener('submit', e => {
e.preventDefault();
//console.log(name.value);
console.log(form.name.value);
})
< /script>

Así es como se escucha a formar eventos y capturar los valores de los campos de entrada.

Podemos hacer todo tipo de cosas mediante la activación del evento Enviar.

HTML nos proporciona algunas validaciones básicas que podemos añadir nuestro formulario. Vamos a tratar de poner en práctica estos. En primer lugar, vamos a reestructurar nuestra forma y añadir un poco más campos de entrada.

<form action="">
<h2>Form</h2>
<input type="text" placeholder="name" id="name">
<br>
<input type="text" placeholder="email" id="email">
<br>
<input type="text" placeholder="password" id="password">
<br>
<input type="text" placeholder="userid" id="name">
<br>
<input type="text" placeholder="date of joining" id="dateofjoining">
<br>
<input type="submit" value="submit">
</form>

Tenemos un correo electrónico , contraseña y fecha de incorporación campos. La propiedad tipo de campo de entrada es un validador de acumulación default los jardines. Actualmente, todos los campos tienen un tipo de texto que establece que estos campos se pueden rellenar por cualquier texto que pueda básicamente case cualquiera y todos los personajes. Lógicamente, no hay que dejar que el usuario introduzca cualquier letras en el identificador de usuario campo, el fecha de incorporación debe hacerse un selector de fecha class formato correcto y la uniformidad de datos. Del mismo modo, hay que evitar que muestra la contraseña para el usuario teclea como class razones de seguridad. Podemos hacer esto, simplemente definiendo los tipos correspondientes a los campos en función de los valores que queremos que el usuario introduzca.

<form action="">
<h2>Form</h2>
<input type="text" placeholder="name" id="name">
<br>
<input type="text" placeholder="email" id="email">
<br>
<input type="password" placeholder="password" id="password">
<br>
<input type="number" placeholder="userid" id="name">
<br>
<input type="date" placeholder="date of joining" id="dateofjoining">
<br>
<input type="submit" value="submit">
</form>

Hemos utilizado el número de tipo de identificador de usuario class , añadido un selector de fecha para la fecha de la unión y las pieles de contraseña escriba el texto que introduce el usuario. Por lo tanto, hemos añadido algunas comprobaciones a nuestros campos lo que hace que nuestra forma un poco mejor que antes.

Forms in JavaScript (form validations) - 5

Si usted desea aprender cómo validar formularios, leer el artículo sobre expresiones regulares en JavaScript, donde construimos una forma más intensiva y validar sus campos usando expresiones regulares.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *