Diferença entre validação e máscara – javascript html terminologia

Pergunta:


Estou fazendo validações de formulário. Quanto a validação, tudo ocorre bem, mas como formatar os campos de acordo com o dado digitado?

Exemplo: num campo de data, as barras são adicionadas automaticamente, num campo de telefone, os parenteses e os traços são adicionados automaticamente. Essa adições são as chamadas “máscaras”?

Autor da pergunta Kirk

Comunidade

Máscara

Máscara não deixa de ser uma forma limitada de validação. O seu uso exige que os dados entradas estejam em determinado formato.

Através de um padrão você obriga que cada posição digitada tenha um determinado caractere, por exemplo, que sempre seja um dígito numérico, que seja sempre um ponto, uma barra, que seja uma letrá maiúscula, que seja uma faixa numérica (caso típico quando está mascarando uma data e não pode aceitar dia 32, mês 13, ou mesmo dia 30 em mês 02, etc.).

Algumas máscaras podem ser bastante sofisticadas de variáveis conforme os dados vão sendo entrados.

Dependendo de como usar alguns dados como pontos, vírgulas e barras podem ser considerados parte do dado digitado ou apenas uma forma de apresentação. Ela pode até mesmo buscar por informações auxiliares que ajudem na formatação obrigatória. Mas não pode ir além do formato dos dados.

Máscaras podem ser usadas apenas para apresentação (saída de dados, formatação). Neste caso é claro que ela não validará nada.

Muitas vezes a máscara é auxiliada por um placeholder, mas ele sozinho não é a máscara já que ele não impede que algo errado naquela posição seja digitada errada.

Apesar de eu evitar muita gente usa uma biblioteca para ajudar montar máscaras, como jQuery.

Validação

A validação “pura” sempre pode verificar outras coisas, em geral regras mais complexas, e ela normalmente indica se o dado é válido ou não em uma forma booleana.

Ela pode verificar o formato entrado também, mas isso costuma diminuir a experiência do usuário, a não ser que vá fazendo a cada caractere digitado. Mas nem sempre é possível, a validação muitas vezes precisa olhar o todo e não apenas aquele caractere.

Em alguns casos o que é tarefa de um ou de outro pode se confundir, ou até mesmo conflitar se não for bem feito.

Se a sua função altera controla a forma de um dado, modela sua forma ou impõe determinado formato ao seu dado, isso é considerado uma máscara.

Ex: CPF – (000.000.000-00) / Data – dd/mm/aaaa

Se a sua função faz uma checagem se o seu dado está de acordo com um resultado esperado, isso é considerado uma validação.

function verificaNum(valor) {
     if(isNaN(valor)) { // se não for um número
         console.log('não é um número! Valor inválido');
     } 
     else { // se for um número
         console.log('é um número! Valor válido);
     }
}

Nota: isNaN retorna um boolean se o valor é ou não um number.

Ex:

 isNaN(123) //false
 isNaN('Hello') //true

Mas também pode haver o caso de você querer unificar as duas dentro da mesma função. Ai vai depender da sua finalidade….

As máscaras mais do que formatar um elemento de entrada de dados também valida o tipo de entrada. Talvez seja interessante que um campo numérico não aceite caracteres, por exemplo.

Validação refere-se se o tipo de dado corresponde ao esperado, além do tipo mas também na semântica. Em um campo numérico, o valor não pode ser superior a x, por exemplo.

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *