Código de JavaScript - Formatear cuenta bancaria IBAN

Imágen de perfil
Val: 2.211
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Formatear cuenta bancaria IBANgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 3 de Octubre del 2018 por xve
1.745 visualizaciones desde el 3 de Octubre del 2018
Este código formatea la entrada de una cuenta bancaria en formato IBAN permitiendo unicamente dos números al inicio, y cada 4 dígitos añade automáticamente un espacio.

iban

Versión 1.0
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 3 de Octubre del 2018gráfica de visualizaciones de la versión: Versión 1.0
1.746 visualizaciones desde el 3 de Octubre del 2018
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Esta primera versión no es POO ni valida que la cuenta sea correcta. Posteriormente, añadire la función de @Xavi para validar la cuenta corriente:
https://www.lawebdelprogramador.com/codigo/JavaScript/4548-Verificar-cuenta-bancaria-con-IBAN-en-JavaScript.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
 
<body>
    Introduce tu cuenta bancaria:
    <input type="text" name="ctabancaria" id="ctabancaria" size="30">
</body>
</html>
 
<script>
document.getElementById("ctabancaria").addEventListener("keypress",ctaPress);
document.getElementById("ctabancaria").addEventListener("keyup",ctaUp);
document.getElementById("ctabancaria").addEventListener("paste",paste);
 
/**
 * Evento que se ejecuta cuando se pulsa una tecla
 */
function ctaPress(e)
{
    var a=e;
 
    var valor=e.target.value;
    var longitud=valor.length;
    if(valor.length>=29) {
        e.preventDefault();
    }
 
    // verificamos que sea introduzcan dos letras al inicio y numeros a continuacion
    var patronA=new RegExp(/^([a-zA-Z])$/);
    var patron1=new RegExp(/^([0-9])$/);
    if((longitud<2 && patronA.test(e.key)===false) || (longitud>=2 && patron1.test(e.key)===false))
    {
        e.preventDefault();
    }
 
    // una vez se haya validado el valor, lo redibujamos correctamente
    setTimeout(() => {
        a.target.value=redibujar(a.target.value);
    });
}
 
/**
 * Evento que se ejecuta cuando se suelta una tecla
 * Lo utilizamos para controlar si borra algun digito
 */
function ctaUp(e)
{
    var tecla=e.which || e.keyCode;
    // 8 - Backspace
    // 46 - Delete
    if(tecla==8 || tecla==46)
    {
        e.target.value=redibujar(e.target.value);
    }
}
 
/**
 * Función para redibujar el numero de cuenta
 * Se utiliza para cuando de borra o copia un numero de cuenta
 *
 * @param string valor
 */
function redibujar(valor)
{
    // eliminamos los espacios de la cadena
    valor=valor.replace(/\s/g, '').toUpperCase();
 
    // dibujamos nuevamente la cadena con los espacios se separacion
    var result="";
    var longitud=0;
    for(var i=0;i<valor.length;i++)
    {
 
        // añadimos los espacios de separacion
        if(longitud==4 || longitud==9 || longitud==14 || longitud==19 || longitud==24)
        {
            result+=" ";
        }
        result+=valor[i];
        longitud=result.length;
    }
    return result;
}
 
/**
 * Funcion que se ejecuta cuando se intente pegar un código
 * NOTA: Solo funciona si el campo esta vacio
 */
function paste(e)
{
    var a=e;
 
    // obtenemos el valor pegado desde la API de clipboard
    var clipboardData = e.clipboardData || window.clipboardData;
    var pastedData = clipboardData.getData('Text');
 
    var patron=new RegExp(/^([a-zA-Z]{2})([0-9]{1,22})?$/);
    if(a.target.value!="" || patron.test(pastedData)===false)
    {
        e.stopPropagation();
        e.preventDefault();
        return;
    }
 
    // Una vez pegado se ejecuta esta funcion
    window.setTimeout(() => {
        a.target.value=redibujar(a.target.value);
    });
}
</script>



Comentarios sobre la versión: Versión 1.0 (1)

Imágen de perfil
20 de Octubre del 2018
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4856