miércoles, 11 de febrero de 2015

Método javascript que acepte solo números decimales


Validar solo números javascript
Este método de javascript lo uso para validar los campos de texto que requieren que sean de solo números decimales y que valide también el número de dígitos enteros la parte decimal después del punto aquí va el método.
//autor: @drincastX
//retorna un numero o un punto, si el tamaño del length es igual a nEntero y no existe el punto "." se asigna un punto automaticamente
//cumple con el número de decimales nDecimal, solo seran ese número de decimales
function SoloNumerosDecimales3(e, valInicial, nEntero, nDecimal) {
    var obj = e.srcElement || e.target;
    var tecla_codigo = (document.all) ? e.keyCode : e.which;
    var tecla_valor = String.fromCharCode(tecla_codigo);
    var patron2 = /[\d.]/;
    var control = (tecla_codigo === 46 && (/[.]/).test(obj.value)) ? false : true;
    var existePto = (/[.]/).test(obj.value);

    //el tab
    if (tecla_codigo === 8)
        return true;

    if (valInicial !== obj.value) {
        var TControl = obj.value.length;
        if (existePto === false && tecla_codigo !== 46) {
            if (TControl === nEntero) {
                obj.value = obj.value + ".";
            }
        }

        if (existePto === true) {
            var subVal = obj.value.substring(obj.value.indexOf(".") + 1, obj.value.length);

            if (subVal.length > 1) {
                return false;
            }
        }

        return patron2.test(tecla_valor) && control;
    }
    else {
        if (valInicial === obj.value) {
            obj.value = '';
        }
        return patron2.test(tecla_valor) && control;
    }
}
Expliquemos los parámetros de entrada, el parámetro e es el evento que se genera según una acción, en este caso es para la pulsación de una tecla sobre un input tipo texto, valInicial es un parámetro de verificación, en mi caso los input tipo texto se cargan con un valor por defecto que es 0.0, es como un valor comodin que lo q indica es que no se va a validar ti esta ese valor en el input, nEntero es el número de dígitos de la parte entera, nDecimal son los dígitos después del punto; un ejemplo para los dos últimos parámetros es si nEntero = 3 y nDecimal = 3, se pueden generar los siguientes números: 123.111 o, 1.123 o, 111,2.
Sobre el código, primeo se obtiene el objeto que genero el evento por ejemplo puede ser el control input, luego se captura que tecla ha sido presionada, luego se crean unos patrones de expresiones regulares, uno para verificar que solo sea un numero o un punto, y otra para validar que se ha presionado la tecla punto, luego de tener los valores que se han presionado y los de validación procedemos a analizarlos.
La primera validación es si se ha presionado la tecla tab, en cuyo caso no se realiza nada solo retornamos la ejecución.
Luego verificamos que el valor del objeto (el input) no tenga como valor nuestro valor de validación valInicial, la siguiente validación es para que se agregue en punto automáticamente cuando se ha alcanzado el máximo de número de dígitos enteros (nEntero), La siguiente validación es para que solo exista un punto en el número que se va a digitar y deje digitar la parte decimal.

Para que funcione en una caja de texto (input tipo text), debería usar el evento onkeypress para el llamado del método.

Este seria el HTML.

<input id="txtCantidad" type="text" maxlength="7" onkeypress="return
value='0.0' SoloNumerosDecimales3(event, '0.0', 4, 2);" />

Aqui esta el ejemplo.



Se vale opinar.