Skip to content

Instantly share code, notes, and snippets.

@marcoscastro
Last active June 23, 2025 00:59
Show Gist options
  • Save marcoscastro/7887900ceebe9e223dce to your computer and use it in GitHub Desktop.
Save marcoscastro/7887900ceebe9e223dce to your computer and use it in GitHub Desktop.
HTML 5 - Validando formato de CPF
<html>
<head>
<title>Formato CPF</title>
<script src="script.js"></script>
</head>
<body>
<h3>Digite seu CPF:</h3>
<form name="cadastro">
<input type="text" name="cpf" \
pattern="\d{3}\.\d{3}\.\d{3}-\d{2}" \
title="Digite um CPF no formato: xxx.xxx.xxx-xx">
<input type="submit" value="Verificar">
</form>
</body>
</html>
@kozfelipe
Copy link

torne os pontos e traço opcionais aceitando a entrada só de números como válida também
\d{3}\.?\d{3}\.?\d{3}-?\d{2}

@jesobreira
Copy link

É possível aceitar CPF e CNPJ no mesmo campo usando pattern="(\d{3}\.?\d{3}\.?\d{3}-?\d{2})|(\d{2}\.?\d{3}\.?\d{3}/?\d{4}-?\d{2})"

@claudesenvolvedor
Copy link

Por gentileza meus nobres colegas. Estou no início de um novo aprendizado e como sou cego, as dificuldades são ainda maiores, mas vamos em busca de aprendizado. Como ficaria a linha adicionando esta opção a mais citada pelo colega que valida também sem a necessidade dos pontos e traço? Poderia escrever as linhas para meu estudo e observação?

@kozfelipe
Copy link

kozfelipe commented Oct 3, 2021

@claudesenvolvedor
<input type="text" name="cpf" pattern="(\d{3}\.?\d{3}\.?\d{3}-?\d{2})|(\d{2}\.?\d{3}\.?\d{3}/?\d{4}-?\d{2})">

@ceaugomes
Copy link

ceaugomes commented May 30, 2022

Como faço para garantir que apenas números sejam inseridos no input type="text" em um formulário HTML?

@richardsonasilva
Copy link

@EzequielAnjos
Copy link

Obrigado, muito útil

@danielbrasc
Copy link

danielbrasc commented Nov 20, 2022

@ceaugomes

Uma das formas de garantir apenas números no input type="text"

https://stackoverflow.com/a/28838789

@lblem
Copy link

lblem commented Nov 23, 2022

só colocar type="number" ao invés de text.

@MauricioSarmento
Copy link

Basta colocar o type="number_format"

@halecvinicius
Copy link

por gentileza saberiam informar se existem como deixar os caracteres ponto e traço no campo de preencimento de forma obrigatoria?

image

@pedro98777
Copy link

<title>Gerador de CPF Profissional</title> <style> body { font-family: Arial, sans-serif; background-color: #121212; color: #fff; padding: 30px; text-align: center; } button { padding: 10px 20px; font-size: 16px; margin: 10px 5px; border: none; border-radius: 5px; background-color: #1f6feb; color: white; cursor: pointer; } button:hover { background-color: #125ac3; } input { padding: 10px; font-size: 16px; width: 60px; text-align: center; border-radius: 5px; border: none; margin-left: 10px; } #resultado { margin-top: 20px; font-size: 18px; white-space: pre-line; } </style>

🧠 Gerador de CPF Inteligente

Qtd:

Com Pontuação
Sem Pontuação

<script> function gerarDigito(cpfParcial) { let soma = 0; for (let i = 0; i < cpfParcial.length; i++) { soma += parseInt(cpfParcial[i]) * ((cpfParcial.length + 1) - i); } const resto = soma % 11; return resto < 2 ? '0' : String(11 - resto); } function gerarCPF(pontuado) { let cpf = ''; for (let i = 0; i < 9; i++) { cpf += Math.floor(Math.random() * 10); } cpf += gerarDigito(cpf); cpf += gerarDigito(cpf); return pontuado ? cpf.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4") : cpf; } function gerarCPFs(pontuado) { const quantidade = parseInt(document.getElementById("quantidade").value); let saida = ""; for (let i = 0; i < quantidade; i++) { const cpf = gerarCPF(pontuado); saida += `${cpf} 📋 Copiar\n`; } document.getElementById("resultado").innerHTML = saida; } function copiarTexto(texto) { navigator.clipboard.writeText(texto).then(() => { alert(`CPF copiado: ${texto}`); }); } </script>

@pedro98777
Copy link

Por gentileza saberia informar se existem como deixar os caracteres ponto e traço no campo de pré - enchimento de forma obrigatória?

por gentileza saberia informar se existem como deixar os caracteres ponto e traço no campo de pré-encimento de forma obrigatória?

imagem

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.7/jquery.inputmask.min.js"></script> <script> $(document).ready(function(){ $('#cpf').inputmask("999.999.999-99"); }); </script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment