1

Como posso fazer uma mascar para um campo onde o usurário não érre esse padrão a baixo

exemplo '0.50','0.60','0.70'

os valores decimais sempre dentro de aspas e separados por virgula

se digitado errado mostrar mensagem

2
  • Conseguiu rapaz ?
    – Marcelo
    Commented 4/02/2018 às 18:39
  • Veja se minha resposta é o que você necessita.
    – NoobSaibot
    Commented 5/02/2018 às 23:37

2 Respostas 2

1

Você pode utilizar a biblioteca jQuery-Mask-Plugin, e utilizar Expressões Regulares para verificar o valor do campo. Veja o exemplo:

$(document).ready(function() {
	var campo = $('.campo');
	var alert = $('.erro');
	var mascara = "'0.00'";
	var fnc = function(v) {
		// Se o texto do campo tiver o mesmo tamanho
		// que a variável mascara, incrementa: ,'0.00' e faz o retorno,
		// caso contrário retorna o valor atual da variável mascara
		return (v.length === mascara.length) ? mascara += ",'0.00'" : mascara;
	};
	var options = {
		onKeyPress: function(v, e, f, o) {
		    console.log(v);
		    const reg = /('\d{1}\.\d{2}',?)|(\d+)|(\')/g;
		    let result = true;
		    var test = v.match(reg);
		    if (test) {
		        test.forEach(r => {
		            if (/('\d{1}\.\d{2}',?)/.test(r) === false) {
		                result = false;
		            }
		        });
		    }
		    // Verifica se o valor da variável 'result' é falso
		    // caso for exibi a mensagem, caso contrário oculta.
		    (result === false) ? alert.show(): alert.hide();
		    campo.mask(fnc(v), o);
		}
	};
	campo.mask(mascara, options);
});
.test {
    border: 2px solid #ccc;
    padding: 6px;
}
.erro {
    border: 2px solid red;
}

div.erro {
    background: #ff7675;
    border: 0;
    color: #fff;
    display: none;
    font-family: 'Verdana';
    font-size: 15px;
    margin-top: 15px;
    padding: 12px;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.13/jquery.mask.min.js"></script>
<input type="text" class="campo" />
<div class="erro">Dados invalidos</div>

Explicando:

  • '
    Permite aspas simples
  • \d{1}
    Permite somente um digito após a aspas.
  • .
    Permite um ponto.
  • \d{2}
    Permite somente dois dígitos após o ponto.
  • ,?
    Permite uma virgula opcional após a aspas.
  • |(\d+)|(\')
    Recupera o restante do valor que o usuário digitou, para verificar esta preenchido corretamente.
0

Veja se isto pode te ajudar:

Javascript:

  var input = document.getElementById("input");
  var logger = document.getElementById("logger");
  var $array = ["'0.50'","'0.60'","'0.70'"];
  var i;

  function validar(){

    var $descartavel = input.value;

    for (i = 0; i < $array.length; i++) {
      if($descartavel.indexOf($array[i]) != -1){ 
        logger.innerHTML = "";
      }else{
        if(i == 10){
          i = 0;
        }
        logger.innerHTML = "Valores estão inválidos! Corrija-os por favor!";
      }
     }
  }

HTML:

     <input type="text" id="input" onkeyup="validar()"/><br/><br />

      <div id="logger" style="background:#f44336;color:#fff;">
2
  • Parceiro não rodou aqui. outra coisa esses valores var $array = ["'0.50'","'0.60'","'0.70'"]; não são para comparar é so pra mostrar que qualquer outra valor vai ter que ficar dentro de aspas e separado por virgula Commented 4/02/2018 às 18:23
  • Você precisa criar seu próprio código de validação, com expressões regulares, ou algo do tipo.. Eu dei apenas uma ideia do que pode fazer.. Commented 4/02/2018 às 18:52

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 .