Skip to content

Latest commit

 

History

History
46 lines (35 loc) · 1.08 KB

README.md

File metadata and controls

46 lines (35 loc) · 1.08 KB

React Redux Regex

Création automatique d'input à partir d'un tableau d'objet modifiable.

Exemple :

export const data = [
  {
    name: "username",
    label: "Login",
    placeholder: "username",
    pattern: /^[a-z\d]{5,12}$/i,
    description: "Entre 5 - 12 charactères",
    patternDetail: [
      {
        pattern: /[^a-z\d]/i,
        message: "Uniquement des caractères alphanumériques",
        expected: false,
      },
      {
        pattern: /^.{5,12}$/,
        message: "Entre 5 et 12 caractères",
        expected: true,
      },
    ],
  },
];
  • Les inputs non conformes ont une bordure orange.
  • Les inputs valides ont une bordure verte.

image

le bouton (!) permet d'avoir plus de détail sur les règles qui doivent être respectées pour valider la saisie.

image

Démo Gif

Gif demo

Todo

  • Revoir le responsive