Como implementar validação de formulário do lado do cliente com JavaScript

Como implementar validação de formulário do lado do cliente com JavaScript

JavaScript é uma das linguagens de programação mais populares e versáteis com a qual você pode começar hoje. Esta linguagem de programação é justamente considerada a linguagem da web e é essencial para adicionar interatividade aos seus sites.





O elemento de formulário é um dos elementos HTML mais usados ​​em sites. Esses formulários recebem informações do usuário e as processam no navegador ou servidor. No entanto, é importante validar essas entradas para resolver problemas de segurança e bugs indesejados.



Compreendendo a manipulação de DOM

Antes de prosseguirmos com a implementação da validação de formulário do lado do cliente com JavaScript, é essencial entender o Document Object Model, comumente conhecido como 'DOM'. O DOM é uma API padronizada que permite ao JavaScript interagir com elementos em uma página HTML da web.





Saiba mais: O herói oculto dos sites: Compreendendo o DOM

Para adicionar ouvintes de eventos e recuperar entradas do usuário, você precisará entender os fundamentos da manipulação de DOM. Aqui está um exemplo que explica como você pode alterar o conteúdo da página da web usando a API DOM e JavaScript:









Document





const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';

No código acima, o

tag tem um id de parágrafo . Ao escrever o código JavaScript, você pode acessar este elemento chamando o document.getElementById ('paragraph') método e manipulando seu valor.

Agora que você entendeu os fundamentos da manipulação de DOM, vamos prosseguir e implementar a validação de formulário.



Validação de formulário com JavaScript

Existem vários tipos de entradas que você pode obter de um usuário. Tipo de texto, tipo de e-mail, tipo de senha, botões de opção e caixas de seleção são alguns dos mais comuns que você pode encontrar. Devido a essa grande maioria de tipos de entrada, você precisará usar lógicas diferentes para validar cada um deles.

Antes de nos aprofundarmos na validação, vamos parar um momento para entender os formulários HTML e sua importância. Os formulários HTML são uma das principais maneiras de interagir com o site, pois permitem inserir seus dados, aplicar alterações, invocar pop-ups, enviar informações a um servidor e muito mais.



como sair do netflix na tv roku

O HTML elemento é usado para criar esses formulários voltados para o usuário. Veja como você pode validar as entradas de um formulário HTML:

1. Validação de Email

Esteja você construindo um sistema de autenticação ou apenas coletando e-mails de usuários para seu boletim informativo, é importante validar o e-mail antes de armazená-lo em seu banco de dados ou processá-lo. Para verificar se um e-mail atende a todas as condições exigidas, você pode usar um expressão regular .

HTML:

JavaScript:

const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}

2. Validação de senha

As senhas são um dado crucial que precisa de um tipo especial de validação para garantir sua segurança. Considere um formulário de inscrição com dois campos: campos de senha e de confirmação de senha. Para validar esse par de entradas, aqui estão algumas coisas que você precisa considerar:

  • A senha deve ter mais de 6 caracteres.
  • O valor da senha e o campo de confirmação da senha devem ser iguais.

HTML:


JavaScript:

const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}

3. Validação de entrada de rádio

A entrada de rádio HTML é um tipo especial de elemento de controle gráfico que permite ao usuário escolher apenas um de um conjunto predefinido de opções mutuamente exclusivas. Um caso de uso comum de tal entrada seria para selecionar o gênero. Para validar essa entrada, você precisará verificar se pelo menos um deles está selecionado.

Isso pode ser alcançado usando o Operadores lógicos como o AND ( && ) e não ( ! ) operador desta maneira:

HTML:

Male

Female

Others

JavaScript:

const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!');

4. Selecione Validação de entrada

o O elemento HTML é usado para criar uma lista suspensa. o tags dentro do elemento define as opções disponíveis na lista suspensa. Cada um desses tags têm um atributo de valor associado a eles.

ponto intermediário entre dois endereços

Para a opção padrão ou inicial, você pode definir seu valor como uma string vazia para que seja considerada uma opção inválida. Para todas as outras opções, defina um atributo de valor apropriado. Aqui está um exemplo de como você pode validar um elemento de entrada:

HTML:


Select One
Mr
Mrs
Ms

JavaScript:

memória virtual windows 10 16 gb ram
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. Validação da caixa de seleção

Os elementos de entrada da caixa de seleção de tipo são renderizados por padrão como caixas que são marcadas ou marcadas quando ativadas. Uma caixa de seleção permite selecionar valores únicos para envio em um formulário. As caixas de seleção são uma escolha comum para a entrada de 'aceitar os termos e condições'.

Para descobrir se uma caixa de seleção está marcada ou não, você pode acessar o atributo marcado na entrada da caixa de seleção. Aqui está um exemplo:

HTML:


I agree to the terms and conditions

JavaScript:

const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}

Prevenção é melhor que a cura

É sempre recomendável validar todas as entradas que você recebe de um visitante para fornecer uma experiência segura e protegida. Os hackers estão sempre tentando inserir dados maliciosos nos campos de entrada para realizar ataques de script entre sites e injeções de SQL.

Agora que você sabe como validar suas entradas de HTML, por que não tentar construir um formulário e implementar as estratégias que você viu acima?

Compartilhado Compartilhado Tweet O email Como criar um formulário em HTML

Permita que seus usuários insiram dados em seus sites com formulários HTML.

Leia a seguir Tópicos relacionados
  • Programação
  • HTML
  • JavaScript
  • Desenvolvimento web
  • Tutoriais de codificação
Sobre o autor Nitin Ranganath(31 artigos publicados)

Nitin é um desenvolvedor de software ávido e um estudante de engenharia da computação desenvolvendo aplicativos da web usando tecnologias JavaScript. Ele trabalha como desenvolvedor web freelance e gosta de escrever para Linux e programação em seu tempo livre.

Mais de Nitin Ranganath

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever