useUsernameValidation

useUsernameValidation(
  username: string,
  options?: { includeInErrors?: boolean },
): UsernameValidationResult

useUsernameValidation · UsernameValidationResult

Hook React permettant de valider un nom d’utilisateur selon la stratégie actuelle de noms d’utilisateur d’Auth0.

Ce hook vérifie le nom d’utilisateur fourni en fonction de toutes les règles de validation configurées et renvoie un résultat structuré indiquant s’il est valide. Au besoin, il peut aussi transmettre les erreurs de validation au gestionnaire global d’erreurs afin que les composants d’interface qui surveillent le champ username puissent les afficher automatiquement ou y réagir.

​

Fonctionnalités clés

• Validation tenant compte de la stratégie — vérifie le nom d’utilisateur selon les règles configurées de la stratégie de noms d’utilisateur Auth0 du locataire.
• Intégration au gestionnaire d’erreurs — peut exposer automatiquement les échecs de validation aux composants d’erreur du formulaire.
• Recalcul optimisé — ne recalcule que lorsque username ou options.includeInErrors changent.

​

Paramètres

username · string

La chaîne de caractères du nom d’utilisateur à valider.

options · { includeInErrors?: boolean }

Configuration facultative du hook.

Afficher propriétés

includeInErrors · boolean

Lorsque true, les erreurs de validation sont stockées dans le gestionnaire global d’erreurs sous le champ username. La valeur par défaut est false.

​

Valeur de retour

UsernameValidationResult

Objet UsernameValidationResult contenant :

• isValid — true si le nom d’utilisateur respecte toutes les règles configurées.
• errors — un tableau d’erreurs de validation par règle avec code, message et isValid.

​

Écrans pris en charge

• signup
• signup-id

Example

import { useUsernameValidation } from "@auth0/auth0-acul-react/signup";

export function UsernameField() {
  const { isValid, errors } = useUsernameValidation(username, { includeInErrors: true });

  return (
    <div>
      <input
        value={username}
        onChange={e => setUsername(e.target.value)}
        aria-invalid={!isValid}
      />

      {!isValid && (
        <ul>
          {errors.map(err => (
            <li key={err.code}>{err.message}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

​

Remarques

• Lorsque includeInErrors est activé, le hook met automatiquement à jour les erreurs dans le magasin d’erreurs, lequel peut être utilisé par le hook useErrors.
• Le hook ne recalcule que lorsque username ou options.includeInErrors changent.
• Appelez useUsernameValidation au niveau supérieur de votre composant; ne l’appelez pas de façon conditionnelle ni à l’intérieur des gestionnaires d’événements.
• Le chemin d’importation doit correspondre à l’écran — utilisez signup ou signup-id, selon le cas.