Validaciónes en JavaScript. Solo números y letras

Validaciónes en JavaScript. Solo números y letras

En este tutorial aprenderemos varias formas de hacer validaciones en JavaScript para permitir sólo números y letras en inputs de texto.

Permitir sólo números y letras

Método para validar que un string contenga sólo números y letras utilizando expresiones regulares.

function validateNumbersAndCharacters(msg) {
    var re = /^[a-z0-9]*$/i;
    return msg.match(re) !== null;
}

Permitir sólo números con autovalidación

Método para validar que sólo se introduzcan números en un input utilizando expresiones regulares. En el ejemplo veremos un campo de tipo input con autovalidación. Es decir, que si se introduce un valor que no sea un número automáticamente se ignora.

<!-- Campo de tipo texto con autovalidación -->
<input type="text" class="input-field" oninput="validateOnlyNumbersOnInput(this)"/>
<script>
    function validateOnlyNumbersOnInput(input){
        var re = /^[0-9]*$/i;
        let msg = input.value;
        // Si el caracter introducido no es un número
        if(!(msg.match(re) !== null)){
            // Elimina el último caracter introducido
            input.value = msg.slice(0, msg.length - 1);
        }
    }
</script>

Permitir sólo números positivos del cero al cien con autovalidación

Método para validar que sólo se introduzcan números positivos en un input utilizando expresiones regulares. En el ejemplo veremos un campo de tipo input con autovalidación. Es decir, que si se introduce un valor negativo automáticamente lo convierte en positivo.

<!-- Campo de tipo texto con autovalidación -->
<input type="text" class="input-field" oninput="validatePositive(this)"/>
<script>
    //Control para que si se inserta un número negativo lo pase a positivo y muestre un mensaje
    function validatePositive(input){
        //Expresión regular para decimales
        var re = /\d+(,\d+)?/i;
        var value = input.value;
        if (value < 0){
            input.value = value * (-1);
        }
        if (value > 100){
            input.value = 100;
        }
        if(!(value.match(re) !== null)){
            input.value = "";
        }
    }
</script>

Más tutoriales de JavaScript

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo