Cómo validar numéricos en un TextBox con JavaScript o JQuery

Estrada Web Group
Administrador
Cómo validar numéricos en un TextBox con JavaScript o JQuery

En este artículo te mostrare cómo validar que el usuario solo capture valores numéricos en un cuadro de texto usando JQuery y JavaScript. Ya que esta validación es muy común. Para muchos programadores validar campos de texto es muy sencillo, pero para los que no saben cómo hacerlo aquí está el ejemplo y la explicación.

Para validar los valores numéricos en el TextBox, escribimos el siguiente código según lo que queramos usar si JQuery o JavaScript.

Usando JavaScript.

Crearemos la función “validNumericos”, que será la que validara que se capturen solo numéricos en el cuadro e texto.

<head runat="server">
    <script type="text/javascript" >
        function validNumericos(evt) {
            var charCode = (evt.which) ? evt.which : event.keyCode
            if (((charCode == 8) || (charCode == 46) 
            || (charCode >= 35 && charCode <= 40)
                || (charCode >= 48 && charCode <= 57)
                || (charCode >= 96 && charCode <= 105))) {
                return true;
            }
            else {
                return false;
            }
        }
    </script>
</head>

Ahora necesitamos llamar a la función validNumericos  como se muestra a continuación, se manda llamar en el TextBox.

<asp:TextBox id="txtNumeric" onkeydown="return 
validNumericos(event)" runat="server"></asp:TextBox>

Usando JQuery

Para validar con JQuery, primero agregas la referencia del JQuery y enseguida escribe el código para validar los valores numéricos en el TextBox.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' 
type='text/javascript'></script>

        $(function () {
            $('#TextBox1').keydown(function (e) {
                if (e.shiftKey || e.ctrlKey || e.altKey) {
                    e.preventDefault();
                } else {
                    var key = e.keyCode;
                    //alert(key)
                    if (!((key == 8) || (key == 46) ||
 (key >= 35 && key <= 40)
 || (key >= 48 && key <= 57)
 || (key >= 96 && key <= 105))) {
                        e.preventDefault();
                    }
                }
            });
        });

    </script>

 <asp:TextBox id="TextBox1" runat="server"></asp:TextBox>

Si necesitas ayuda o no puedes implementar este ejemplo, puedes escribirme y pronto te dare respuesta.

!!!Gracias por leerme y seguirme.

 

Compartir artículo:

Más artículos geniales

Cómo usar los operadores ternarios de JavaScript

Cómo usar los operadores ternarios de JavaScript

Resumen: en este tutorial, aprenderás a usar el operador ternario de JavaScript para que tu código sea más conciso.

Ver artículo completo
Para qué sirve el operador de coma de JavaScript

Para qué sirve el operador de coma de JavaScript

Resumen: en este tutorial, aprenderás sobre el operador de coma de JavaScript y para qué puedes usarlo.

Ver artículo completo
Qué es una función de primera clase en JavaScript

Qué es una función de primera clase en JavaScript

Resumen: en este tutorial, aprenderás que las funciones de JavaScript las puedes almacenar en variables, pasarlas a otras funciones como argumentos y devolverlas desde otras funciones como valores.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla