JavaScript の React Native に yup をインストールするにはどうすればよいですか?

Yup は、反応ネイティブ アプリケーションにインストールできる NPM パッケージです。単一のオブジェクトに格納されているフォーム値を検証するために使用されます。さらに、Yup を使用して、さまざまなタイプの検証をさまざまなフォーム フィールドに追加できます。

ユーザーはプロジェクト ディレクトリで次のコマンドを実行して、Yup を React Native にインストールできます。

リーリー

ユーザーが Yarn を使用している場合は、次のコマンドを使用できます。

リーリー ＃＃＃文法＃＃＃

ユーザーは、次の構文に従って、反応ネイティブ アプリケーションのフォーム検証に Yup を使用できます。

リーリー

上記の構文では、Yup を使用してスキーマを作成し、validate() メソッドを使用して、スキーマで定義されたルールに基づいて値を検証しました。ここで、 value は、フォームのプロパティ名と値のペアを含むオブジェクトです。

＃＃＃ステップ＃＃＃

ステップ 1

- まず、開発者は必要なコンテンツを Yup からインポートする必要があります。

• ステップ 2
- App() コンポーネントで、Yup を使用して Student_id、age、および Portfolio フィールドのルールを定義する「userFormSchema」を作成します。ここで、student_id は文字列で必須フィールド、age は正の整数で必須フィールド、portfolio は Web サイトの URL です。

• ステップ 3
- 次に、「useState」フックを使用して、学生情報と検証メッセージのステータスを定義します。

• ステップ 4
- キーと値をパラメータとして受け取り、「initialValue」状態オブジェクトの値を更新する handleChange() 関数を定義します。

• ステップ 5 - 次に、validateValues() 関数を定義します。この関数は、フォーム値を検証するための参照として userFormSchema を渡し、パラメータとして StudentInfo オブジェクトを渡すことによって validate() メソッドを使用します。

• ステップ 6
- フォーム値の検証に基づいて、メッセージを「メッセージ」ステータスに設定します。

• 例 1

以下の例では、学生の情報を収集するフォームを作成します。 Student_id、年齢、ポートフォリオ Web サイトの URL を取得するための 3 つの入力フィールドを追加しました。さらに、送信ボタンも作成しました。

ユーザーが送信ボタンをクリックするたびに、 validateValues() 関数が呼び出され、画面に検証メッセージが表示されます。

リーリー ＃＃＃出力＃＃＃＃＃＃＃＃＃＃＃＃

例 2

次の例は、上記の例の高度なバージョンです。ここには、ユーザー名、電子メール、パスワードを含む 3 つの入力フィールドがあります。

さらに、Yup を使用してフォームを検証する userFormSchema も作成しました。ここでは、名前の長さが少なくとも 3 文字である必要があり、常に必須になるようにルールを定義します。電子メールは形式に従っており、常に必須であり、パスワードの長さは少なくとも 6 文字である必要があります。

さらに、入力フィールドとエラー メッセージにいくつかのスタイルを提供しました。ユーザーが送信ボタンをクリックすると、handleFormSubmit() 関数が呼び出され、validateValues() 関数を呼び出して検証結果を取得します。フォーム検証に基づいて出力メッセージを表示します。 リーリー ＃＃＃出力＃＃＃＃＃＃＃＃＃＃＃＃

ユーザーはフォーム検証にYupとReact-Nativeを使用することを学びました。開発者は、カスタム フォーム検証コードを記述する代わりに、Yup のようなライブラリを使用できるため、コードがより読みやすく、よりシンプルになります。

以上がJavaScript の React Native に yup をインストールするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。