FLUX RSS

  • YouTube
  • LinkedIn
  • Google

Archives pour : JavaScript

Code de validation CPF pour Javascript

Le code ci-dessous provient d’une fonction Javascript optimisée pour avoir le moins de Complexité cyclomatique Lignes que j’ai obtenues sur la base de l’explication dans l’article Algorithme brésilien de validation CPF – Registre des contribuables individuels. Il y a un léger changement dans le moment du calcul du deuxième vérificateur numérisé. Au lieu de commencer par le deuxième chiffre, Le code commence par le premier et utilise la valeur 11 comme multiplicateur. Un autre changement visible est que pour éviter d’avoir à comparer pour savoir si nous sommes dans les neuvième et dixième chiffres, J’assigne la valeur zéro au dernier élément (index 10) Pour affiner une autre comparaison.

L’algorithme utilisé est l’algorithme 1 expliqué dans l’article et il y a une petite astuce pour éviter de le comparer avec le reste de la même 10 qui est de faire en sorte que le module 10 du reste.

   // 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);
}

Vous pouvez tester ce code 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!