martes, 8 de junio de 2021

100 días de código Javascript... 7ma parte


Ejemplo. Validar datos con Javascript.
main.js
document.addEventListener("DOMContentLoaded", function(event) {
    
    console.log('Se ha ejecutado código JS');
    const btnActivar = document.getElementById("btnActivar");

    function activarEnvio(){
         alert("Enviando los datos...");
    }


    var tabla1Fila1 = false;
    var tabla1Fila2 = false;
    var tabla1Fila3 = false;

    var tabla2Fila1 = false;
    var tabla2Fila2 = false;
    var tabla2Fila3 = false;
   

    function validarFormulario(){
    var nomProd1 = "";
    var monto1 = "";
    var numContrato1 = "";
    
    if(nomProd1!=""){
      if(nomProd1!=""&&monto1!=""&&numContrato1!=""){
         document.getElementById("infoError1").style.display="none";tabla1Fila1=true;
      }else{
        document.getElementById("prrfError1").style.color="red";
        document.getElementById("prrfError1").innerText="Error: Debe completar todos los datos de la tabla 1 fila 1.";
        document.getElementById("infoError1").style.display="block";
      }
    }else{
        if(monto1!=""&&numContrato1!=""){
           document.getElementById("prrfError1").style.color="red";
           document.getElementById("prrfError1").innerText="Error: Debe completar todos los datos de la tabla 1 fila 1.";
           document.getElementById("infoError1").style.display="block";
        }else{
           document.getElementById("infoError1").style.display="none";tabla1Fila1=true;
        }
    }

    var nomProd2 = "";
    var monto2 = "";
    var numContrato2 = "";

    if(nomProd2!=""){
      if(nomProd2!=""&&monto2!=""&&numContrato2!=""){
         document.getElementById("infoError2").style.display="none";tabla1Fila2=true;
      }else{
        document.getElementById("prrfError2").style.color="red";
        document.getElementById("prrfError2").innerText="Error: Debe completar todos los datos de la tabla 1 fila 2.";
        document.getElementById("infoError2").style.display="block";
      }
    }else{
        if(monto2!=""&&numContrato2!=""){
           document.getElementById("prrfError2").style.color="red";
           document.getElementById("prrfError2").innerText="Error: Debe completar todos los datos de la tabla1 fila 2.";
           document.getElementById("infoError2").style.display="block";
        }else{
           document.getElementById("infoError2").style.display="none";tabla1Fila2=true;
        }
    }

    var nomProd3 = "";
    var monto3 = "";
    var numContrato3 = "";

    if(nomProd3!=""){
      if(nomProd3!=""&&monto3!=""&&numContrato3!=""){
         document.getElementById("infoError3").style.display="none";tabla1Fila3=true;
      }else{
        document.getElementById("prrfError3").style.color="red";
        document.getElementById("prrfError3").innerText="Error: Debe completar todos los datos de la tabla 1 fila 3.";
        document.getElementById("infoError3").style.display="block";
      }
    }else{
        if(monto3!=""&&numContrato3!=""){
           document.getElementById("prrfError3").style.color="red";
           document.getElementById("prrfError3").innerText="Error: Debe completar todos los datos de la tabla 1  fila 3.";
           document.getElementById("infoError3").style.display="block";
        }else{
           document.getElementById("infoError3").style.display="none";tabla1Fila3=true;
        }
    }



   var tv1 = "9";
   var nb1 = "4";
   var nt1 = "7";
   var cp1 = "12";
   var s1 = "1234";
   var pt1 = "1200";

   if(tv1!=""){
      if(tv1!=""&&nb1!=""&&nt1!=""&&cp1!=""&&s1!=""&&pt1!=""){
         document.getElementById("infoError4").style.display="none";tabla2Fila1=true;
      }else{
        document.getElementById("prrfError4").style.color="red";
        document.getElementById("prrfError4").innerText="Error: Debe completar todos los datos de la tabla 2  fila 1.";
        document.getElementById("infoError4").style.display="block";
      }
    }else{
        if(nb1!=""&&nt1!=""&&cp1!=""&&s1!=""&&pt1!=""){
           document.getElementById("prrfError4").style.color="red";
           document.getElementById("prrfError4").innerText="Error: Debe completar todos los datos de la tabla 2 fila 1.";
           document.getElementById("infoError4").style.display="block";
        }else{
           document.getElementById("infoError4").style.display="none";tabla2Fila1=true;
        }
    }


   var tv2 = "B";
   var nb2 = "y";
   var nt2 = "6";
   var cp2 = "99";
   var s2 = "1204";
   var pt2 = "1900";

    if(tv2!=""){
      if(tv2!=""&&nb2!=""&&nt2!=""&&cp2!=""&&s2!=""&&pt2!=""){
         document.getElementById("infoError5").style.display="none";tabla2Fila2=true;
      }else{
        document.getElementById("prrfError5").style.color="red";
        document.getElementById("prrfError5").innerText="Error: Debe completar todos los datos de la tabla 2 fila 2.";
        document.getElementById("infoError5").style.display="block";
      }
    }else{
        if(nb2!=""&&nt2!=""&&cp2!=""&&s2!=""&&pt2!=""){
           document.getElementById("prrfError5").style.color="red";
           document.getElementById("prrfError5").innerText="Error: Debe completar todos los datos de la tabla 2 fila 2.";
           document.getElementById("infoError5").style.display="block";
        }else{
           document.getElementById("infoError5").style.display="none";tabla2Fila2=true;
        }
    }



   var tv3 = "G";
   var nb3 = "8";
   var nt3 = "87";
   var cp3 = "4";
   var s3 = "8";
   var pt3 = "88";


    if(tv3!=""){
      if(tv3!=""&&nb3!=""&&nt3!=""&&cp3!=""&&s3!=""&&pt3!=""){
         document.getElementById("infoError6").style.display="none";tabla2Fila3=true;
      }else{
        document.getElementById("prrfError6").style.color="red";
        document.getElementById("prrfError6").innerText="Error: Debe completar todos los datos de la tabla 2 fila 3.";
        document.getElementById("infoError6").style.display="block";
      }
    }else{
        if(nb3!=""&&nt3!=""&&cp3!=""&&s3!=""&&pt3!=""){
           document.getElementById("prrfError6").style.color="red";
           document.getElementById("prrfError6").innerText="Error: Debe completar todos los datos de la tabla 2 fila 3.";
           document.getElementById("infoError6").style.display="block";
        }else{
           document.getElementById("infoError6").style.display="none";tabla2Fila3=true;
        }
    }
   }



    btnActivar.addEventListener("click", ()=>{
        console.log("Verificar datos");
        validarFormulario();
        if(tabla1Fila1 && tabla1Fila2 && tabla1Fila3 && tabla2Fila1 && tabla2Fila2 && tabla2Fila3){
           document.getElementById("infoFinal").style.display="block";
           document.getElementById("prrfFinal").innerText="Ya no hay errores, listo para enviar datos.";
           document.getElementById("prrfFinal").style.color="blue";
           activarEnvio();
        }else{
           document.getElementById("infoFinal").style.display="block";
           document.getElementById("prrfFinal").innerText="Hay errores, corrigalos por favor";
           document.getElementById("prrfFinal").style.color="red";
        }

    });



});

