Dashcomb Help Center
  • 初めてのDashcomb体験
  • IDE画面と利用者画面
  • IDE画面の使い方
    • IDE画面のメニュー構成
      • ユーザーメニュー
      • コンポーネント
      • インスペクター
    • View-Section-Componentの関係
    • UI Compoment
      • Button
      • Input
      • Textarea
      • Label
      • Markdown
      • Select
      • Radio
      • Checkbox
      • Switch
      • Date Picker
      • Time Picker
      • Table
      • Image
      • Uploader
      • Importer
      • Divider
    • BI Component
      • 棒グラフ
      • 折り線グラフ
      • 円グラフ
    • Layout component
      • Section
      • Row
    • 連携機能パネル
      • DBクエリ
      • API
      • クラウドストレージ
      • オートメーション
      • JavaScript
    • プロパティパネル
      • アクションエディタ
      • コラムエディタ
      • テキスト/コードエディタ
    • オブジェクトやデータの参照
    • Edit Lock機能
    • その他のメニュー
      • バッチ処理
      • データソース
        • データベースと接続する
        • API と接続する
        • クラウドストレージと接続する
      • 権限グループ
      • バージョン管理
      • 設定
      • 料金と支払
  • 利用者画面の使い方
    • 画面領域の紹介
  • 管理画面の逆引きレシピ
    • ユーザー入力を検証する方法
    • ユーザーがCSVファイルやJSONファイルをデータベースにインポートできるようにする
    • データを視覚化し、簡単に洞察を得る
    • 承認ワークフローで、データの正確性と責任の所在を確保する
    • DashcombのSQL AIアシスタントで、自然言語でSQLクエリを素早く書く
    • データベース経由のCRUD操作の実現方法
    • 画面遷移の実現方法
    • API経由のCRUD操作の実現方法
    • APIのリクエストに複雑なデータを入れる
    • 簡単なCDNのファイル管理
    • Tableの数字をフォーマット
    • Tableに画像を表示
    • Data Sourceを追加
    • 画面にDBクエリの追加
    • 画面にクラウドストレージの追加
    • CSV/JSONデータのインポートとダウンロード
    • 承認フローを作成
    • Firebase連携したい
    • 踏み台サーバーを作る
    • 画像をS3, GCSにアップロード
    • Tableの行ごとの選択に応じて内容を変える
    • 動作成功後、失敗後自動的に次の動作を発火する
    • APIの認証情報を設定する
    • ひらがなのみ・カタカナのみのバリデーション
    • ページ読み込み時に実行する処理を設定する
    • ラベル文字をJavaScriptで設定
    • selectedOptionの属性をJSで取得する
GitBook提供
このページ内
  • 入力コンポーネントの構成
  • 検証の実行タイミングの設定
  1. 管理画面の逆引きレシピ

ユーザー入力を検証する方法

前へ画面領域の紹介次へユーザーがCSVファイルやJSONファイルをデータベースにインポートできるようにする

最終更新 2 年前

ソフトウェアアプリケーションを構築する際に、特にユーザーからデータを収集するアプリケーションでは、入力内容の検証は重要な要素です。ユーザーデータを受け入れる際には、事前に定義されたルールや制約に準拠しているかどうかを確認する方が安全です。ユーザー入力を検証することにより、開発者は収集されたデータが正確で一貫性があり、安全に使用できることを保証できます。

Dashcombは、各入力コンポーネントに構成可能な検証機能を提供しています。これらの検証は、入力が変更されるたびに自動的に実行されます。さらに、ダッシュボードの開発者は、クエリが実行される前に検証を実行することを選択できます。これにより、データエラーや一貫性の問題に対する追加の保護層が提供され、データがデータベースに挿入される前に有効であることを確認できます。

入力コンポーネントの構成

まず、検証を構成する入力コンポーネントを選択してください。ダッシュボードでコンポーネントをクリックすることでこれを行えます。入力コンポーネントを選択したら、サイドバーにある「共通」セクションを見て、「入力必須」オプションを探してください。これは最も基本的な検証タイプです。「入力必須」がオンに設定されている場合、ユーザーが値を入力しなかった場合にエラーメッセージが表示されます。

Dashcombは、データのタイプに応じて、よりカスタマイズされた検証オプションも提供しています。右サイドバーの下部にある「入力種別」セクションを見て、「パターン」を期待するデータに合わせて変更してください(たとえば、数値、URL、電子メール)。選択したタイプに基づいて、Dashcombは追加オプション(最小値や最大値など)を提供し、電子メールアドレスやURLが正しいかどうかを自動的にチェックします。

指定されたルールに合致しないデータがある場合、ユーザーにエラーメッセージが表示されます。

検証の実行タイミングの設定

ユーザーが入力値を変更した後に検証を実行するだけでなく、ダッシュボードの開発者はクエリがトリガーされたときに検証を実行するように選択できます。これにより、データがデータベースに挿入される前にデータが有効であることが保証されます。

  1. 実行するアクションの設定を開きます。たとえば、データをデータベースに挿入するフォームを送信するボタンがあるかもしれません。ボタンコンポーネントを選択し、右側のサイドバーで「onClick」アクションを設定します。

  2. 「タイプ」を「クエリ実行」に変更します。「バリデーション」セクションが表示されます。

  3. 「検証」セレクタを「セクション」または「全体」に変更します。「セクション」を選択すると、同じセクションコンポーネント内のコンポーネントのみが検証されます。「全体」を選択すると、現在のダッシュボード内のすべてのコンポーネントが検証されます。

  4. コンポーネントのいずれかが検証に失敗した場合、ダッシュボードのUI内にエラーが表示され、クエリは実行されません。

Dashcombの入力検証機能は、ダッシュボードのデータの正確性と信頼性を確保するための強力なツールです。Dashcombの機能により、ダッシュボードの開発者は各入力コンポーネントのデータ検証ルールを簡単に設定し、どのクエリが検証をパスする必要があるかを指定できます。不正なデータがデータベースに到達するのを防ぐことで、開発者はデータとダッシュボードの完全性を保護できます。

\