Crie um gist com o código mostrado no vídeo, e já adicionei também a máscara de valores monetários que algumas pessoas estavam pedindo nos comentários: gist.github.com/fdaciuk/1ffb6fe2d76664894db189e04043fb21
Agradeço demais pelo vídeo, estava procurando uma solução que é atípica para nós brasileiros, o campo de Telefone, tornar ele dinâmico. Não apliquei a solução exatamente como mostrado, apesar de achar muito bem implementada, tive que fazer alterações por estar usando MUI e React, mas fiz uso dos métodos utilizando eles diretamente como filtros nos estados. Muito obrigado pelo vídeo! Sucesso e fique com Deus.
Fernando Daciuk Muito obrigado meu camarada. Suas aulas são top demais. São pessoas como você, e outros professores também, que fazem valer a pena seguir os estudos. Ainda não terminei seu curso de react porque na empresa onde trabalho usam Angular. Então por questões de tempo não consegui concluir. Meu muito obrigado e continue assim. Nós, meros mortais, precisamos de você!
Parabéns Daciuk! Como sempre conseguindo explicar os conteúdos de maneira simples e sem muitas delongas. (Inclusive eu nunca estudei a fundo expressões regulares e sempre as achava sem pé nem cabeça e, nesta aula, consegui entender absolutamente todo do conteúdo e a "lógica" destas expressões :P)
Cara você é uma grande inspiração! Graças ao conteúdo que você produz, eu pude me aprofundar meu conhecimento em JavaScript e aprender a utilizar o ReactJS. Obrigado!
Muito bom o vídeo com a sua explicação, gostei muito, vou até comprar o teu curso de JS para melhorar/ entender o JS. Gostaria muito de um outro vídeo sobre validação de formulário. Parabéns e obrigado pelo vídeo!!!
Show de bola Daniel! Que bom que curtiu :D Já está na lista, em breve vou fazer um vídeo falando sobre validação de formulários :D Obrigado pela sugestão :D
Olá Fernando, parabéns pela didática e iniciativa. Comprei já o React Ninja e estou gostando muito. Gostaria de saber se vai fazer um vídeo sobre a validação de CNPJ, CPF e Data. Vlw abraços
Excelente vídeo, até agora melhor explicação de regex que eu vi. Só não entendi a necessidade da parte "+?$", tirei para testar se era de fato necessária e continuou funcionando... Digo, a partir do momento em que você troca o novo dígito pro primeiro elemento (ultimo dois digitos seguidos de "-"), não teria mais como inserir mais de uma letra por vez, correto?
Oi Ítalo! Digitando no campo não, mas você pode ter copiado um valor maior do que o esperado, e depois colado no campo. Isso vai contar como um único "input", e o evento vai disparar só uma vez, aí você vai ficar com mais caracteres do que deveria no campo :)
Oi Dirosaki! Pois é, com TS vai ter algumas pequenas diferenças, pra ele conseguir entender corretamente quais são os tipos corretos. Anotei aqui a sua dica, qualquer hora eu faço um vídeo falando sobre isso com React + TS :D
Parabéns pela aula, não conseguia entender expressão regular e agora sei. Mas em um formulário que tenho outros campos que não deverão ter formatação como por exemplo nome, endereço, etc como faço para não dar o erro do minuto 17:50? ou seja, para eles não entrarem na validação
Massa @MrJohnTrindade! Ótima pergunta. A resposta é bem simples: você pode usar um seletor diferente para isso. Ao invés de selecionar todas as tags "input", você pode, por exemplo, adicionar um seletor `data-js="mask"` ou algo assim para saber quais inputs precisam de máscara =)
Obrigado pela resposta, mas vou colocar outra dúvida, porque vi que nos comentários que ninguém falou sobre o assunto. Depois de digitar um valor e caso nos enganamos temos que selecionar tudo e voltar a digitar, como fazemos para que o backspace funcione no caso do valor da moeda? @@queroserninja
@@MrJohnTrindade sim! Pra isso funcionar é meio "tricky": você precisa usar a API de seleção para pegar a posição do cursor, e, dependendo dos caracteres adicionados / removidos automaticamente (por causa da máscara), é preciso descontar esses valores pra deixar o cursor na posição correta. É meio chatinho de fazer, então tem que considerar o custo x benefício. Mas é possível =)
Muito boa explicação. Gostaria de mascara para valores monetários mas apernas visualmente pois o valor deve estar no formato do banco de dados, assim como datas também Vídeo para validação também é bem vindo.
Irmão tudo bem? surgiu uma duvida... se quisesse fazer uma mask para preço e que ela preenchesse da direita para esquerda ao invés deste formato natural. Seria possível?
Oi Thiago! Para usar o formato moeda, você pode usar o construtor Intl.NumberFormat(). E para fazer com que os valores comecem da direita para a esquerda, basicamente é pensar o seguinte: no modo normal, se você entrar com o valor "1", ao converter para moeda real, ele vai transformar em "R$ 1,00", correto? Nesse caso, você precisa transformar a entrada em centavos, não em reais. E para fazer isso, é só pegar o valor, fazer o replace de tudo o que não é número, deixando só números, converter o valor para o tipo Number, e dividir por 100 antes de formatar. Assim ele vai começar a contar pelos centavos, fazendo o que você precisa :) O método ficaria mais ou menos assim: money (value) { return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL', }).format(+value.replace(/\D+/g, '') / 100) }
@@queroserninja nossa irmão do céu... kkk se você visse o código que eu fiz se chorava. Deu certo, mas eu fiz uma pancada de ifs no final das contas... fiquei até tarde pensando em como fazer...kkk OBRIGADOOOOO!
Excelente tutorial! Sofri recentemente pq no Google só retorna máscara jQuery hahah Uma dúvida, não teria uma forma mais simples de limitar os dígitos no inputs apenas limitando os caracteres digitados ao invés de usar o Regex pegando especificamente o final da string?
Até daria, mas seria mais chatinho de tratar, pois vc precisaria adicionar um "if" testando o tamanho do campo (valores + caracteres especiais). Acho que com o replace + regex fica mais simples, já que você não precisa se preocupar com quantidade de caracteres diretamente =)
Uma dica pra você pesquisar no Google quando quiser ignorar algo, vc pode usar dessa forma, vamos supor que sua pesquisa fosse: js mask Pra ignorar resultados que contenham jquery vc faz assim: js mask -jquery
Explicação muito fácil de entender. Eu estava precisando de uma máscara para data mas consegui fazer tranquilo só usando as explicações deste vídeo. Validação ou mesmo um curso completo de Regex seria bem legal hein @queroser.ninja - Fernando Daciuk ?!
Legal @Mariana! Que massa que conseguiu fazer :D No curso JS Ninja eu abordo bastante coisa de regex :D Se tiver interesse, nesse link eu deixo alguns cupons de desconto: queroser.ninja/promocoes/
nao estou conseguindo trocar o valor do data -js em javascript, pois sempre que troco usando o select da um erro no (e.target.value), pode me ajudar mano?
Conteúdo top. Parabéns! So fiquei com uma dúvida: tentei replicar por aki substituindo a captura dos valores armazenados em "data-js' pela captura do valor armazenando em "id's dos inputs - no caso, atribui os mesmos valores nos ids de cada input -, porém o navegador dispara o erro "TypeError: maskPerId[fields] is not a function". Na teoria, os conteúdos armazenados em data-js e id, atribuidos a mask[ ] sao os mesmos (pr ex. mask["cep"]). Então o que justificaria o disparo do erro quando pego o valor d id??
Oi Felipe! Se você usar só $input.id no lugar de $input.dataset.js é pra funcionar da mesma forma sim. Só confira se o nome do método dentro do objeto masks é exatamente o nome que você usou para o ID do campo. Normalmente esse tipo de erro acontece por erro de digitação, então dá uma conferida geral, inclusive no nome das suas variáveis :)
Oi Lucas! Para usar o formato moeda, você pode usar o construtor Intl.NumberFormat(). E para fazer com que os valores comecem da direita para a esquerda, basicamente é pensar o seguinte: no modo normal, se você entrar com o valor "1", ao converter para moeda real, ele vai transformar em "R$ 1,00", correto? Nesse caso, você precisa transformar a entrada em centavos, não em reais. E para fazer isso, é só pegar o valor, fazer o replace de tudo o que não é número, deixando só números, converter o valor para o tipo Number, e dividir por 100 antes de formatar. Assim ele vai começar a contar pelos centavos, fazendo o que você precisa :) O método ficaria mais ou menos assim: money (value) { return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL', }).format(+value.replace(/\D+/g, '') / 100) }
Oi Bruno! Só olhando o seu código pra entender o que você pode estar fazendo de errado =) Suba seu projeto em um repositório do GitHub, e poste aqui o link que eu dou uma olhada, ok? =)
Opa! Criei um gist, e adicionei também a máscara de valores monetários que algumas pessoas estavam pedindo :) gist.github.com/fdaciuk/1ffb6fe2d76664894db189e04043fb21
Oi Gustavo! É só usar a mesms máscara do telefone, só adicionando um replace no início da regex pra fazer o +55. Coloquei um exemplo lá no gist (descrição do vídeo) como phoneDDI ;)
Será que alguém pode me dizer onde está o erro? pois ele funciona apenas os 03 primeiros replace, depois disso não. const mask = { cpf(value){ return value .replace(/\D/,'') .replace(/(\d{3})(\d)/,'$1.$2') .replace(/(\d{3})(\d)/,'$1.$2') .replace(/(\d{3})(\d{1,2})/,'$1-$2') } }
Oi Raphael! Só olhando o código, parece estar ok. Coloca o código no codesandbox ou jsbin pra gente ver ele rodando, e entender onde pode estar o problema :)
E depois de 10 meses vou estou vendo esse vídeo hoje e a resposta para o seu problema é que faltou adicionar a flag "g" no primeiro replace, para ele capturar todos os caracteres não númericos da string e não apenas o primeiro que ele encontrar.
Oi Vinn! Pra e-mail, não recomendo usar máscara ou validação, pois são muitas variações, e existe uma probabilidade muito grande de você esquecer de validar algum caso, impedindo alguma pessoa de fazer um cadastro na sua aplicação, por exemplo. Para o caso dos e-mails, minha recomendação é fazer verificação em duas etapas: deixe a pessoa cadastrar o email da forma que ela quiser, e envie uma mensagem com um link de confirmação, para garantir que o e-mail é válido! Será mais efetivo que tentar validar =)
Oi Luka! O ideal é você colocar esse valor fora do input. Como o "kg" precisa ficar do lado direito do número, não vai ser legal o usuário tentando digitar, com o cursor após o "g", e a edição acontecer nos números, saca? Então para esses casos, onde você precisa adicionar algo após o valor (kg, m, cm, etc), eu deixaria fora do input :)
Muito bom. Adaptei para o número de RG, no formato 00.000.000-1 ou 000.000.000-1: rg(value) { return value .replace(/\D/g, '') .replace(/(\d{2})(\d)/, '$1.$2') .replace(/(\d{3})(\d)/, '$1.$2') .replace(/(\d{3})(\d{1})/, '$1-$2') .replace(/(\d{2}).(\d)(\d{2}).(\d)(\d{2})-(\d)(\d{1})/, '$1$2.$3$4.$5$6-$7') .replace(/(-\d{1})\d+?$/, '$1') } não sei se tem uma maneira mais simples, porém esta deu certo.
Legal @Beto Garcia! Só tem que ficar esperto pq número de RG varia de estado para estado: não existe um padrão nacional, nem de quantidade de números, nem de separação de caracteres, por isso não mostrei no vídeo :)
Crie um gist com o código mostrado no vídeo, e já adicionei também a máscara de valores monetários que algumas pessoas estavam pedindo nos comentários:
gist.github.com/fdaciuk/1ffb6fe2d76664894db189e04043fb21
Já vi o video inúmeras vezes e partilhei com vários colegas, super fácil compreensão.
Poderia fazer um segundo vídeo, mas mostrando como fazer a validação desses campos! Ótimo vídeo!
Legal Marcos! Dica anotada :D
@@queroserninja seria uma boa hein!
@@fernandoalves8410 Seria muito bom
Agradeço demais pelo vídeo, estava procurando uma solução que é atípica para nós brasileiros, o campo de Telefone, tornar ele dinâmico. Não apliquei a solução exatamente como mostrado, apesar de achar muito bem implementada, tive que fazer alterações por estar usando MUI e React, mas fiz uso dos métodos utilizando eles diretamente como filtros nos estados.
Muito obrigado pelo vídeo!
Sucesso e fique com Deus.
Boa @Anderson, que bom que o vídeo foi útil :D
De longe o melhor video sobre mascaras q eu já vi
Massa! Que bom que curtiu Mathias! :D
Gostei. Didática e Objetividade. Show de bola.
Que massa que curtiu Nixon! :D
Finalmente alguém que explica em js puro e não em jquery ou 384249 plugins e meios aleatórios
Que bom que curtiu @Gean :D
Agradeço muito pela ajuda! Já tentei várias máscaras mais nenhuma ficava com o formato do PIS/PASEP. Obrigada mesmo! Parabéns!
Fernando Daciuk
Muito obrigado meu camarada.
Suas aulas são top demais. São pessoas como você, e outros professores também, que fazem valer a pena seguir os estudos.
Ainda não terminei seu curso de react porque na empresa onde trabalho usam Angular. Então por questões de tempo não consegui concluir.
Meu muito obrigado e continue assim. Nós, meros mortais, precisamos de você!
Obrigado pelas palavras @APSantos Dev!
Foda demais, e olha que nem assiti o video todo ainda, bora continuar
Aula incrível, precisava de algo assim sem usar bibliotecas
Que bom que curtiu Bruno! :D
Fala bro. Acabei chegando por aqui por uma necessidade e fui atendido, muito obrigado!
Que massa Jaison! Tamo junto meu caro :D
gostei de mais da tua aula, só tenho a agradecer s2
Que bom que curtiu Lucas! :D
Parabéns Daciuk! Como sempre conseguindo explicar os conteúdos de maneira simples e sem muitas delongas.
(Inclusive eu nunca estudei a fundo expressões regulares e sempre as achava sem pé nem cabeça e, nesta aula, consegui entender absolutamente todo do conteúdo e a "lógica" destas expressões :P)
Que massa Diego! =)
Vou fazer mais vídeos com conteúdos assim :D
Cara você é uma grande inspiração!
Graças ao conteúdo que você produz, eu pude me aprofundar meu conhecimento em JavaScript e aprender a utilizar o ReactJS.
Obrigado!
Oi Bruno! Fico muito feliz em poder ajudar :D
Obrigado por acompanhar o canal :D
Você é um ótimo professor. Muito didático.
Valeu man :D
cara muito obrigado, você foi uma mã na roda,
coloquei o video em 2x e mesmo assim entendi perfeitamente
Cara, você manja muito, parabéns ótimas explicações!
Que bom que curtiu! :D
Muito bom o vídeo com a sua explicação, gostei muito, vou até comprar o teu curso de JS para melhorar/ entender o JS. Gostaria muito de um outro vídeo sobre validação de formulário. Parabéns e obrigado pelo vídeo!!!
Show de bola Daniel! Que bom que curtiu :D
Já está na lista, em breve vou fazer um vídeo falando sobre validação de formulários :D
Obrigado pela sugestão :D
Muito simples!! Top demais!! Conteúdo de grande valor pra mim...
Massa! Que bom que curtiu Vitor :D
Cara, você é sensacional. Perdi tempo procurando lib para reactjs.
Massa! Que bom que curtiu :D
Cara muito bom esse vídeo, resolveu o problema de uma forma muuuito simples, muito obrigado por compartilhar!
Show Dylan! Que bom que gostou :D
Parabéns muito bom!
Fera! Muito obrigado. Conteúdo muito útil e bem explicado. Sucesso!
Que bom que curtiu :)
Excelente aula! Parabéns pela didática.
Valeu Lucas! Que bom curtiu :D
faz 2 anos que eu estudo, e eu sempre volto pra esse video kkkkkkk
Boa haha :D
vc é bom cara. Valeu, estava precisando de um tutorial desse.
Que bom que curtiu Vinicius :D
Muito obrigado professor!
Que didática! Parabéns monstro!
Valeu mano
Perfeito!
Olá Fernando, parabéns pela didática e iniciativa. Comprei já o React Ninja e estou gostando muito. Gostaria de saber se vai fazer um vídeo sobre a validação de CNPJ, CPF e Data. Vlw abraços
Oi José! Em breve teremos mais vídeos por aqui sim! Vamos falar bastante ainda sobre formulários, inclusive validação de campos com JS puro :D
Valeu. Me ajudou muito.
Fico feliz que ajudou Jô! :D
Muito bom, gostei muito da explicação sobre regex, obrigado.
Valeu Rafael :D
Excelente vídeo, até agora melhor explicação de regex que eu vi. Só não entendi a necessidade da parte "+?$", tirei para testar se era de fato necessária e continuou funcionando... Digo, a partir do momento em que você troca o novo dígito pro primeiro elemento (ultimo dois digitos seguidos de "-"), não teria mais como inserir mais de uma letra por vez, correto?
Oi Ítalo! Digitando no campo não, mas você pode ter copiado um valor maior do que o esperado, e depois colado no campo. Isso vai contar como um único "input", e o evento vai disparar só uma vez, aí você vai ficar com mais caracteres do que deveria no campo :)
@@queroserninja Entendi!!! Agora faz sentido hehehe Muito obrigado mestre!
Boa professor !!! Só sucesso
\o/
Muito obrigado Professor por esse excelente conteudo..
Que bom que curtiu Davi :D
Aula Excelente!
Que bom que curtiu João! :D
dahora d+! muito obrigado por esse vídeo!
Que bom que curtiu \o/
Show, ajudou muito.
Que bom que curtiu :)
Muito bom, ótimo vídeo !!
Valeu Igor! Que bom que curtiu :D
regex é magico kkkk parabéns pelo vídeo
Valeu Sávio! Que bom que curtiu :)
top demais
Que massa que curtiu :D
Aaaahhhhhh, best teacher! 🏆
Valeu Roger
Poderia fazer um video para React mas com mais máscaras, apesar de funcionar assim no react, com typescript sofri alguns erros.
Oi Dirosaki! Pois é, com TS vai ter algumas pequenas diferenças, pra ele conseguir entender corretamente quais são os tipos corretos. Anotei aqui a sua dica, qualquer hora eu faço um vídeo falando sobre isso com React + TS :D
Parabéns pela aula, não conseguia entender expressão regular e agora sei.
Mas em um formulário que tenho outros campos que não deverão ter formatação como por exemplo nome, endereço, etc como faço para não dar o erro do minuto 17:50? ou seja, para eles não entrarem na validação
Massa @MrJohnTrindade! Ótima pergunta. A resposta é bem simples: você pode usar um seletor diferente para isso. Ao invés de selecionar todas as tags "input", você pode, por exemplo, adicionar um seletor `data-js="mask"` ou algo assim para saber quais inputs precisam de máscara =)
Obrigado pela resposta, mas vou colocar outra dúvida, porque vi que nos comentários que ninguém falou sobre o assunto.
Depois de digitar um valor e caso nos enganamos temos que selecionar tudo e voltar a digitar, como fazemos para que o backspace funcione no caso do valor da moeda?
@@queroserninja
@@MrJohnTrindade sim! Pra isso funcionar é meio "tricky": você precisa usar a API de seleção para pegar a posição do cursor, e, dependendo dos caracteres adicionados / removidos automaticamente (por causa da máscara), é preciso descontar esses valores pra deixar o cursor na posição correta. É meio chatinho de fazer, então tem que considerar o custo x benefício. Mas é possível =)
Muito boa explicação.
Gostaria de mascara para valores monetários mas apernas visualmente pois o valor deve estar no formato do banco de dados, assim como datas também
Vídeo para validação também é bem vindo.
Legal Haroldo! Anotada a dica :D
Melhor professor
Valeu Ruan
Muito bom 👍🏾👍🏾👍🏾👍🏾
\o/
muito bom tah!
Que bom que curtiu Sérgio :D
Monstro.
Valeu man \o/
Irmão tudo bem? surgiu uma duvida... se quisesse fazer uma mask para preço e que ela preenchesse da direita para esquerda ao invés deste formato natural. Seria possível?
Oi Thiago! Para usar o formato moeda, você pode usar o construtor Intl.NumberFormat().
E para fazer com que os valores comecem da direita para a esquerda, basicamente é pensar o seguinte: no modo normal, se você entrar com o valor "1", ao converter para moeda real, ele vai transformar em "R$ 1,00", correto? Nesse caso, você precisa transformar a entrada em centavos, não em reais.
E para fazer isso, é só pegar o valor, fazer o replace de tudo o que não é número, deixando só números, converter o valor para o tipo Number, e dividir por 100 antes de formatar. Assim ele vai começar a contar pelos centavos, fazendo o que você precisa :)
O método ficaria mais ou menos assim:
money (value) {
return new Intl.NumberFormat('pt-BR', {
style: 'currency',
currency: 'BRL',
}).format(+value.replace(/\D+/g, '') / 100)
}
@@queroserninja nossa irmão do céu... kkk se você visse o código que eu fiz se chorava. Deu certo, mas eu fiz uma pancada de ifs no final das contas... fiquei até tarde pensando em como fazer...kkk OBRIGADOOOOO!
@@thiagovalls6125 tamo junto!
Excelente tutorial! Sofri recentemente pq no Google só retorna máscara jQuery hahah
Uma dúvida, não teria uma forma mais simples de limitar os dígitos no inputs apenas limitando os caracteres digitados ao invés de usar o Regex pegando especificamente o final da string?
Até daria, mas seria mais chatinho de tratar, pois vc precisaria adicionar um "if" testando o tamanho do campo (valores + caracteres especiais). Acho que com o replace + regex fica mais simples, já que você não precisa se preocupar com quantidade de caracteres diretamente =)
Uma dica pra você pesquisar no Google quando quiser ignorar algo, vc pode usar dessa forma, vamos supor que sua pesquisa fosse:
js mask
Pra ignorar resultados que contenham jquery vc faz assim:
js mask -jquery
@@rapha-v Boa dica :D
Explicação muito fácil de entender.
Eu estava precisando de uma máscara para data mas consegui fazer tranquilo só usando as explicações deste vídeo.
Validação ou mesmo um curso completo de Regex seria bem legal hein @queroser.ninja - Fernando Daciuk ?!
Legal @Mariana! Que massa que conseguiu fazer :D
No curso JS Ninja eu abordo bastante coisa de regex :D
Se tiver interesse, nesse link eu deixo alguns cupons de desconto: queroser.ninja/promocoes/
como faria o regex para campo de valor monetário padrão brasil. to tentando aqui mas to quebrando a cabeça.
Oi Jonaderson! Respondi isso nesse comentário aqui:
ruclips.net/video/r-8isv_TnVA/видео.html&lc=UgxJdOy65FQW3zpTVcl4AaABAg.9-xBSB7dIvO9-xkoU4VfU8
@@queroserninja então, eu fiz usando if para cada tamanho da string. cheguei onde eu queria assim. não sei se é o mais certo.
nao estou conseguindo trocar o valor do data -js em javascript, pois sempre que troco usando o select da um erro no (e.target.value), pode me ajudar mano?
Oi Pedro! Sobe seu código em um repo no GitHub pra eu ver o que você tá tentando fazer :)
Conteúdo top. Parabéns!
So fiquei com uma dúvida: tentei replicar por aki substituindo a captura dos valores armazenados em "data-js' pela captura do valor armazenando em "id's dos inputs - no caso, atribui os mesmos valores nos ids de cada input -, porém o navegador dispara o erro "TypeError: maskPerId[fields] is not a function". Na teoria, os conteúdos armazenados em data-js e id, atribuidos a mask[ ] sao os mesmos (pr ex. mask["cep"]). Então o que justificaria o disparo do erro quando pego o valor d id??
Oi Felipe! Se você usar só $input.id no lugar de $input.dataset.js é pra funcionar da mesma forma sim. Só confira se o nome do método dentro do objeto masks é exatamente o nome que você usou para o ID do campo. Normalmente esse tipo de erro acontece por erro de digitação, então dá uma conferida geral, inclusive no nome das suas variáveis :)
Como fazer para moedas, para que ao digitar o valor, os primeiros números digitados necessariamente vão pra esquerda e a pontuação é adicionada?
Oi Lucas! Para usar o formato moeda, você pode usar o construtor Intl.NumberFormat().
E para fazer com que os valores comecem da direita para a esquerda, basicamente é pensar o seguinte: no modo normal, se você entrar com o valor "1", ao converter para moeda real, ele vai transformar em "R$ 1,00", correto? Nesse caso, você precisa transformar a entrada em centavos, não em reais.
E para fazer isso, é só pegar o valor, fazer o replace de tudo o que não é número, deixando só números, converter o valor para o tipo Number, e dividir por 100 antes de formatar. Assim ele vai começar a contar pelos centavos, fazendo o que você precisa :)
O método ficaria mais ou menos assim:
money (value) {
return new Intl.NumberFormat('pt-BR', {
style: 'currency',
currency: 'BRL',
}).format(+value.replace(/\D+/g, '') / 100)
}
@@queroserninja obrigado! Vou tentar, mas de toda forma me ajudou demais.
eae meu mano blz quuero entender pq o meu não vai mano
criei um app.js
só que quando coloquei o 'return' ele não valida
Oi Bruno! Só olhando o seu código pra entender o que você pode estar fazendo de errado =)
Suba seu projeto em um repositório do GitHub, e poste aqui o link que eu dou uma olhada, ok? =)
Me tira uma dúvida, só funciona se eu executar em um servidor, tipo xampp? Pois tentei executando como um arquivo html local e não funcionou
Deveria funcionar normalmente sem precisar subir servidor =)
Poderia fazer um segundo vídeo, mas mostrando como fazer a validação desses campos! Ótimo vídeo! (comentário cópia do Marcos Borges kk)
Pode deixar que vou fazer sim :D
Onde vc comprou estes spots de led que estão no armário? :-D
Mercado Livre :D
produto.mercadolivre.com.br/MLB-843783721-10-lmpada-3-led-para-guarda-roupa-armarios-a-pilha-original-_JM?quantity=1
Tem o link desse repo com o código final?
Opa! Criei um gist, e adicionei também a máscara de valores monetários que algumas pessoas estavam pedindo :)
gist.github.com/fdaciuk/1ffb6fe2d76664894db189e04043fb21
E se eu quiser colocar o .55 no telefone?
Oi Gustavo! É só usar a mesms máscara do telefone, só adicionando um replace no início da regex pra fazer o +55. Coloquei um exemplo lá no gist (descrição do vídeo) como phoneDDI ;)
@@queroserninja Valeeu
Será que alguém pode me dizer onde está o erro? pois ele funciona apenas os 03 primeiros replace, depois disso não.
const mask = {
cpf(value){
return value
.replace(/\D/,'')
.replace(/(\d{3})(\d)/,'$1.$2')
.replace(/(\d{3})(\d)/,'$1.$2')
.replace(/(\d{3})(\d{1,2})/,'$1-$2')
}
}
Oi Raphael! Só olhando o código, parece estar ok. Coloca o código no codesandbox ou jsbin pra gente ver ele rodando, e entender onde pode estar o problema :)
Cheguei atrasado, mas isso pode ajudar outra pessoa com o mesmo problema:
talvez seja seu input no HTML, veja se o tipo está como text =>
E depois de 10 meses vou estou vendo esse vídeo hoje e a resposta para o seu problema é que faltou adicionar a flag "g" no primeiro replace, para ele capturar todos os caracteres não númericos da string e não apenas o primeiro que ele encontrar.
Patterns React =D
Anotado :D
Coloca um curso de node na udemy
Vamos ter "alguns" em breve :D
Essas são as máscaras mais efetivas que eu já vi, mas ainda não achei uma para email
Alguém sabe onde teria uma?
Oi Vinn! Pra e-mail, não recomendo usar máscara ou validação, pois são muitas variações, e existe uma probabilidade muito grande de você esquecer de validar algum caso, impedindo alguma pessoa de fazer um cadastro na sua aplicação, por exemplo. Para o caso dos e-mails, minha recomendação é fazer verificação em duas etapas: deixe a pessoa cadastrar o email da forma que ela quiser, e envie uma mensagem com um link de confirmação, para garantir que o e-mail é válido! Será mais efetivo que tentar validar =)
@@queroserninja
Eu quem tive uma má escolha de palavras kkkkk
Com máscara quis dizer validação. Não tem como "corrigir" um email.
Obrigado mano
Meu camarada, me dá uma força aew.
Como faço para colocar um valor literal no final? Ex: 69.7kg
Oi Luka! O ideal é você colocar esse valor fora do input. Como o "kg" precisa ficar do lado direito do número, não vai ser legal o usuário tentando digitar, com o cursor após o "g", e a edição acontecer nos números, saca?
Então para esses casos, onde você precisa adicionar algo após o valor (kg, m, cm, etc), eu deixaria fora do input :)
O regex é poderoso.
Sim, demais :D
Muito bom. Adaptei para o número de RG, no formato 00.000.000-1 ou 000.000.000-1:
rg(value) {
return value
.replace(/\D/g, '')
.replace(/(\d{2})(\d)/, '$1.$2')
.replace(/(\d{3})(\d)/, '$1.$2')
.replace(/(\d{3})(\d{1})/, '$1-$2')
.replace(/(\d{2}).(\d)(\d{2}).(\d)(\d{2})-(\d)(\d{1})/, '$1$2.$3$4.$5$6-$7')
.replace(/(-\d{1})\d+?$/, '$1')
}
não sei se tem uma maneira mais simples, porém esta deu certo.
Legal @Beto Garcia! Só tem que ficar esperto pq número de RG varia de estado para estado: não existe um padrão nacional, nem de quantidade de números, nem de separação de caracteres, por isso não mostrei no vídeo :)
Realmente @@queroserninja. Este script serve para SP, que é neste formato e já passou dos 99.999.999 de rgs.