index.html
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
  <title>Ejemplos en JS</title>
</head>
<script type="text/javascript" src="main.js">
</script>

<style type="text/css">
#infoError1{
  display: none;
}
#prrfError1{
  text-align: center;
}

#infoError2{
  display: none;
}
#prrfError2{
  text-align: center;
}

#infoError3{
  display: none;
}
#prrfError3{
  text-align: center;
}

#infoError4{
  display: none;
}
#prrfError4{
  text-align: center;
}

#infoError5{
  display: none;
}
#prrfError5{
  text-align: center;
}

#infoError6{
  display: none;
}
#prrfError6{
  text-align: center;
}


#infoFinal{
  display: none;
}
#prrfFinal{
  text-align: center;
}




</style>
<body>
  <h1>Programando en JS</h1>
  
  <div id="infoError1">
    <p id="prrfError1"></p>
  </div><br/>
  <div id="infoError2">
    <p id="prrfError2"></p>
  </div><br/>
  <div id="infoError3">
    <p id="prrfError3"></p>
  </div><br/>
  <div id="infoError4">
    <p id="prrfError4"></p>
  </div><br/>
  <div id="infoError5">
    <p id="prrfError5"></p>
  </div><br/>
  <div id="infoError6">
    <p id="prrfError6"></p>
  </div>
   <br/>
   <div id="infoFinal">
    <p id="prrfFinal"></p>
  </div>

  <div id="btnDiv">
  <button id="btnActivar">Verfificar</button>
  </div>
