1

Contexto: tenho um input que a medida que eu vou digitando uma funcao é chamada para verificar se o numero de telefone está no formato correto. Essa funcao deve aceitar numeros nos formatos: (XX)XXXXX-XXXX e (XX)XXXX-XXXX, e já aceita ambos os formatos!

Qual é o problema entao?: A funcao ao dar match no formato de 8 digitos não continua a correção caso o usuario digite o 9º digito.

Resumindo: quero que o regex identifique tanto o formato de 8 e 9 digitos, mas se for entrado 9 digitos, este formato que deve ser usado.

import React, {useState} from 'react'

function App(){
    const [telefone, setTelefone] = useState("")

    function handleTelefone(event){
        const regex = /^\(?([0-9]{2})\)?([0-9]{4,5})\-?([0-9]{4})$/mg;
        var str = event.target.value;
        const subst = `($1)$2-$3`;

        const result = str.replace(regex, subst);

        setTelefone(result);
    }
    return(
        <>
            <form>
                <input type="text" value={telefone} onChange={handleTelefone.bind(this)}/>
            </form>
        </>
    )
}

export default App

1 Resposta 1

2

O problema está na abordagem. O regex que você tem até valida a sequencia (XX)XXXXX-XXXX, mas como você formata o input ao se digitar uma sequencia de 10 dígitos, quando o usuário entra com o 11º digito, o input fica com o formato (XX)XXXX-XXXXX.

Eu geralmente formato o valor do input, deixando apenas caracteres significantes (números nesse caso) antes de fazer essas validações, assim você não precisa se preocupar com validação do hífen ou parenteses, exemplo:

function handleTelefone(event) {
  const regex = /^([0-9]{2})([0-9]{4,5})([0-9]{4})$/;
  var str = event.target.value.replace(/[^0-9]/g, "").slice(0, 11);

  const result = str.replace(regex, "($1)$2-$3");

  setTelefone(result);
}

Veja o resultado funcionando aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .