Validar o número de telefone com o javascript
estou a tentar validar números de telefone como 123-345-3456 e (078)789-8908 usando JavaScript.
Aqui está o meu código.
function ValidateUSPhoneNumber(phoneNumber) {
var regExp = /^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}/;
var phone = phoneNumber.match(regExp);
if (phone) {
alert('yes');
return true;
}
alert('no');
return false;
}
estou a testar a função usando ValidateUSPhoneNumber('123-345-34567') que tem 5 dígitos antes do último hífen que é inválido como por regex. Mas a função retorna verdadeira.
Alguém pode explicar porquê?
14 answers
JavaScript para validar o número de telefone:
function phonenumber(inputtxt) {
var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if(inputtxt.value.match(phoneno)) {
return true;
}
else {
alert("message");
return false;
}
}O programa acima corresponde a:
XXX-XXX-XXXX
XXX. XXX. XXXX
XXX XXX XXXX
Se quiser usar um sinal + antes do número da seguinte forma
+XX-XXXX-XXXX
+XX. XXXX.XXXX
+ XXXX XXXX
utilizar o seguinte código:
function phonenumber(inputtxt) {
var phoneno = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/;
if(inputtxt.value.match(phoneno)) {
return true;
}
else {
alert("message");
return false;
}
}
Esta expressão regular /^(\([0-9]{3}\)\s*|[0-9]{3}\-)[0-9]{3}-[0-9]{4}$/ valida todos os seguintes elementos:
'123-345-3456';
'(078)789-8908';
'(078) 789-8908'; // Note the space
- o grupo no início valida de duas formas,
(XXX)ouXXX-, com espaços opcionais após o parêntesis de Fecho. - a parte após os controlos do grupo de
XXX-XXX
function validate(phone) {
const regex = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
console.log(regex.test(phone))
}
validate('1234567890') // true
validate(1234567890) // true
validate('(078)789-8908') // true
validate('123-345-3456') // trueEsta é de longe a maneira mais fácil que eu encontrei para usar javascript regex para verificar o formato do número de telefone. este exemplo específico verifica se se trata de um número de 10 dígitos.
<input name="phone" pattern="^\d{10}$" type="text" size="50">
O campo de entrada é assinalado quando o botão Enviar é carregado se o padrão não corresponder ao valor, não são necessários outros css ou js.
Alguém pode explicar porquê?
Porque a sua expressão regular corresponde à entrada. É que a entrada também inclui os caracteres extras. Você incluiu ' ^ ' para significar o início da linha, mas (como Andy disse) você deve incluir '$' para significar o fim da linha.
Se você iniciar a sua expressão regular com ' ^ 'e terminar com'$', então ela só irá corresponder às linhas que só correspondem à sua expressão regular.
Ao iniciar o seu regex com ' ^ 'e não terminar com'$', você coincidir as linhas que começam com uma sequência correspondente à sua regex, mas as linhas podem ter qualquer outra coisa a seguir a sequência correspondente.Pode usar este 'plugin' jquery:
Http://digitalbush.com/projects/masked-input-plugin/
Consulte a página de demonstração, a opção do telefone.
Alguém pode explicar porquê??
Isto acontece porque a sua expressão regular não termina com nenhum meta-carácter âncora, como o fim da linha {[[0]} ou um limite de palavra \b.
Então, quando você perguntar o mecanismo de regex se 123-345-34567 é o número de telefone válido, ele vai tentar encontrar uma correspondência com esta cadeia, de modo que ele corresponda 123- com esta parte (\([0-9]{3}\) |[0-9]{3}-), em seguida, ele corresponde 345- com esta parte [0-9]{3}-, em seguida, ele corresponde 3456 com esta parte [0-9]{4}.
Agora a o motor descobre que andou por toda a regex e encontrou uma cadeia de caracteres dentro da sua entrada que corresponde à regex, embora tenha deixado um carácter - o número 7- na cadeia de entrada, por isso pára e devolve o sucesso porque encontrou uma sub-cadeia que corresponde.
Se você tiver incluído $ ou \b no final da sua regex, o motor anda da mesma forma como antes, então ele tenta corresponder $ ou \b, mas encontrar o último número - 7 - e ele não é um limite de palavra \b nem um fim da linha {[[0]} por isso pára e não consegue encontrar uma correspondência.
^(\(?[0-9]{3}\)?)((\s|\-){1})?[0-9]{3}((\s|\-){1})?[0-9]{4}$
Primeiro, permitimos 0 ou 1 parêntesis abertos para começar \(?
[0-9]{3}
Depois, repetimos o primeiro passo e permitimos 0 ou 1 parêntesis finais.\)?
Para o segundo grupo, começamos por permitir um espaço ou um hífen 0 ou 1 vezes ((\s|\-){1})?
Isto é repetido entre o segundo e o terceiro grupo de Números, e nós ... verifique se há 3 dígitos consecutivos, em seguida, quatro dígitos consecutivos para terminá-lo. Para nós números de telefone eu acho que isso cobre as bases para um monte de maneiras diferentes que as pessoas podem formatar o número, mas é restritivo o suficiente para que eles não podem passar uma corda irracional.
Em JavaScript, a expressão regular abaixo pode ser usada para um número de telefone:
^((\+1)?[\s-]?)?\(?[1-9]\d\d\)?[\s-]?[1-9]\d\d[\s-]?\d\d\d\d
E. g; 9999875099 , 8750999912 etc.
Referência : https://techsolutions.filebizz.com/2020/08/regular-expression-for-phone-number-in.html
Adicione uma palavra limite \b no final da expressão:
/^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}\b/
Se o espaço após ) For opcional:
/^(\([0-9]{3}\)\s*|[0-9]{3}-)[0-9]{3}-[0-9]{4}\b/
Adicione um $ ao fim da réplica para significar o fim do padrão:
var regExp = /^(\([0-9]{3}\)\s?|[0-9]{3}-)[0-9]{3}-[0-9]{4}$/;
Se usar na etiqueta de entrada, este código ajudá-lo-á. Eu escrevo este código sozinho e eu acho que esta é uma maneira muito boa de usar na entrada. mas você pode alterá-lo usando o seu formato. Ele vai ajudar o usuário a corrigir o seu formato na tag de entrada.
$("#phone").on('input', function() { //this is use for every time input change.
var inputValue = getInputValue(); //get value from input and make it usefull number
var length = inputValue.length; //get lenth of input
if (inputValue < 1000)
{
inputValue = '1('+inputValue;
}else if (inputValue < 1000000)
{
inputValue = '1('+ inputValue.substring(0, 3) + ')' + inputValue.substring(3, length);
}else if (inputValue < 10000000000)
{
inputValue = '1('+ inputValue.substring(0, 3) + ')' + inputValue.substring(3, 6) + '-' + inputValue.substring(6, length);
}else
{
inputValue = '1('+ inputValue.substring(0, 3) + ')' + inputValue.substring(3, 6) + '-' + inputValue.substring(6, 10);
}
$("#phone").val(inputValue); //correct value entered to your input.
inputValue = getInputValue();//get value again, becuase it changed, this one using for changing color of input border
if ((inputValue > 2000000000) && (inputValue < 9999999999))
{
$("#phone").css("border","black solid 1px");//if it is valid phone number than border will be black.
}else
{
$("#phone").css("border","red solid 1px");//if it is invalid phone number than border will be red.
}
});
function getInputValue() {
var inputValue = $("#phone").val().replace(/\D/g,''); //remove all non numeric character
if (inputValue.charAt(0) == 1) // if first character is 1 than remove it.
{
var inputValue = inputValue.substring(1, inputValue.length);
}
return inputValue;
}
/^1?\s?(\([0-9]{3}\)[- ]?|[0-9]{3}[- ]?)[0-9]{3}[- ]?[0-9]{4}$/
Isto validará todos os números de estilo dos EUA, com ou sem o 1, e com ou sem parêntesis no código de área(mas se usado, usado corretamente. I. E. (902-455-4555 não vai funcionar uma vez que não há parêntesis de fechamento. ele também permite um ou-ou um espaço entre conjuntos, se desejado.) Funcionará para os exemplos fornecidos pelo op
function validatePhone(inputtxt) {
var phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
return phoneno.test(inputtxt)
}