 |
|
Você está aqui: JavaScript ::: Dicas & Truques ::: Validação de Formulários |
Validação de formulários em JavaScript - Como validar CPF (com pontos e hífen) usando expressões regularesQuantidade de visualizações: 44043 vezes |
|
Nesta dica mostrarei como podemos escrever uma função JavaScript para a validação de números de CPF, dessa vez usando pontos e o hífen. Isso é interessante porque, muitas vezes, o usuário copia seu CPF de outro lugar e cola nas caixas de texto de nossas aplicações. A pagina HTML que contém o formulário se parece com a imagem abaixo:  E agora veja o código JavaScript completo para o exemplo, incluindo o código HTML para a página: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Estudando JavaScript</title>
<style type="text/css">
input {margin-bottom: 3px; margin-top: 3px}
</style>
<script type="text/javascript">
function validarCPF(){
var cpf = document.cadastro.cpf.value;
var filtro = /^\d{3}.\d{3}.\d{3}-\d{2}$/i;
if(!filtro.test(cpf)){
window.alert("CPF inválido. Tente novamente.");
return false;
}
cpf = remove(cpf, ".");
cpf = remove(cpf, "-");
if(cpf.length != 11 || cpf == "00000000000" ||
cpf == "11111111111" ||
cpf == "22222222222" || cpf == "33333333333" ||
cpf == "44444444444" ||
cpf == "55555555555" || cpf == "66666666666" ||
cpf == "77777777777" ||
cpf == "88888888888" || cpf == "99999999999"){
window.alert("CPF inválido. Tente novamente.");
return false;
}
soma = 0;
for(i = 0; i < 9; i++){
soma += parseInt(cpf.charAt(i)) * (10 - i);
}
resto = 11 - (soma % 11);
if(resto == 10 || resto == 11){
resto = 0;
}
if(resto != parseInt(cpf.charAt(9))){
window.alert("CPF inválido. Tente novamente.");
return false;
}
soma = 0;
for(i = 0; i < 10; i ++){
soma += parseInt(cpf.charAt(i)) * (11 - i);
}
resto = 11 - (soma % 11);
if(resto == 10 || resto == 11){
resto = 0;
}
if(resto != parseInt(cpf.charAt(10))){
window.alert("CPF inválido. Tente novamente.");
return false;
}
window.alert("CPF válido. Muito obrigado.");
return true;
}
function remove(str, sub) {
i = str.indexOf(sub);
r = "";
if (i == -1) return str;
r += str.substring(0,i) + remove(str.substring(i + sub.length), sub);
return r;
}
</script>
</head>
<body>
<form name="cadastro" onSubmit="return validarCPF()">
Informe seu CPF (use os pontos e o hífen):<br>
<input type="text" maxlength="14" name="cpf">
<input type="submit" value="Enviar!">
</form>
</body>
</html>
|
 Link para compartilhar na Internet ou com seus amigos: |
JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
Como substituir uma substring em uma string JavaScript usando a função replace()Quantidade de visualizações: 441 vezes |
|
Nesta dica mostrarei como podemos substituir parte de uma palavra, frase ou texto em JavaScript usando a função replace() do objeto String. Esta função recebe a substring a ser substituida e a substring que ocupará o seu lugar e retorna uma nova string. Veja a página HTML para o nosso primeiro exemplo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Strings em JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos criar uma frase
var frase = "Gosto de Java, Java e mais Java";
document.write("A frase é: " + frase + "<br>");
// e agora vamos substituir a substring na string
var resultado = frase.replace("Java", "Python");
// e mostramos o resultado
document.write("Depois da substituição: " +
resultado);
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: A frase é: Gosto de Java, Java e mais Java Depois da substituição: Gosto de Python, Java e mais Java Note que apenas a primeira ocorrência da substring "Java" foi substituída por "Python". Para que todas as ocorrências sejam substituídas, temos que usar o sinalizador global. Veja: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<script type="text/javascript">
// vamos criar uma frase
var frase = "Gosto de Java, Java e mais Java";
document.write("A frase é: " + frase + "<br>");
// e agora vamos substituir a substring na string
var resultado = frase.replace(/Java/g, "Python");
// e mostramos o resultado
document.write("Depois da substituição: " +
resultado);
</script>
Agora o resultado será: A frase é: Gosto de Java, Java e mais Java Depois da substituição: Gosto de Python, Python e mais Python |
JavaScript ::: DOM (Document Object Model) ::: document Object |
Como usar o método getElementById() do objeto document para localizar um elemento HTML baseado em seu id usando JavaScriptQuantidade de visualizações: 12681 vezes |
O método getElementById() do objeto document é usado quando queremos localizar e retornar um elemento HTML baseado no valor de sua propriedade id. Veja um exemplo:----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Estudos JavaScript</title>
<script type="text/javascript">
function localizarElemento(){
// vamos localizar o elemento com o id "aviso"
var elem = document.getElementById("aviso");
// o elemento foi localizado
if(elem != null){
// vamos definir o conteúdo do elemento encontrado
elem.innerHTML = "Vejam este texto.";
}
else{
window.alert("O elemento HTML pesquisado não foi encontrado.");
}
}
</script>
</head>
<body>
<button onclick="localizarElemento()">Localizar DIV</button>
<div id="aviso"></div>
</body>
</html>
Execute o exemplo e clique no botão. Você verá que o texto do elemento div com o id "aviso" é definido para "Vejam este texto.". Note que, se o elemento não for encontrado, o retorno do método getElementById() é null na maioria dos browsers. Há algumas observações interessantes em relação ao método getElementById() do objeto document: a) Se o valor da propriedade id pertencer a uma coleção, ou seja, se houver mais de um elemento HTML com o mesmo id, o método retornará o primeiro elemento na coleção. b) No Firefox, Opera, Google Chrome, Safari e Internet Explorer (IE) a partir da versão 8, o método getElementById() é case-sensitive (sensível a maiúsculas e minúsculas) em relação ao valor da propriedade id. Nas versões anteriores do IE isso não acontecia. |
JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes) |
Como chamar uma função de callback para os elementos individuais de um array usando a função forEach() - Vetores e matrizes em JavaScriptQuantidade de visualizações: 1796 vezes |
|
O método forEach(), adicionado à linguagem JavaScript por meio do ECMAScript 5 (JavaScript 5, ECMAScript 2009, ES5) é usado quando queremos acessar os elementos de um vetor individualmente e chamar, para cada um deles, uma função de callback personalizada. Veja no trecho de código abaixo como usar a função forEach() para obter a soma de todos os elementos maiores ou iguais a 20: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<script type="text/javascript">
function obterSoma(valor, indice, vetor){
if(valor >= 20){
soma = soma + valor;
}
}
var valores = new Array(21, 5, 30, 7, 12, 3);
// vamos obter a soma dos valores maiores ou iguais a 20
var soma = 0;
// percorremos os elementos do vetor individualmente
valores.forEach(obterSoma);
window.alert("A soma é: " + soma);
</script>
Uma função passada para o método forEach() pode conter os seguintes argumentos (nessa mesma ordem): a) O valor do item; b) O índice do item (opcional); c) O vetor a partir do qual o método forEach() está sendo chamado (opcional). Veja mais um código no qual obtemos a soma dos elementos cujos valores sejam maiores que seu antecessor (com exceção do primeiro elemento): ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<script type="text/javascript">
function obterSoma(valor, indice, vetor){
if(indice == 0){
soma = soma + valor;
}
else{
if(valor > vetor[indice - 1]){
soma = soma + valor;
}
}
}
var valores = new Array(8, 5, 30, 7, 12, 3);
// vamos dos elementos cujos valores sejam
// maiores que seu antecessor (com exceção do
// primeiro elemento)
var soma = 0;
// percorremos os elementos do vetor individualmente
valores.forEach(obterSoma);
window.alert("A soma é: " + soma);
</script>
O resultado será 50, pois obtemos a soma dos valores 8, 30 e 12. |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| O projeto de instalação hidrossanitária As fossas sépticas consistem em alternativas para o tratamento primário, em soluções individuais de esgotamento sanitário. A ABNT NBR 7229:1993 (Projeto, construção e operação de sistemas de tanques sépticos) define alguns cuidados necessários em relação ao tamanho e ao dimensionamento necessário. Considere as seguintes sentenças: I - O tanque séptico consiste em uma unidade cilíndrica ou prismática retangular de fluxo horizontal para tratamento de esgotos por processos de sedimentação, flotação e digestão, o qual deve respeitar uma distância mínima de 1,50m de construções. II - O sumidouro é definido como um poço seco escavado no chão, sendo impermeabilizado. III - O lodo e a escuma removidos dos tanques sépticos podem ser lançados em corpos de água ou galerias de águas pluviais, desde que atendam aos limites de lançamento definidos em lei. Assinale a alternativa correta: A) Apenas a sentença II está correta. B) As sentenças I e II estão corretas. C) Apenas a sentença I está correta. D) Apenas a sentença III está correta. E) Apenas as sentenças II e III estão corretas. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| Ética Empresarial e Profissional: Noções Gerais O termo "moral" vem do latim mores, que quer dizer costumes. Portanto, moral é um conjunto de hábitos e costumes praticados por um grupo. Tais hábitos e costumes são aceitos e incorporados por serem considerados bons. Sobre isso, assinale a alternativa correta. A) Os hábitos, por serem bons, são considerados justos. B) Os hábitos, mesmo sendo maus, podem ser considerados justos. C) Independentemente de serem bons ou maus, os hábitos não alteram as condições de realização das pessoas. D) Considerando que os hábitos bons e justos se tornam imprescindíveis para os indivíduos, eles são convencionados em forma de acordos. E) Considerando que os hábitos bons e justos se tornam dispensáveis para os indivíduos, eles são convencionados em forma de lei. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Python |
| Qual das formas abaixo é usada para criar uma LIST em Python? A) valores = {5, 1, 9, 4} B) valores = [5, 1, 9, 4] C) valores = (5, 1, 9, 4) D) valores = [5.. 1.. 9.. 4] E) valores = list[5, 1, 9, 4] Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica |
| Transporte de fluidos por bombas O objetivo no transporte de fluidos por bombas é transferir energia ao fluido, compensar as perdas por atrito e aumentar a vazão no transporte com diferença de altura ou de pressão. Suponha que escoe petróleo cru por uma tubulação horizontal com auxílio de uma bomba com eficiência de 85%. Qual potência deve ser fornecida na entrada da estação de bombeamento para vazão de 2,94m3/s? Considere que a queda de pressão estimada ao longo do escoamento é de 7,92MPa. A) 23,30MW. B) 27,41MW. C) 19,80MW. D) 85,00MW. E) 7,96MW. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| Princípios específicos do Direito do Consumidor A Política Nacional das Relações de Consumo tem por objetivo o atendimento das necessidades dos consumidores, o respeito à sua dignidade, saúde e segurança, a proteção de seus interesses econômicos, a melhoria da sua qualidade de vida, bem como a transparência e harmonia das relações de consumo, atendido, dentre outros, o princípio da ação governamental, que se manifesta: A) Pela garantia dos produtos e serviços com padrões adequados de qualidade, segurança, durabilidade e desempenho. B) Pela presença do Estado no mercado estrangeiro. C) Pelo monopólio estrangeiro no mercado nacional. D) Pelo incentivos à criação e desenvolvimento de associações lucrativas. E) Pela iniciativa indireta. Verificar Resposta Estudar Cards Todas as Questões |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
|
1º lugar: Java |
