5

Estoy intentando validar que el usuario no pueda ingresar como primer carácter el número (0) pero no logro hacerlo la idea es que cuando ingrese en el input solo pueda poner del 1-9 y cuando ya sea mas del primer carácter si poder agregar 0-9

Estoy usando la libreria de Mask espero puedan ayudarme esto es lo que llevo:

$("#telefono").mask('ZZ',{translation:  {'Z': {pattern: /^[(1-9)0-9]/, recursive: true}}});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.13/jquery.mask.min.js"></script><input id="telefono" type="text" name="" value="" placeholder="telefono">

0

2 respuestas 2

6

Cada clase de caracteres (entre corchetes) coincide con un único caracter (por más que luego se la repita con un cuantificador). Por eso, es que necesitas separar cada dígito en una clase diferente.

/^[1-9][0-9]*$/

O, lo que es lo mismo:

/^[1-9]\d*$/

Como verás, además de coincidir con el inicio del string (^), también hace falta coincidir con el final, para que no ingresen algo como 123abc.

Y, por último, el asterisco en \d*, hace que ese dígito (0 a 9) pueda coincidir 0 a infinitas veces.


Ahora bien, la librería jQuery Mask Plugin no necesita estar anclada al inicio/fin del string, y toma letras como máscaras, y cada letra la asocia a un regex. Por lo tanto, si usamos la máscara:

PN

Y definimos:

P: /[1-9]/, //positivos
N: /\d/     //Números

Configurando a N como recursive, logramos que se repitan hasta el final. Entonces tenemos lo mismo que:

/[1-9]\d*/

Demo:

$("#telefono").mask(
    'PN',
    {translation:
        {
            P: {pattern: /[1-9]/},
            N: {pattern: /\d/, recursive: true}
        }
    }
);
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- jQuery Mask Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.13/jquery.mask.min.js"></script>

<!-- HTML -->
<input id="telefono" type="tel" name="" value="" placeholder="telefono">



Y yendo un poco más lejos, siguiendo este mismo ejemplo, podemos usarlo para encarar un formato de teléfono de hasta 12 dígitos, con código internacional:

$("#telefono").mask(
    '99990 0000-0000',
    {
        reverse: true
    }
);
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- jQuery Mask Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.13/jquery.mask.min.js"></script>

<!-- HTML -->
<input id="telefono" type="tel" name="" value="" placeholder="telefono">

7
  • 1
    No debería aceptar ceros después del primer carácter ? el 20 dic. 2017 a las 22:19
  • SI la expresión en si esta perfecta muchas gracias @Mariano el 20 dic. 2017 a las 22:26
  • 1
    muchas gracias @Mariano excelente respuesta me aclaro muchas dudas el 20 dic. 2017 a las 22:43
  • @Mariano sos un mago !! saludos !! el 20 dic. 2017 a las 22:45
  • amigo no se porque pero solo me agrega un 0 en mi input en el proyecto la solución que hice es cambiar PN por PNN y hay si agrego sin problema varios ceros saludos gracias. el 20 dic. 2017 a las 22:48
4

En la máscara deberías definir dos patrones (patterns): 1 para dígitos de 1 a 9 para el primer carácter y otro "recursivo" para dígitos de 0 a 9 para el resto de caracteres:

$(function(){
  $("#telefono").mask('ZA', {translation: {
      Z: {pattern: /[1-9]/},
      A: {pattern: /[0-9]/, recursive: true}
    }});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.13/jquery.mask.min.js"></script>

<input id="telefono" type="text" name="" value="" placeholder="telefono">

3
  • Amigo funciona perfecto muchas gracias! el 20 dic. 2017 a las 22:24
  • Terminamos respondiendo el mismo código, mientras me documentaba, aunque veo que publicaste primero una solución que funcionaba... No fue mi intención
    – Mariano
    el 20 dic. 2017 a las 22:46
  • 1
    No hay problema. Es una explicación más completa que al final es de lo que se trata. el 20 dic. 2017 a las 22:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.