タグ

2023年8月21日のブックマーク (2件)

  • Vue3でフォームバリデーションのVee-Validate 4の基礎を理解 | アールエフェクト

    Vue.jsに限らずアプリケーションに入力フォームを追加した場合には必バリデーション機能を実装する必要があります。バリデーションはユーザが入力フォームから入力した値がアプリケーションの要件を満たしているかチェックを行う仕組みです。例えばネット上のサービスを利用する場合にはメールアドレスの入力を求められます。入力後にメールアドレスの形式になっているかどうかチェックを行うのがバリデーションです。 フォームバリデーションには入力値をチェックするだけではなくエラーメッセージの管理、入力したデータの管理、submit処理(サーバに)など含まれ、すべて自分で実装しようとすると非常に大変な作業になります。vee-validateなどのライブラリの力を借りることでフォーム作成の負担を下がることができフォーム以外の処理に時間をかけることができます。ライブラリを利用することで自分で実装することに比べて楽にはな

    Vue3でフォームバリデーションのVee-Validate 4の基礎を理解 | アールエフェクト
  • vee-validateをvue3で使ってみる

    参考サイト https://vee-validate.logaretm.com/v4/guide/overview https://github.com/logaretm/vuejslive-2021-vee-validate-workshop/tree/main/src/Examples https://github.com/jquense/yup install npm i vee-validate@next --save フィールドレベルのバリデーション 検証フィールドごとにバリデーションする Field, Form, ErrorMessage コンポネントをインポート Field:検証するフィールドのコンポネント Form: フォームのコンポネント ErrorMessage: エラーメッセージを出すコンポネント name フィールドを作成 type 属性をテキスト(デフォルト) i