useUsernameValidation

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

useUsernameValidation · UsernameValidationResult

現在の Auth0 のユーザー名ポリシーに照らしてユーザー名を検証するための React フックです。

このフックは、指定されたユーザー名を設定済みのすべてのバリデーションルールに照らしてチェックし、 条件を満たしているかどうかを示す構造化された結果を返します。 必要に応じて、バリデーションエラーをグローバルエラーマネージャーに送信できるため、 username フィールドを監視している UI コンポーネントで、これらのエラーを自動的に表示したり、 エラーに応じた動作を行ったりできます。

​

主な機能

• ポリシーに応じたバリデーション — ユーザー名を、テナントで設定されている Auth0 のユーザー名ポリシールールに照らしてチェックします。
• エラーマネージャーとの連携 — 必要に応じて、バリデーション失敗をフォームエラーコンポーネントに自動的に反映できます。
• 最適化された再計算 — username または options.includeInErrors が変更された場合にのみ再計算します。

​

パラメーター

username · string

検証するユーザー名の文字列です。

options · { includeInErrors?: boolean }

フックの任意の設定です。

表示 properties

includeInErrors · boolean

true の場合、バリデーションエラーはグローバルエラーマネージャーの username フィールドに保存されます。既定値は false です。

​

戻り値

UsernameValidationResult

次を含む UsernameValidationResult オブジェクトです。

• isValid — ユーザー名が設定済みのすべてのルールを満たしている場合は true。
• errors — 各ルールごとのバリデーションエラーの array で、code、message、isValid を含みます。

​

サポート対象の画面

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

​

注意事項

• includeInErrors を有効にすると、このフックはエラーを error-store に自動的に反映し、useErrors フックで利用できるようにします。
• このフックは、username または options.includeInErrors が変更された場合にのみ再計算します。
• useUsernameValidation はコンポーネントのトップレベルで呼び出してください。条件付きやイベントハンドラー内では呼び出さないでください。
• インポートパスは画面と一致している必要があります。必要に応じて signup または signup-id を使用してください。