Resumo : neste tutorial, você aprenderá sobre a validação de formulário JavaScript criando um formulário de inscrição do zero.
O que é validação de formulário
Antes de enviar dados ao servidor , você deve verificar os dados no navegador da web para garantir que os dados enviados estão no formato correto.
Para fornecer feedback rápido, você pode usar JavaScript para validar os dados. Isso é chamado de validação do lado do cliente.
Se você não realizar a validação do lado do cliente, isso poderá causar uma experiência ruim ao usuário. Nesse caso, você pode sentir um atraso perceptível porque leva tempo para que os dados do formulário sejam transferidos entre os navegadores da web e o servidor.
Ao contrário da validação do lado do cliente executada no navegador da web, a validação do lado do servidor é executada no servidor. É fundamental sempre implementar a validação do lado do servidor.
A razão é que a validação do lado do cliente é bastante fácil de ignorar. Usuários maliciosos podem desativar o JavaScript e enviar dados incorretos ao seu servidor.
Neste tutorial, você se concentrará apenas na validação do lado do cliente.
Opções de validação do lado do cliente
Quando se trata de validação do lado do cliente, você terá duas opções:
- Validação JavaScript: você desenvolve a lógica de validação usando JavaScript. Ou você pode usar uma biblioteca para fazer isso.
- Validação de formulário integrada: você pode usar os recursos de validação de formulário HTML5. Esta validação tem um desempenho melhor que a validação JavaScript. No entanto, não é tão personalizável quanto a validação JavaScript.
Validação de JavaScript
Você criará um formulário de inscrição simples com quatro campos de entrada: nome de usuário, e-mail, senha e confirmação de senha.
Ao clicar em cadastrar sem preencher nada ou preencher formato de dados incorreto, o formulário mostrará mensagens de erro:
Você validará o seguinte:
- O nome de usuário não pode ficar em branco e ter pelo menos 3 caracteres e não pode ter mais de 25 caracteres.
- O e-mail é obrigatório e válido.
- A senha tem oito caracteres ou mais. E deve conter 1 caractere minúsculo, 1 caractere maiúsculo, 1 número e pelo menos um caractere especial neste conjunto (
!@#$%^&*). - A senha de confirmação deve ser igual à senha.
Crie a estrutura do projeto
Primeiro, crie a form-validationpasta que armazena todos os arquivos de código-fonte do projeto.
Segundo, crie as pastas jse cssdentro da form-validationpasta.
Terceiro, crie na style.csspasta css, app.jsna jspasta e index.htmldiretamente na form-validationpasta.
A estrutura final do projeto ficará assim:
Construa o formulário HTML
Primeiro, abra o index.htmlarquivo e digite o seguinte código:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Form Validation Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="js/app.js"></script>
</body>
</html>Linguagem de código: HTML, XML ( xml )Neste arquivo HTML, colocamos o style.cssarquivo na headseção e app.jso arquivo na seção body antes da </body>tag de fechamento.
Segundo, adicione a seguinte marcação HTML para criar o formulário de inscrição. O arquivo index.html final terá a seguinte aparência:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Form Validation Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<form id="signup" class="form">
<h1>Sign Up</h1>
<div class="form-field">
<label for="username">Username:</label>
<input type="text" name="username" id="username" autocomplete="off">
<small></small>
</div>
<div class="form-field">
<label for="email">Email:</label>
<input type="text" name="email" id="email" autocomplete="off">
<small></small>
</div>
<div class="form-field">
<label for="password">Password:</label>
<input type="password" name="password" id="password" autocomplete="off">
<small></small>
</div>
<div class="form-field">
<label for="confirm-password">Confirm Password:</label>
<input type="password" name="confirm-password" id="confirm-password" autocomplete="off">
<small></small>
</div>
<div class="form-field">
<input type="submit" value="Sign Up">
</div>
</form>
</div>
<script src="js/app.js"></script>
</body>
</html>Linguagem de código: HTML, XML ( xml )O que é notável sobre o formulário de inscrição é que cada campo é agrupado em um divcom a classe form-field.
Cada campo de formulário possui três elementos:
- Um rótulo
- Um campo de entrada
- Um
<small>elemento
Você usará a <small>tag para mostrar a mensagem de erro aos usuários.
Se um campo de entrada não for válido, tornaremos sua borda vermelha adicionando a errorclasse ao form-fieldelemento. Será assim:
<div class="form-field error">
<label for="username">Username:</label>
<input type="text" name="username" id="username" autocomplete="off">
<small></small>
</div>Linguagem de código: JavaScript ( javascript )Se o valor de um campo de entrada for válido, tornaremos sua borda verde adicionando a successclasse ao form-fieldelemento da seguinte maneira:
<div class="form-field success">
<label for="username">Username:</label>
<input type="text" name="username" id="username" autocomplete="off">
<small></small>
</div>Linguagem de código: JavaScript ( javascript )Confira style.css para detalhes das classes .errore .success.
Selecione os campos do formulário e adicione o ouvinte de evento de envio
No app.jsarquivo, você primeiro usará o document.querySelector()método para selecionar os campos de entrada e o formulário:
const usernameEl = document.querySelector('#username');
const emailEl = document.querySelector('#email');
const passwordEl = document.querySelector('#password');
const confirmPasswordEl = document.querySelector('#confirm-password');
const form = document.querySelector('#signup');Linguagem de código: JavaScript ( javascript )E então você anexa o submitouvinte de evento ao formulário usando o método addEventListener() :
form.addEventListener('submit', function (e) {
// prevent the form from submitting
e.preventDefault();
});Linguagem de código: JavaScript ( javascript )No ouvinte de evento, você precisa chamar o e.preventDefault()para evitar que o formulário seja enviado depois que o botão enviar for clicado.
Desenvolva funções utilitárias
Antes de validar o formulário, você pode desenvolver algumas funções utilitárias reutilizáveis para verificar se:
- Um campo é obrigatório.
- O comprimento de um campo está entre mínimo e máximo.
- O e-mail está em um formato válido.
- A senha é forte.
A isRequired()função a seguir retorna verdadeiro se o argumento de entrada estiver vazio:
const isRequired = value => value === '' ? false : true;Linguagem de código: JavaScript ( javascript )A isBetween()função a seguir retorna falso se o lengthargumento não estiver entre o argumento mine :max
const isBetween = (length, min, max) => length < min || length > max ? false : true;Linguagem de código: JavaScript ( javascript )Para verificar se o e-mail é válido, você usará uma expressão regular :
const isEmailValid = (email) => {
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
};Linguagem de código: JavaScript ( javascript )Para verificar se uma senha é forte e corresponde a um padrão especificado, você também usará uma expressão regular:
const isPasswordSecure = (password) => {
const re = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
return re.test(password);
};Linguagem de código: JavaScript ( javascript )A tabela a seguir ilustra o significado de cada parte da expressão regular usada para validar a senha:
| Senha RegEx | Significado |
|---|---|
| ^ | A senha começa |
| (?=.*[az]) | A senha deve conter pelo menos um caractere minúsculo |
| (?=.*[AZ]) | A senha deve conter pelo menos um caracter maiúsculo |
| (?=.*[0-9]) | A senha deve conter pelo menos um número |
| (?=.*[!@#$%^&*]) | A senha deve conter pelo menos um caractere especial. |
| (?=.{8,}) | A senha deve ter oito caracteres ou mais |
Desenvolva funções que mostrem o erro/sucesso
A showError()função a seguir destaca a borda do campo de entrada e exibe uma mensagem de erro se o campo de entrada for inválido:
const showError = (input, message) => {
// get the form-field element
const formField = input.parentElement;
// add the error class
formField.classList.remove('success');
formField.classList.add('error');
// show the error message
const error = formField.querySelector('small');
error.textContent = message;
};Linguagem de código: JavaScript ( javascript )Como funciona.
Primeiro, obtenha o elemento pai do campo de entrada, que é o <div>elemento que contém a form-fieldclasse:
const formField = input.parentElement;Linguagem de código: JavaScript ( javascript )Segundo, remova a successclasse e adicione-a errorao form-fieldelemento:
formField.classList.remove('success');
formField.classList.add('error');Linguagem de código: JavaScript ( javascript )Terceiro, selecione o <small>elemento dentro do form-fieldelemento:
const error = formField.querySelector('small');Linguagem de código: JavaScript ( javascript )Observe que você usa o formField.querySelector()em vez do document.querySelector().
Por fim, defina a mensagem de erro como sua textContentpropriedade do <small>elemento:
error.textContent = message;A função que mostra o indicador de sucesso é semelhante à showError()função:
const showSuccess = (input) => {
// get the form-field element
const formField = input.parentElement;
// remove the error class
formField.classList.remove('error');
formField.classList.add('success');
// hide the error message
const error = formField.querySelector('small');
error.textContent = '';
}Linguagem de código: JavaScript ( javascript )Ao contrário da showError()função, a showSuccess()função remove a errorclasse, adiciona a successclasse e deixa a mensagem de erro em branco.
Agora, você pode usar a função utilitária acima para verificar cada campo.
Desenvolva funções de validação de campo de entrada
Você desenvolverá quatro funções para validar valores dos campos do formulário:
1) Valide o campo de nome de usuário
A seguinte checkUsername()função usa:
- A
isRequired()função para verificar se o nome de usuário foi fornecido. - A
isBetween()função para verificar se o comprimento do nome de usuário está entre 3 e 25 caracteres. - As funções
showError()eshowSuccess()para mostrar o indicador de erro e sucesso.
A função retorna truese o campo passar nas verificações.
const checkUsername = () => {
let valid = false;
const min = 3,
max = 25;
const username = usernameEl.value.trim();
if (!isRequired(username)) {
showError(usernameEl, 'Username cannot be blank.');
} else if (!isBetween(username.length, min, max)) {
showError(usernameEl, `Username must be between ${min} and ${max} characters.`)
} else {
showSuccess(usernameEl);
valid = true;
}
return valid;
}Linguagem de código: JavaScript ( javascript )2) Valide o campo de e-mail
A checkEmail()função retorna truese o e-mail for fornecido e válido.
Ele usa as funções isRequired()e isEmailValid()para verificação. E usa as funções showError()e showSuccess()para fornecer feedback em caso de erro e sucesso.
const checkEmail = () => {
let valid = false;
const email = emailEl.value.trim();
if (!isRequired(email)) {
showError(emailEl, 'Email cannot be blank.');
} else if (!isEmailValid(email)) {
showError(emailEl, 'Email is not valid.')
} else {
showSuccess(emailEl);
valid = true;
}
return valid;
}Linguagem de código: JavaScript ( javascript )3) Valide o campo de senha
A checkPassword()função a seguir verifica o campo de senha se ele for fornecido e corresponder ao formato exigido:
const checkPassword = () => {
let valid = false;
const password = passwordEl.value.trim();
if (!isRequired(password)) {
showError(passwordEl, 'Password cannot be blank.');
} else if (!isPasswordSecure(password)) {
showError(passwordEl, 'Password must has at least 8 characters that include at least 1 lowercase character, 1 uppercase characters, 1 number, and 1 special character in (!@#$%^&*)');
} else {
showSuccess(passwordEl);
valid = true;
}
return valid;
};Linguagem de código: JavaScript ( javascript )4) Valide o campo de confirmação de senha
A checkConfirmPassword()função verifica se a senha de confirmação é igual à senha.
const checkConfirmPassword = () => {
let valid = false;
// check confirm password
const confirmPassword = confirmPasswordEl.value.trim();
const password = passwordEl.value.trim();
if (!isRequired(confirmPassword)) {
showError(confirmPasswordEl, 'Please enter the password again');
} else if (password !== confirmPassword) {
showError(confirmPasswordEl, 'Confirm password does not match');
} else {
showSuccess(confirmPasswordEl);
valid = true;
}
return valid;
};Linguagem de código: JavaScript ( javascript )Modificando o manipulador de eventos de envio
Agora, você pode usar as funções que validam os campos de entrada no manipulador de eventos submit:
form.addEventListener('submit', function (e) {
// prevent the form from submitting
e.preventDefault();
// validate forms
let isUsernameValid = checkUsername(),
isEmailValid = checkEmail(),
isPasswordValid = checkPassword(),
isConfirmPasswordValid = checkConfirmPassword();
let isFormValid = isUsernameValid &&
isEmailValid &&
isPasswordValid &&
isConfirmPasswordValid;
// submit to the server if the form is valid
if (isFormValid) {
}
});Linguagem de código: JavaScript ( javascript )Como funciona:
- Primeiro, chame cada função individual para validar os campos de nome de usuário, e-mail, senha e confirmação de senha.
- Segundo, use o
&&operador para determinar se o formulário é válido. O formulário será válido somente se todos os campos forem válidos. - Por fim, envie os dados ao servidor se o formulário for válido especificou o
isFormValidsinalizador. Observe que o envio de dados de formulário ao servidor não é abordado neste tutorial.
Agora você pode abrir o index.htmlarquivo, inserir alguns valores e clicar no botão enviar para testá-lo.
Adicionar recurso de feedback instantâneo
O formulário só mostra o erro ou sucesso quando você clica no botão Cadastre-se .
Para fornecer feedback instantâneo, você pode anexar um ouvinte de evento ao inputevento de cada campo e validá-lo.
É ainda melhor usar a delegação de evento para anexar o inputouvinte de evento ao formulário e validar cada campo com base no ID do campo atual, assim:
form.addEventListener('input', function (e) {
switch (e.target.id) {
case 'username':
checkUsername();
break;
case 'email':
checkEmail();
break;
case 'password':
checkPassword();
break;
case 'confirm-password':
checkConfirmPassword();
break;
}
});Linguagem de código: JavaScript ( javascript )Se você abrir index.htmle inserir alguns dados, verá que o formulário mostra o feedback de erro ou sucesso instantaneamente.
Além disso, você melhora o desempenho do formulário usando a técnica de debouncing.
Tecnicamente, você esperará que os usuários pausem a digitação por um pequeno período de tempo ou parem de digitar antes de validar a entrada.
Para detalhes da técnica de debouncing, confira neste tutorial.
O seguinte ilustra a debounce()função:
const debounce = (fn, delay = 500) => {
let timeoutId;
return (...args) => {
// cancel the previous timer
if (timeoutId) {
clearTimeout(timeoutId);
}
// setup a new timer
timeoutId = setTimeout(() => {
fn.apply(null, args)
}, delay);
};
};Linguagem de código: JavaScript ( javascript )Agora, você pode passar o inputmanipulador de eventos para a debounce()função para debounce:
form.addEventListener('input', debounce(function (e) {
switch (e.target.id) {
case 'username':
checkUsername();
break;
case 'email':
checkEmail();
break;
case 'password':
checkPassword();
break;
case 'confirm-password':
checkConfirmPassword();
break;
}
}));Linguagem de código: JavaScript ( javascript )Se você inserir dados em um campo de formulário para acionar o inputevento, verá que a mensagem de erro ou sucesso terá um pouco de atraso.
A seguir mostra o app.jsarquivo completo:
const usernameEl = document.querySelector('#username');
const emailEl = document.querySelector('#email');
const passwordEl = document.querySelector('#password');
const confirmPasswordEl = document.querySelector('#confirm-password');
const form = document.querySelector('#signup');
const checkUsername = () => {
let valid = false;
const min = 3,
max = 25;
const username = usernameEl.value.trim();
if (!isRequired(username)) {
showError(usernameEl, 'Username cannot be blank.');
} else if (!isBetween(username.length, min, max)) {
showError(usernameEl, `Username must be between ${min} and ${max} characters.`)
} else {
showSuccess(usernameEl);
valid = true;
}
return valid;
};
const checkEmail = () => {
let valid = false;
const email = emailEl.value.trim();
if (!isRequired(email)) {
showError(emailEl, 'Email cannot be blank.');
} else if (!isEmailValid(email)) {
showError(emailEl, 'Email is not valid.')
} else {
showSuccess(emailEl);
valid = true;
}
return valid;
};
const checkPassword = () => {
let valid = false;
const password = passwordEl.value.trim();
if (!isRequired(password)) {
showError(passwordEl, 'Password cannot be blank.');
} else if (!isPasswordSecure(password)) {
showError(passwordEl, 'Password must has at least 8 characters that include at least 1 lowercase character, 1 uppercase characters, 1 number, and 1 special character in (!@#$%^&*)');
} else {
showSuccess(passwordEl);
valid = true;
}
return valid;
};
const checkConfirmPassword = () => {
let valid = false;
// check confirm password
const confirmPassword = confirmPasswordEl.value.trim();
const password = passwordEl.value.trim();
if (!isRequired(confirmPassword)) {
showError(confirmPasswordEl, 'Please enter the password again');
} else if (password !== confirmPassword) {
showError(confirmPasswordEl, 'The password does not match');
} else {
showSuccess(confirmPasswordEl);
valid = true;
}
return valid;
};
const isEmailValid = (email) => {
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
};
const isPasswordSecure = (password) => {
const re = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
return re.test(password);
};
const isRequired = value => value === '' ? false : true;
const isBetween = (length, min, max) => length < min || length > max ? false : true;
const showError = (input, message) => {
// get the form-field element
const formField = input.parentElement;
// add the error class
formField.classList.remove('success');
formField.classList.add('error');
// show the error message
const error = formField.querySelector('small');
error.textContent = message;
};
const showSuccess = (input) => {
// get the form-field element
const formField = input.parentElement;
// remove the error class
formField.classList.remove('error');
formField.classList.add('success');
// hide the error message
const error = formField.querySelector('small');
error.textContent = '';
}
form.addEventListener('submit', function (e) {
// prevent the form from submitting
e.preventDefault();
// validate fields
let isUsernameValid = checkUsername(),
isEmailValid = checkEmail(),
isPasswordValid = checkPassword(),
isConfirmPasswordValid = checkConfirmPassword();
let isFormValid = isUsernameValid &&
isEmailValid &&
isPasswordValid &&
isConfirmPasswordValid;
// submit to the server if the form is valid
if (isFormValid) {
}
});
const debounce = (fn, delay = 500) => {
let timeoutId;
return (...args) => {
// cancel the previous timer
if (timeoutId) {
clearTimeout(timeoutId);
}
// setup a new timer
timeoutId = setTimeout(() => {
fn.apply(null, args)
}, delay);
};
};
form.addEventListener('input', debounce(function (e) {
switch (e.target.id) {
case 'username':
checkUsername();
break;
case 'email':
checkEmail();
break;
case 'password':
checkPassword();
break;
case 'confirm-password':
checkConfirmPassword();
break;
}
}));Linguagem de código: JavaScript ( javascript )Resumo
- O que é validação do lado do cliente e a diferença entre validação do lado do cliente e validação do lado do servidor.
- Como redigir um formulário e combinar JavaScript e CSS para validar campos de entrada.
- Como usar expressões regulares para verificar se os valores dos campos estão no formato correto.
- Como usar a técnica de delegação de eventos .
- Como usar a técnica debouncing para melhorar o desempenho na validação de formulários.
