Validación de formularios JavaScript - Diferentes tipos de validación de formularios JavaScript

Tabla de contenido:

Anonim

Introducción a la validación de formularios JavaScript

La validación de formularios realiza la verificación de precisión en los formularios creados y verifica si la información enviada por el usuario es correcta. La validación de los formularios generalmente ocurre en el lado del servidor, una vez que el cliente ingresa la información requerida. Después de la validación del formulario, si hay información incorrecta o algún campo en blanco. Luego, el servidor enviaría el mensaje al cliente de que la información ingresada es incorrecta o falta. La validación de los formularios brinda a los clientes la confianza de que toda la información ingresada sería correcta o, de lo contrario, se arrojaría un error para poder corregirla.

Ejemplo:

function validate() (
var y = document.forms("Form")("f.name").value;
if (y == "")
(
alert("Name filed is empty");
return false;
)
)

Cosas que deben verificarse mientras se realiza la validación de formularios

  • Compruebe si el usuario dejó el campo vacío que debe rellenarse. Si está vacío, devuelva "Mensaje de alerta".
  • Verifique si el usuario ingresó un número donde se debe ingresar el valor numérico. Por ejemplo, detalles de contacto.
  • Compruebe si el usuario ingresó un carácter alfabético en el campo de nombre.
  • Verifique el carácter numérico y alfabético. Si el campo del formulario es alfanumérico. Por ejemplo, el campo del mensaje.
  • Compruebe si el usuario ha introducido la contraseña correctamente en ambos campos. (Campo de contraseña, campo Confirmar contraseña)
  • También asegúrese de que todos los menús desplegables y las casillas de verificación estén marcados correctamente.

Tipos de validación de formularios

  • Validación del formulario del lado del cliente
  • Validación de formulario del lado del servidor

1. Validación del formulario del lado del cliente

Para evitar la tensión y el ancho de banda innecesario para la validación del lado del cliente del servidor, es útil usar Jscript. Después de validar desde el lado del cliente, debe tener otra validación desde el lado del servidor. La razón para hacer una validación más del lado del servidor es porque el usuario podría haber deshabilitado JavaScript en su navegador web.

La validación del lado del cliente consume menos tiempo para validar ya que la validación ocurre en el navegador del usuario y ayuda al usuario a tener una mejor experiencia. Mientras que en la validación del lado del servidor que ocurre en el servidor, requiere la entrada del usuario. Luego, debe enviarse al servidor antes de la validación y, finalmente, el usuario debe esperar la respuesta del servidor para saber en qué campo se produjo el error.

Ejemplo



First name
required>

Last name
required>

Username

@
aria-describedby="inputGroupPrepend21" required>


City

State

Zip



Agree to terms and conditions

Submit form

Salida :

2. Validación del formulario del lado del servidor

La validación del lado del servidor se realizó para garantizar que todos los datos hayan sido ingresados ​​por el usuario y que nada se haya dejado negro o ingresado incorrectamente. La validación del lado del servidor asegura que no haya errores en el formulario ingresado por el usuario.

Ejemplo



Form validation

function printError(elemId, hintMsg) (
document.getElementById(elemId).innerHTML = hintMsg;
)
function validateForm() (
var name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var mobile = document.contactForm.mobile.value;
var country = document.contactForm.country.value;
var gender = document.contactForm.gender.value;
var hobbies = ();
var checkboxes = document.getElementsByName("hobbies()");
for(var i=0; i < checkboxes.length; i++) (
if(checkboxes(i).checked) (
hobbies.push(checkboxes(i).value);
)
)
var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
if(name == "") (
printError("nameErr", "Please enter name");
) else (
var regex = /^(a-zA-Z\s)+$/;
if(regex.test(name) === false) (
printError("nameErr", "Enter valid name");
) else (
printError("nameErr", "");
nameErr = false;
)
)
if(email == "") (
printError("emailErr", "enter your email");
) else (
var regex = /^\ (email protected) \S+\.\S+$/;
if(regex.test(email) === false) (
printError("emailErr", "Please enter a valid email");
) else(
printError("emailErr", "");
emailErr = false;
)
)
if(mobile == "") (
printError("mobileErr", "Please enter mobile number");
) else (
var regex = /^(1-9)\d(9)$/;
if(regex.test(mobile) === false) (
printError("mobileErr", "Please enter a valid mobile number");
) else(
printError("mobileErr", "");
mobileErr = false;
)
)
if(country == "Select") (
printError("countryErr", "Please select country");
) else (
printError("countryErr", "");
countryErr = false;
)
if(gender == "") (
printError("genderErr", "Please select gender");
) else (
printError("genderErr", "");
genderErr = false;
)
if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) (
return false;
) else (
var dataPreview = "You've entered the following details: \n" +
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Country: " + country + "\n" +
"Gender: " + gender + "\n";
if(hobbies.length) (
dataPreview += "Hobbies: " + hobbies.join(", ");
)
alert(dataPreview);
)
);


Application Form
Full Name


Email Address


Mobile Number


Country
Select
Australia
India
United States
United Kingdom


Gender
Male
Female


Hobbies (Optional)
Sports
Movies
Music



Form validation

function printError(elemId, hintMsg) (
document.getElementById(elemId).innerHTML = hintMsg;
)
function validateForm() (
var name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var mobile = document.contactForm.mobile.value;
var country = document.contactForm.country.value;
var gender = document.contactForm.gender.value;
var hobbies = ();
var checkboxes = document.getElementsByName("hobbies()");
for(var i=0; i < checkboxes.length; i++) (
if(checkboxes(i).checked) (
hobbies.push(checkboxes(i).value);
)
)
var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
if(name == "") (
printError("nameErr", "Please enter name");
) else (
var regex = /^(a-zA-Z\s)+$/;
if(regex.test(name) === false) (
printError("nameErr", "Enter valid name");
) else (
printError("nameErr", "");
nameErr = false;
)
)
if(email == "") (
printError("emailErr", "enter your email");
) else (
var regex = /^\ (email protected) \S+\.\S+$/;
if(regex.test(email) === false) (
printError("emailErr", "Please enter a valid email");
) else(
printError("emailErr", "");
emailErr = false;
)
)
if(mobile == "") (
printError("mobileErr", "Please enter mobile number");
) else (
var regex = /^(1-9)\d(9)$/;
if(regex.test(mobile) === false) (
printError("mobileErr", "Please enter a valid mobile number");
) else(
printError("mobileErr", "");
mobileErr = false;
)
)
if(country == "Select") (
printError("countryErr", "Please select country");
) else (
printError("countryErr", "");
countryErr = false;
)
if(gender == "") (
printError("genderErr", "Please select gender");
) else (
printError("genderErr", "");
genderErr = false;
)
if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) (
return false;
) else (
var dataPreview = "You've entered the following details: \n" +
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Country: " + country + "\n" +
"Gender: " + gender + "\n";
if(hobbies.length) (
dataPreview += "Hobbies: " + hobbies.join(", ");
)
alert(dataPreview);
)
);


Application Form
Full Name


Email Address


Mobile Number


Country
Select
Australia
India
United States
United Kingdom


Gender
Male
Female


Hobbies (Optional)
Sports
Movies
Music





Form validation

function printError(elemId, hintMsg) (
document.getElementById(elemId).innerHTML = hintMsg;
)
function validateForm() (
var name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var mobile = document.contactForm.mobile.value;
var country = document.contactForm.country.value;
var gender = document.contactForm.gender.value;
var hobbies = ();
var checkboxes = document.getElementsByName("hobbies()");
for(var i=0; i < checkboxes.length; i++) (
if(checkboxes(i).checked) (
hobbies.push(checkboxes(i).value);
)
)
var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
if(name == "") (
printError("nameErr", "Please enter name");
) else (
var regex = /^(a-zA-Z\s)+$/;
if(regex.test(name) === false) (
printError("nameErr", "Enter valid name");
) else (
printError("nameErr", "");
nameErr = false;
)
)
if(email == "") (
printError("emailErr", "enter your email");
) else (
var regex = /^\ (email protected) \S+\.\S+$/;
if(regex.test(email) === false) (
printError("emailErr", "Please enter a valid email");
) else(
printError("emailErr", "");
emailErr = false;
)
)
if(mobile == "") (
printError("mobileErr", "Please enter mobile number");
) else (
var regex = /^(1-9)\d(9)$/;
if(regex.test(mobile) === false) (
printError("mobileErr", "Please enter a valid mobile number");
) else(
printError("mobileErr", "");
mobileErr = false;
)
)
if(country == "Select") (
printError("countryErr", "Please select country");
) else (
printError("countryErr", "");
countryErr = false;
)
if(gender == "") (
printError("genderErr", "Please select gender");
) else (
printError("genderErr", "");
genderErr = false;
)
if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) (
return false;
) else (
var dataPreview = "You've entered the following details: \n" +
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Country: " + country + "\n" +
"Gender: " + gender + "\n";
if(hobbies.length) (
dataPreview += "Hobbies: " + hobbies.join(", ");
)
alert(dataPreview);
)
);


Application Form
Full Name


Email Address


Mobile Number


Country
Select
Australia
India
United States
United Kingdom


Gender
Male
Female


Hobbies (Optional)
Sports
Movies
Music



Salida:

Conclusión - Validación de formulario JavaScript

La validación de formularios en JavaScript no requiere una codificación compleja, pero debemos pensar desde el punto de vista del usuario sobre cómo cometerían errores al completar un formulario y cómo se puede validar utilizando los diversos métodos. Debemos asegurarnos de que si el usuario ingresa la información de manera incorrecta, el mensaje de error en qué campo se ha producido el error y proporcionar instrucciones sobre el formato de entrada.

Artículos recomendados

Esta ha sido una guía para la validación de formularios JavaScript. Aquí también discutimos las cosas que deben verificarse mientras se realiza la Validación de formularios y sus tipos. También puede echar un vistazo a los siguientes artículos para obtener más información:

  1. Encapsulación en JavaScript
  2. Características de JavaScript
  3. Expresiones regulares en JavaScript
  4. Controles de validación de ASP.Net
  5. Ejemplos de casillas de verificación en Bootstrap
  6. Dos formas de validación de formularios HTML con ejemplos