FLUX RSS

  • YouTube
  • LinkedIn
  • Google

Archives pour : JavaScript

Code de validation CPF pour Javascript

O código abaixo é de uma função em Javascript otimizada para ter o menor numero de complexidade ciclomática linhas que consegui baseado na explicação presente no artigo Algoritimo de validação de CPF brasileiro – Cadastro de Pessoa Física. Ele tem uma ligeira alteração no momento do cálculo do segundo digitido verificador. Ao invés de começar pelo segundo algarismo, o codigo começa pelo primeiro e usa o valor 11 como multiplicador. Outra alteração visivel é que para evitar a necessidade de comparação para saber se estamos no nono e decimo digitos, atribuo o valor zero ao ultimo elemento (indice 10) para reduzir mais uma comparação.

O algoritmo utilizado é o método 1 explicado no artigo e há um pequeno truque para evitar a comparação com o resto igual a 10 que é fazer o módulo de 10 do resto.

   // Codigo que valida um CPF informado quanto a validade de seus dígitos verificadores.

const validarCpf = (cpf) => {
  if (cpf.length !== 11) { // Supõe-se já vir filtrado o valor
    return false;
  }
  let elementos = cpf.split(''); // convertendo a string em array
  elementos[10] = 0; // Forçando ao valor da ultima multiplicacao ser zero
  let somaA = 0;
  let somaB = 0;

  elementos.reduce(function(i, valor, indice) {
    let multiplicador = 11 - indice;
    somaB += (valor * multiplicador);
    somaA += (valor * (multiplicador > 2 ? multiplicador - 1 : 0));
  }, somaA);
  let moduloA = ((somaA * 10) % 11) % 10;
  let moduloB = ((somaB * 10) % 11) % 10;
  return cpf.replace(/\d{9}(\d{2})$/g, '$1') == ("" + moduloA + moduloB);
}

Você pode testar esse código Ici.

Tables de données + HTML 5 Boutons d’exportation + Laravel-Mix (Webpack)

Dans les derniers jours, J’ai connu un problème en essayant d’utiliser Tables de données et Bootstrap 4 avec le soutien de l’exportation des résultats Excel et PDF à l’aide Laravel-Mix. Après des heures et des heures à essayer de mettre tous les scripts pour travailler ensemble, Je gagne enfin. Alors, J’ai décider d’écrire ce petit Comment pour ceux qui ont le même genre de troubles.



Continuer la lecture >>

À l’aide de jQueryMask Plugin au format dates dans différents modèles

Masque de Plugin jQuery est une grande bibliothèque Javascript pour les champs de format pour la présentation ou de forcer une entrée correctement par les utilisateurs.

Ici, Je montre comment faire face à l’entrée ou un autre élément HTML pour afficher des dates quand la date de la source a un format différent de l’élément cible.

Exemple de:

  • Nous avons un datetime avec Année-mois-jour heure:Minute:Secondes et le besoin de ne montrer que la Année/mois/jour partie.
  • Nous avons da date Année-mois-jour et il fallait formater à Jour/mois/année.

jQueryMask est très simple à utiliser. Il est inutile de beaucoup pour masquer tout ce que vous devez. Jetez un oeil à exemples sur son site Internet.

Si vous avez besoin pour mettre en forme un champ date simple (même d’un élément non-input), Il suffit d’utiliser le code ci-dessous.

jQuery('[données-rôle ="Date"]).masque("TC99/M9/D9", {
        espace réservé: "____/__/__",
        translation: {
            "D": {modèle: /[0-3]/, en option: faux, récursif: true},
            "M": {modèle: /[01]/, en option: faux, récursif: true},
            "T": {modèle: /[12]/, en option: faux, récursif: true},
            "C": {modèle: /[09]/, en option: faux, récursif: true}
        }
    });

Le code ci-dessus peut masquer et valider des dates dans ANNÉE/MOIS/JOUR format.

Avec une entrée comme

<;input type ="texte" données-rôle ="Date" valeur ="2018-06-11 15:47" />;

changerait sa valeur à 2018/06/11.

Si vous essayez de taper une autre date (après clear, Bien sûr) vous ne pouvez pas commencer par un chiffre différent de 1 ou 2. Cette raison est que notre masque ont une traduction à faire lorsque vous autorisez des caractères. Si le modèle ne correspond pas, le char est effacée.

The meaning of “;TC99/M9/D9; le masque est:

  • Doit commencer par 1 ou 2 (Translation T: /[12]/ ; Format personnalisé)
  • Devez disposer du numéro 0 ou 9 (Traduction C: /[09]/ ; Format personnalisé)
  • Doit avoir un numéro (n’importe quel) (Translation 9 ; Format de base de MaskPlugin)
  • Doit avoir un numéro (n’importe quel) (Translation 9 ; Format de base de MaskPlugin)
  • Une barre oblique s’ajouteront automatique ( / )
  • Devez disposer du numéro 0 ou 1 (Traduction M: /[01]/ ; Format personnalisé)
  • Doit avoir un numéro (n’importe quel) (Translation 9: Format de base de MaskPlugin)
  • Une barre oblique s’ajouteront automatique ( / )
  • Devez disposer du numéro 0, 1, 2 ou 3 (Traduction D: /[0-3]/ ; Format personnalisé)
  • Doit avoir un numéro (n’importe quel) (Translation 9: Format de base de MaskPlugin)

Bien sûr, Il n’y a aucune véritable validation. You can type “;2999/19/39; et ce n’est pas une date valide, mais est presque fini.

Alors, pour mettre en forme une autre manière, Il suffit de changer ordre de paramètre de masque.

