メインコンテンツへスキップ
​
useUsernameValidation(username, options?)
useUsernameValidation(username, options?): UsernameValidationResult
現在の Auth0 のユーザー名ポリシーに対して username を検証するための React フックです。このフックは、指定された username を構成済みのすべての検証ルールに対してチェックし、 通過したかどうかを示す構造化された結果を返します。 オプションで、検証エラーをグローバルエラーマネージャーに送信できるため、 username フィールドを監視している UI コンポーネントが、それらのエラーを自動的に表示したり 処理したりできます。

​
Parameters

​
username
string
検証対象のユーザー名文字列。
​
options?
​
includeInErrors?
boolean
true の場合、検証エラーは username フィールドのエントリとしてグローバルエラーマネージャーに保存されます。デフォルトは false です。

​
Returns

UsernameValidationResult次の内容を持つ UsernameValidationResult オブジェクト:
  • isValid — ユーザー名が構成済みのすべてのルールを満たしている場合は true。
  • errors — code、message、isValid を含む、ルールごとの検証エラーの配列。

​
Supported Screens

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

​
Remarks

  • includeInErrors が有効な場合、このフックはエラーストア内のエラーを自動的に更新し、それを useErrors フックから利用できます。
  • このフックは、username または options.includeInErrors が変化した場合にのみ再計算されます。