Vueは小さなフォーム検証機能を実装します

Vueは小さなフォーム検証機能を実装します

この記事では、フォーム検証を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は次のとおりです。

1. ルートジャンプ

まず、Vueプロジェクトのsrcディレクトリを開いてルーターファイルを設定し、importを使用してフォームページ名を公開し、ルーターインスタンスにルーティングテーブルを登録します。コードは次のとおりです。

「@/views/create/create.vue」からCreateをインポートします。

//公開される名前の最初の文字は大文字にする必要があります。以下はフォームページが配置されているディレクトリです @ は .. の略語で、前のレベルに戻ることを意味します const router = new Router ({
mode:"history"//これはルートモードです。routes:[
{
      パス: "/create", //デフォルトは/です。パスが複数ある場合は、/にパス名を加えたものになります: "create",
      コンポーネント: 作成、
      タイトル: 「フォーム」、
    },
]
})

ルーティング テーブルが設定されたら、ホームページの router-link タグの to オプションを設定することを忘れないでください。

<router-link :to="{ name: 'create' }" class="collection">フォーム</router-link>

次にフォームページ

レンダリング

関数の実装コードは以下のとおりです。

プラグインはelement.uiを使用します。ターミナルでnpm i element-uiを使用できます。インストールが成功したら、package.jsonで確認し、main.jsで参照します。

インストールが完了したら、使用できます。

<テンプレート>
  <div class="create">
    <h2>新しいレシピの公開を歓迎します。まずはあなたの傑作を紹介してください。 </h2>
    <セクション class="create-introduce">
      <h5>タイトル</h5>
 
      <el-入力
        v-model="backData.title"
        クラス="create-input"
        placeholder="コンテンツを入力してください"
      </el-input> ...
      <h5>属性</h5>
      <div>
        <el-選択
          v-for="プロパティ内の項目"
          :key="アイテム.親名"
          :placeholder="アイテム.親名"
          v-model="backData.property[item.title]"
        >
          <el-オプション
            v-for="item.list 内のオプション"
            :key="オプションタイプ"
            :label="オプション名"
            :value="オプションタイプ"
          >
          </el-option>
        </el-select>
      </div>
      <h5>レシピのカテゴリー</h5>
      <div>
        <el-select placeholder="レシピのカテゴリーを選択してください" v-model="backData.classify">
          <el-オプショングループ
            v-for="group in classifies"
            :key="グループ.親タイプ"
            :label="グループ.親名"
          >
            <el-オプション
              v-for="group.list 内の項目"
              :key="アイテムタイプ"
              :label="アイテム名"
              :value="アイテムタイプ"
            >
            </el-option>
          </el-option-group>
        </el-select>
      </div>
      <h5>完成品画像(328*440)</h5>
      <div class="アップロード-img-box クリアフィックス">
        <div class="アップロード-img">
          <アップロード画像
            アクション="/api/upload?type=product"
            :img-url="backData.product_pic_url"
            @res-url="
              (データ) => {
                バックデータ、(product_pic_url = data.res);
              }
            「
          </アップロード-画像>
        </div>
        <el-入力
          クラス="テキストの紹介"
          タイプ="テキストエリア"
          :行数="10"
          placeholder="コンテンツを入力してください"
        >
        </el-input>
      </div>
    </セクション>
 
    <h2>すべての原材料を記録する</h2>
    <セクション class="create-introduce">
      <h5>主な原材料</h5>
      <!--[ { "名前": "", "仕様": "" }, { "名前": "", "仕様": "" }, { "名前": "", "仕様": "" } ]-->
      <スタッフ v-model="backData.raw_material.main_material"></スタッフ>
      <h5>アクセサリー</h5>
      <スタッフ v-model="backData.raw_material.accessories_material"></スタッフ>
    </セクション>
 
    <h2>手順を書き始めましょう!習得しやすいかどうかは、書き方次第です。頑張ってください! </h2>
    <セクション class="create-introduce">
      <アップロード v-for="(item, index) in 3" :key="index"></アップロード>
      <el-ボタン
        class="eaeaeae ステップ追加ボタン"
        タイプ="プライマリ"
        サイズ="中"
        アイコン="el-icon-plus"
        @click="追加"
        >ステップを1つ追加</el-button
      >
      <h5>調理のヒント</h5>
      <el-入力
        クラス="テキストの紹介"
        タイプ="テキストエリア"
        :行数="8"
        placeholder="この料理を作る際の経験とヒントを共有してください!"
      >
      </el-input>
    </セクション>
 
    <el-button class="send" type="primary" size="medium" :icon="icon"
      >完了、レビューのために送信</el-button
    >
  </div>
</テンプレート>
<スクリプト>
「./stuff」からStuffをインポートします。
「./step-upload」からアップロードをインポートします。
「@/components/upload-img」からUploadImgをインポートします。
「@/service/api」から { getProperty、getClassify、publish } をインポートします。
 