Mais, Si la date de la source se trouve dans un modèle différent, comme le jour/mois/année, le masque ne fonctionnent pas. The date output for “;06/11/2018 15:40; will be weird “;1018/15/0;.

Pour gérer les dates différentes formats il faudra plus qu’un masque simple. Nous aurons besoin d’une fonction.

Regardez le code ci-dessous

        var maskBehaviorDateTime = function (Val, et, domaine) { // Cette fonction doit retourner un masque var msk = "TC99/M9/D9"; // Notre format désiré var v = field.is(« entrée ») ? Field.Val() : Field.Text(); // une entrée ou un autre élément html??
                    v = v.replace(/\D/g, ''); // Stripe chiffres non si (v != '') { // a la valeur?
                        If ((/^[01]\d[0-3]\dd{4}$/).test(v)) { //vérifier si le modèle correspond à v seul jour/mois/année = v.replace(/^(\d{4})(\d{2})(\d{2})$/, ' $3 / $2 / $1 ');
                        } sinon si ((/^[01]\d[0-3]\dd{4}[012]\d[0-5]\d$ /).test(v)) { //vérifier si le modèle correspond à l’heure de jour/mois/année:Minute v = v.replace(/^(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})$/, ' $3 / $2 / $1 ');
                            // Si nous devons montrer l’heure et minute, masque retourné doit être changé aussi
                            // v = v.replace(/^(\d{2})(\d{2})(\d{4})(\d{2})(\d{2})$/, ' $3 / $2 / $1 $4:$5');
                            // MSK = ' TC99/M9/D9 h9:M9'; // h et m doivent être existe dans les options de traduction
                        }
                        Field.is(« entrée ») ? Field.Val(v) : Field.Text(v);
                    }
                    retour de msk;
                },
                optionsDateTime = {
                    espace réservé: "____/__/__",
                    translation: {
                        "D": {modèle: /[0-3]/, en option: faux, récursif: true},
                        "M": {modèle: /[01]/, en option: faux, récursif: true},
                        "T": {modèle: /[12]/, en option: faux, récursif: true},
                        "C": {modèle: /[09]/, en option: faux, récursif: true},
                        "h": {modèle: /[0-2]/, en option: true, récursif: true},
                        "m": {modèle: /[0-5]/, en option: true, récursif: true}
                    }
                };
        jQuery('[données-rôle ="Date"]').masque(maskBehaviorDateTime,  optionsDateTime);

Nous avons maintenant deux modèle de traduction plus (h et m). h signifie que la position n-index doit avoir des nombres 0, 1 ou 2 et m nombres entre 0 et 5. N’oubliez pas que l’affaire des questions.

Avec le code ci-dessus, Nous pouvons formater et afficher la date de plusieurs façons. Il suffit de changer .test() et .remplacer() modèle pour remplir votre motif désiré.

C’est le code que j’utilise pour mettre en forme les champs de la base datetime avec l’année-mois-jour heure:MINUTE:DEUXIÈME dans les éléments html avec heure jour/année/mois:MINUTE

    var maskBehaviorDateTime = function (Val, et, domaine) {
            // S’il y a déjà une valeur, les formats dans le jj/mm/aaaa standard avec le hh en option:mm:msk var SS = "TC99/M9/D9 h9:M9:S9";
            If (champ d’attr.("valeur date d’origine") == undefined) {
                var o = field.is(« entrée ») ? Field.Val() : Field.Text();
            } d’autre {
                var attr = champ.("valeur date d’origine");
            }
            v = la. remplacer(/\D/g, '');
            If (v != '') {
                champ d’attr.("valeur date d’origine") == undefined &;&; champ d’attr.("valeur date d’origine", le);
                If ((/^[12][09]\d{2}[01]\d[0123]\d$ /).test(v)) { // année/mois/jour v = v.replace(/^(\d{4})(\d{2})(\d{2})$/, ' $3 / $2 / $1 ');
                    MSK = "D9/M9/TC99";
                } sinon si ((/^[12][09]\d{2}[01]\d[0123]\d[012]\d[0-5]\d$ /).test(v)) { // année/mois/jour heure:minute v = v.replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})$/, ' $3 / $2 / $1 $4:$5');
                    MSK = "D9/M9/TC99 h9:M9";
                } sinon si ((/^[12][09]\d{2}[01]\d[0123]\d[012]\d[0-5]\d[0-5]\d$ /).test(v)) { // année/mois/jour heure:minute:deuxième v = v.replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/, ' $3 / $2 / $1 $4:$5:$6');
                    MSK = "D9/M9/TC99 h9:M9:S9";
                }
                Field.is(« entrée ») ? Field.Val(v) : Field.Text(v);
            }

            retour de msk;
        },
        optionsDateTime = {
            espace réservé: "__/__/____",
            translation: {
                "D": {modèle: /[0-3]/, en option: faux, récursif: true},
                "M": {modèle: /[01]/, en option: faux, récursif: true},
                "T": {modèle: /[12]/, en option: faux, récursif: true},
                "C": {modèle: /[09]/, en option: faux, récursif: true},
                "h": {modèle: /[0-2]/, en option: true, récursif: true},
                "m": {modèle: /[0-5]/, en option: true, récursif: true},
                "s": {modèle: /[0-5]/, en option: true, récursif: true}
            },
        };
    jQuery('[données-rôle ="Date"]').masque(maskBehaviorDateTime,  optionsDateTime);

Avec une entrée comme

<;input type ="texte" données-rôle ="Date" valeur ="2018-06-11 15:40">;

La sortie sera

11/06/2018 15:40

J’espère que cela vous aider!