Validação de Número de Telefone Celular

A validação de números de telefone é uma tarefa comum em formulários web para garantir que os usuários insiram dados no formato correto. Abaixo, um exemplo de como validar um número de celular usando expressões regulares.

function verificarTelefone(idCampo) {
    const campoTelefone = document.getElementById(idCampo);
    if (!campoTelefone) {
        console.error("Elemento com ID " + idCampo + " não encontrado.");
        return false;
    }

    const valorTelefone = campoTelefone.value.trim();

    if (valorTelefone === "") {
        alert("O número de telefone não pode estar vazio.");
        return false;
    }

    // Expressão regular para números de celular brasileiros (ex: (XX) 9XXXX-XXXX ou 9XXXXXXXX)
    // Permite formato com ou sem DDD, e com ou sem hífen.
    // Adapte a regex conforme as necessidades de seu país/formato.
    const regexTelefone = /^(?:\+?55)?(?:[1-9][1-9])? ?(?:9[1-9]\d{3}[-\s]?\d{4}|[1-9]\d{3}[-\s]?\d{4})$/;
    
    if (!regexTelefone.test(valorTelefone)) {
        alert("Formato de número de telefone inválido!");
        return false;
    }

    return true; // Telefone válido
}

// Exemplo de uso (assumindo um input com id="telefoneUsuario"):
// <input type="text" id="telefoneUsuario" placeholder="Seu telefone">
// <button onclick="verificarTelefone('telefoneUsuario')">Validar</button>

Obtenção de Parâmetros da URL

Extrair parâmetros de consulta (query string) da URL é fundamental para construir páginas dinâmicas ou processar informações passadas entre diferentes partes de uma aplicação. A API URLSearchParams simplifica essa tarefa.

/**
 * Obtém o valor de um parâmetro específico da query string da URL atual.
 * @param {string} nomeParametro O nome do parâmetro a ser buscado.
 * @returns {string|null} O valor do parâmetro ou null se não for encontrado.
 */
function obterValorParametroURL(nomeParametro) {
    // Cria um objeto URLSearchParams a partir da query string da URL atual.
    const params = new URLSearchParams(window.location.search);
    return params.get(nomeParametro);
}

// Exemplo de uso:
// Suponha a URL: https://exemplo.com/pagina?id=123&nome=usuario
const idProduto = obterValorParametroURL('id'); // Retorna "123"
const nomeUsuario = obterValorParametroURL('nome'); // Retorna "usuario"
const parametroInexistente = obterValorParametroURL('categoria'); // Retorna null

console.log("ID do Produto:", idProduto);
console.log("Nome do Usuário:", nomeUsuario);

Contagem Regressiva para Reenvio de Código

Em fluxos de autenticação, é comum implementar uma contagem regressiva para o reenvio de códigos de verificação. Este trecho de código demonstra como criar um temporizador para um botão de reenvio.

let tempoRestante = 60; // Tempo inicial em segundos
let temporizadorID; // Para armazenar o ID do setInterval

/**
 * Inicia ou atualiza a contagem regressiva para um botão de reenvio.
 * @param {HTMLElement} botaoElement O elemento do botão.
 * @param {string} textoInicial O texto original do botão quando a contagem termina.
 */
function iniciarContagemRegressiva(botaoElement, textoInicial = "Reenviar Código") {
    if (!botaoElement) {
        console.error("Elemento do botão não fornecido.");
        return;
    }

    // Limpa qualquer temporizador anterior para evitar múltiplas instâncias
    if (temporizadorID) {
        clearInterval(temporizadorID);
    }
    
    // Desativa o botão e inicia a contagem
    botaoElement.disabled = true;
    botaoElement.textContent = `Aguarde (${tempoRestante}s)`;

    temporizadorID = setInterval(() => {
        tempoRestante--;
        if (tempoRestante <= 0) {
            clearInterval(temporizadorID);
            botaoElement.disabled = false;
            botaoElement.textContent = textoInicial;
            tempoRestante = 60; // Reinicia o tempo para a próxima vez
        } else {
            botaoElement.textContent = `Aguarde (${tempoRestante}s)`;
        }
    }, 1000); // Atualiza a cada segundo
}

// Exemplo de uso:
// Suponha <button id="btnReenviar">Enviar Código</button>
// const meuBotao = document.getElementById("btnReenviar");
// iniciarContagemRegressiva(meuBotao, "Enviar Código");

Decodificação de Enitdades HTML em Strings

Ao trabalhar com dados que podem conter entidades HTML (como < para < ou & para &), é frequentemente necessário dceodificá-las para exibir o texto original. Uma técnica comum é usar o DOM do navegador para realizar essa conversão.

/**
 * Decodifica entidades HTML em uma string.
 * Por exemplo, "&lt;div&gt;" se torna "<div>".
 * @param {string} textoCodificado A string contendo entidades HTML.
 * @returns {string} A string com as entidades HTML decodificadas.
 */
function decodificarEntidadesHTML(textoCodificado) {
    const elementoTemporario = document.createElement('textarea'); // Usar textarea para melhor tratamento de quebras de linha
    elementoTemporario.innerHTML = textoCodificado;
    return elementoTemporario.value;
}

// Exemplo de uso:
const textoComEntidades = "<p>Isso é um &eacute;timo exemplo.</p>";
const textoDecodificado = decodificarEntidadesHTML(textoComEntidades);
console.log(textoDecodificado); // Saída: "<p>Isso é um ótimo exemplo.</p>"

const outroTexto = "Um &lt;símbolo&gt; e um &amp; comercial.";
console.log(decodificarEntidadesHTML(outroTexto)); // Saída: "Um <s> e um & comercial."
</s>

Inicialização de Seleção em Botões de Rádio

Em muitos formulários, é necessário definir programaticamente o estado inicial de um grupo de botões de rádio, seja carregando dados existentes ou definindo um valor padrão.

/**
 * Define um botão de rádio específico como selecionado dentro de um grupo.
 * @param {string} nomeGrupo O atributo 'name' do grupo de botões de rádio.
 * @param {string} valorASelcionar O atributo 'value' do botão de rádio a ser selecionado.
 */
function selecionarRadioPorValor(nomeGrupo, valorASelcionar) {
    const botoesRadio = document.querySelectorAll(`input[type="radio"][name="${nomeGrupo}"]`);
    botoesRadio.forEach(radio => {
        if (radio.value === valorASelcionar) {
            radio.checked = true;
        } else {
            radio.checked = false; // Garante que outros estejam desmarcados
        }
    });
}

// Exemplo de HTML:
// <fieldset>
//   <legend>Status:</legend>
//   <input type="radio" id="statusAtivo" name="statusProduto" value="ativo">
//   <label for="statusAtivo">Ativo</label><br>
//   <input type="radio" id="statusInativo" name="statusProduto" value="inativo">
//   <label for="statusInativo">Inativo</label>
// </fieldset>

// Exemplo de uso:
selecionarRadioPorValor('statusProduto', 'inativo'); // Seleciona o rádio com valor 'inativo'
// Para definir um valor padrão se nada estiver selecionado:
// if (!document.querySelector('input[name="statusProduto"]:checked')) {
//     selecionarRadioPorValor('statusProduto', 'ativo');
// }

Formatação de Datas e Horas para Exibição

Exibir datas e horas de forma legível e consistente é crucial em interfaces de usuário. Em vez de manipulação manual de strings, a API Intl.DateTimeFormat oferece uma solução robusta e internacionalizada.

/**
 * Formata uma data para exibição, separando data e hora em linhas diferentes.
 * @param {Date|string} dataInput A data a ser formatada (pode ser um objeto Date ou uma string parsável).
 * @returns {string} A data e hora formatadas em HTML.
 */
function formatarDataHoraQuebrada(dataInput) {
    const dataObj = new Date(dataInput);

    if (isNaN(dataObj.getTime())) {
        return "Data Inválida";
    }

    // Formata apenas a data (ex: 25/10/2023)
    const formatadorData = new Intl.DateTimeFormat('pt-BR', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
    });
    const parteData = formatadorData.format(dataObj);

    // Formata apenas a hora (ex: 14:30:55)
    const formatadorHora = new Intl.DateTimeFormat('pt-BR', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    });
    const parteHora = formatadorHora.format(dataObj);

    return `${parteData}<br>${parteHora}`;
}

// Exemplo de uso:
const dataCompleta = "2023-10-25T14:30:55.123Z"; // Exemplo de string ISO
const dataFormatada = formatarDataHoraQuebrada(dataCompleta);
console.log(dataFormatada); // Saída: "25/10/2023<br>11:30:55" (se fuso horário for -3)

const outraData = new Date(); // Data e hora atuais
console.log(formatarDataHoraQuebrada(outraData));