定数raw_materia_struct = {
  名前: ""、
  仕様: "",
};
エクスポートデフォルト{
  名前: "作成",
  コンポーネント: { Stuff、Upload、UploadImg },
  データ() {
    戻る {
      バックデータ: {
        タイトル: ""、
        財産: {}、
        分類: "",
        製品画像URL: "",
        製品ストーリー: "",
        原材料: {
          原材料: 配列(3)
            .fill(1)
            .map(() => ({ ...raw_materia_struct })),
          アクセサリー素材: 配列(3)
            .fill(1)
            .map(() => ({ ...raw_materia_struct })),
        },
      },
      プロパティ: [],
      分類: [],
    };
  },
  マウント() {
    getProperty().then(({データ}) => {
      コンソールにログ出力します。
      this.property = データ;
      this.backData.property = data.reduce((o, item) => {
        o[item.title] = "";
        o を返します。
      }, {});
      // コンソールログ(データ);
      // console.log(this.backData.property)
    });
    getClassify().then(({データ}) => {
      コンソールにログ出力します。
      this.classifies = データ;
    });
  },
  メソッド: {
    追加() {
      コンソールログ(1);
    },
  },
};
</スクリプト>
<style lang="スタイラス">
 
 
.create-introduce
  背景色 #fff
  パディング 20px
 
 
  .ステップ追加ボタン
    左余白 100px
 
 
。作成する
  幅 100%
  h2
    テキストを中央揃えにする
    マージン 20px 0
  。送信
    // ff3232()
    高さ: 70px;
    幅: 220ピクセル;
    背景 #ff3232
    色 #fff
    境界なし
    マージン 20px 自動
    表示ブロック
 
  h5
    マージン 20px 0
 
 
.create-input 入力
  幅446ピクセル
  行の高さ 22px
.アップロード-画像ボックス
  .アップロード画像
    左に浮かぶ
  .テキストの紹介
    左に浮かぶ
  .el-テキストエリア
    幅 60%
    左余白 10px
</スタイル>

以上が Vue フォームに関する説明です。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue フォーム検証のやり方を本当に知っていますか? vue フォーム検証 (フォーム) 検証
  • Vueフォーム検証プラグインであるVue Validatorの使い方の詳細な説明
  • Vue ElementUI のフォーム検証で発生した問題
  • Vue+elementUI はフォームと画像のアップロードおよび検証機能の例を実装します
  • Vue で Element コンポーネントを使用する場合の v-for ループでのフォーム項目検証方法
  • Vueはユニバーサルフォーム検証機能を迅速に実装します
  • Vue elementui フォーム検証の実装
  • Vueはフォーム検証を実装するためにelement-uiを使用します
  • Vueはフォーム検証機能を実装します
  • Vueはフィールド検証を個別に削除するフォームを実装します

<<:  docker を使用してシンプルな C/C++ プログラムをデプロイする方法

>>:  mysqlはエクスポートされたデータのsqlファイルから指定されたテーブルのみをインポートすることを実装します

推薦する

Dockerとイメージの操作方法

ミラーを探すDocker Hubのウェブサイトからイメージを検索できます。Docker Hubのウェ...

nginx を使用して wgcloud へのアクセスを構成する方法

nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...

Linux で MySQL をインストールして設定する

システム: Ubuntu 16.04LTS 1\公式サイトからmysql-5.7.18-linux-...

Dockerイメージの作成Dockerfileとコミット操作

イメージを構築するイメージを構築するには、主に 2 つの方法があります。実行中のコンテナをイメージに...

HiveメタデータをMySQLに設定するプロセス全体

Hiveのインストールディレクトリで、confディレクトリに入り、hive-site.xmlファイル...

CSS で透明なグラデーション効果を実装するためのサンプルコード

Zhihu Discovery コラムのタイトル画像は、通常、以下のように表示されます。明らかに、グ...

MySQL フルテキスト検索の中国語ソリューションとサンプルコード

MySQL 全文検索中国語ソリューション最近、会社のプロジェクトで、データベースで中国語を検索する機...

Vue3 Vue イベント処理ガイド

目次1. 基本的なイベント処理2. 親コンポーネントにカスタムイベントを送信するマウス修飾子4. キ...

ユーザーエクスペリエンスの要素またはWebデザインの要素

システムとユーザー環境の設計<br />Apple システムの成功は、そのシステム アー...

nginx で SSL 証明書を設定して https サービスを実装する方法

前回の記事では、openssl を使用して無料の証明書を生成した後、この証明書を使用してローカル ノ...

時間を節約できる Linux コマンド エイリアス 15 個

序文Linux システムの管理と保守のプロセスでは、多数のコマンドが使用されます。非常に長いコマンド...

mysqlサーバーは--skip-grant-tablesオプションで実行されています

MySQLサーバーは--skip-grant-tablesオプションで実行されているため、このステー...

vuex で履歴を実装するためのサンプルコード

私は最近、ユーザー操作を元に戻す、またはやり直す機能を備えたビジュアル操作プラットフォームを開発して...

nginx を使用したプロキシ サーバーの設定

Nginx は、リバース プロキシ機能を使用して負荷分散を実装できるほか、フォワード プロキシ機能を...

ページ要素の絶対位置と相対位置に関するある程度の理解

今日から、定期的にちょっとした豆知識を整理していきます。簡単なものもあるかもしれませんが、どれも役に...