Validación de formularios de JavaScript

La validación de formularios HTML se puede realizar mediante JavaScript.

Los formularios HTML se utilizan comúnmente para recopilar información del usuario, como nombre, dirección de correo electrónico, ubicación, edad, etc.

Pero es probable que ciertos usuarios no ingresen los datos que esperaba.

Para evitar la presión innecesaria en los recursos del servidor, puede usar JavaScript para verificar los datos del formulario en el cliente (sistema del usuario).

Antes de enviar la entrada al servidor web, se ejecuta por el navegador web.Validación del lado del cliente.

Después de enviar la entrada al servidor,Validación del lado del servidorpor el servidor web.

　　<div class="wrapper">
　　　　<h2>Crear una cuenta</h2>
　　　　<label for="username"><b>Nombre</b></label>
　　　　<input type="text" placeholder="Ingrese nombre de usuario" name="uname" id="username" required>
　　　　<label for="useremail"><b>Email</b></label>
　　　　<input type="email" placeholder="Ingrese Email" name="uemail" id="useremail" required>
　　　　<label for="userpwd1><b>Contraseña</b></label>
　　　　<input type="password" placeholder="Ingrese contraseña" name="psw" id="userpwd1" required>
　　　　<input type="password" placeholder="Confirmar contraseña" name="cpsw" id="userpwd2" required>
　　　　<p style="margin-top:　10px;">
　　　　　　　<input type="radio" name="gender" id="female" value="female" checked><label for="female">Mujer</label>
　　　　　　　<input type="radio" name="gender" id="male" value="male"><label for="male">Hombre</label>
　　　　</p>
　　　　<button type="submit">Registrar</button>
　　</div>
　　<div class="footer">
　　　　<div>¿Ya tiene una cuenta? <a href="#">Iniciar sesión</a></div>
　　</div>
</form>
<script>
function validateForm() {
　　let name = document.getElementById("username").value;
　　let email = document.getElementById("useremail").value;
　　let pswd1　= document.getElementById("userpwd1").value;
　　let pswd2　= document.getElementById("userpwd2").value;
　　
　　if(name == "") {
　　　　alert("Name must be filled out");
　　　　return false;
　　}
　　if(email == "") {
　　　　alert("Se debe llenar el correo electrónico");
　　　　return false;
　　}
　　if(pswd1　!== "" || pswd2　!== "") {
　　　　if(pswd1　!== pswd2) {
　　　　　　alert("Password didn't match");
　　　　　　return false;　　　　　　
　　　　}
　　} else {
　　　　alert("La contraseña debe estar llena");
　　　　return false;　　
　　}
　　return true;
}
</script>

Las tareas de validación típicas son:

• ¿Ha rellenado el usuario todos los campos obligatorios?

• ¿Ha introducido datos válidos el usuario?

En este código, si el campo de entrada (nombre de usuario) está vacío, esta función mostrará un mensaje de alerta y regresará false para evitar que se envíe el formulario:

　　function validateForm() {
　　let x = document.getElementById("uname").value;
　　if (x == "") {
　　　　alert("El nombre debe estar lleno");
　　　　return false;
　　}
　　}

Se puede llamar a esta función al enviar el formulario:

<form action="form-action.html" onsubmit="return validateForm()" method="POST">
　　<label for="uname">Nombre:</label>
　　<input type="text" name="username" id="uname">
　　<input type="submit" value="Enviar">
</form>

Validación de entrada de números

JavaScript se utiliza generalmente para validar la entrada de números.

Por favor, introduzca1hasta10entre los números:

Validación de entrada de correo electrónico

JavaScript se utiliza generalmente para validar la dirección de correo electrónico.

Por favor, introduzca una dirección de correo electrónico válida:

Validación de confirmación de contraseña

JavaScript se utiliza generalmente para coincidir la confirmación de la contraseña.

Validación automática de formularios HTML

La validación de formularios HTML se puede usarObligatorioEjecución automática de propiedades:

<input type="text" name="demo" required>

Cambiar tipo de entrada

Puedes cambiar entre<input type="password">y<input type="text">usando javascript.

Escribe un valor en el campo de contraseña y luego haz clic en el botón 'Mostrar contraseña':

Atributos de validación de entrada HTML

HTML5Se han introducido los siguientes nuevos atributos HTML:

Pseudo-selección de validación de CSS

CSS3Se han introducido los siguientes nuevos selectores de pseudo-estilos CSS:

Nota:La validación del cliente no puede reemplazar o reemplazar la validación del servidor. Incluso si los datos del formulario ya han sido validados, siempre se debe validar los datos del formulario en el servidor, porque los usuarios pueden desactivar JavaScript en su navegador.