</body>
<html>

Validar RFC:
 <script>
            function rfcValido(rfc, aceptarGenerico = true) {
    const re = /^([A-ZÑ&]{3,4}) ?(?:- ?)?(\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01])) ?(?:- ?)?([A-Z\d]{2})([A\d])$/;
    var validado = rfc.match(re);

    if (!validado)  // Coincide con el formato general del regex?
        return false;

    // Separar el dígito verificador del resto del RFC
    const digitoVerificador = validado.pop(),
        rfcSinDigito = validado.slice(1).join(''),
        len = rfcSinDigito.length,

        // Obtener el digito esperado
        diccionario = "0123456789ABCDEFGHIJKLMN&OPQRSTUVWXYZ Ñ",
        indice = len + 1;
    var suma,
        digitoEsperado;

    if (len == 12) suma = 0
    else suma = 481; // Ajuste para persona moral

    for (var i = 0; i < len; i++)
        suma += diccionario.indexOf(rfcSinDigito.charAt(i)) * (indice - i);
    digitoEsperado = 11 - suma % 11;
    if (digitoEsperado == 11) digitoEsperado = 0;
    else if (digitoEsperado == 10) digitoEsperado = "A";

    // El dígito verificador coincide con el esperado?
    // o es un RFC Genérico (ventas a público general)?
    if ((digitoVerificador != digitoEsperado)
        && (!aceptarGenerico || rfcSinDigito + digitoVerificador != "XAXX010101000"))
        return false;
    else if (!aceptarGenerico && rfcSinDigito + digitoVerificador == "XEXX010101000")
        return false;
    return rfcSinDigito + digitoVerificador;
}


        </script>

Validar RFC
function rfcValido(rfc) {
    var re = /^([ A-ZÑ&]?[A-ZÑ&]{3}) ?(?:- ?)?(\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01])) ?(?:- ?)?([A-Z\d]{2})([A\d])$/,
        validado = rfc.match(re);
	
    if (!validado)  //Coincide con el formato general?
    	return false;
    
    //Separar el dígito verificador del resto del RFC
    var digitoVerificador = validado.pop(),
        rfcSinDigito = validado.slice(1).join('')
        
    //Obtener el digito esperado
    var diccionario  = "0123456789ABCDEFGHIJKLMN&OPQRSTUVWXYZ Ñ",
        lngSuma      = 0.0,
        digitoEsperado;

    if (rfcSinDigito.length == 11) rfc = " " + rfc; //Ajustar a 12
    for(var i=0; i<13; i++)
        lngSuma = lngSuma + diccionario.indexOf(rfcSinDigito.charAt(i)) * (13 - i);
    digitoEsperado = 11 - lngSuma % 11;
    if (digitoEsperado == 11) digitoEsperado = 0;
    if (digitoEsperado == 10) digitoEsperado = "A";
  
	//El dígito verificador coincide con el esperado?
    return digitoVerificador == digitoEsperado;
}
Continuaremos con más post sobre Javascript.

No hay comentarios:

Publicar un comentario

Vibe Coding (la programación vía IA): ¿el futuro de la programación?

Vibe Coding es un nuevo paradigma de programación, una nueva forma de crear código. Es un enfoque emergente en el desarrollo de sof...

Etiquetas

Archivo del blog