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ファイルから指定されたテーブルのみをインポートすることを実装します

推薦する

Window.nameはクロスドメインデータ転送の問題を解決します

<br />原文: http://research.microsoft.com/~hel...

Dockerコンテナは定期的にデータベースをバックアップし、指定されたメールボックスに送信します(設計アイデア)

目次1. 背景: 2. デザインのアイデア: 3. 起動スクリプトを書く4. イメージを構築する5....

便利で使いやすいウェブアプリケーションを設計するための 10 のヒント

より使いやすい Web アプリケーションを設計するための 10 のヒントをご紹介します。ヒント1: ...

jsでユーザー登録機能を実装する

この記事の例では、ユーザー登録機能を実装するためのjsの具体的なコードを参考までに共有しています。具...

より人気がありクリエイティブなダーク背景のウェブデザインの例

暗い背景スタイルのページ デザインは非常に人気があり、シックでエレガント、そして非常にクリエイティブ...

Linux で Ceph 分散ソフトウェアをインストールして使用する方法に関するチュートリアル

目次序文1. 基本環境1. サービス配信2. ネットワーク構成(全ノード) 3. SSHパスワードフ...

overflow:hidden の役割の詳細な説明 (オーバーフローの非表示、フロートのクリア、マージンの崩壊の解決)

1. オーバーフロー:非表示 オーバーフロー非表示要素に overflow:hidden が設定さ...

Linux システムで IPv6 をサポートするように Nginx を設定する方法

1. 既存のnginxがipv6をサポートしているかどうかを確認する既存の nginx が ipv6...

Vue命令の実装原理の分析

目次1. 基本的な使い方2. 指示の動作原理2.1. 初期化2.2 テンプレートのコンパイル2.3....

ウェブサイトデザインにおいて非常に重要な概念であるdiv+floatの分析

ウェブサイトの構築では、HTML と CSS に関するさまざまな問題に常に遭遇します。ウェブサイト ...

lastInfdexOf 関数の MySQL 実装例

MySQL では lastIndexOf に似た関数を使用する必要がある場合もありますが、すぐに使用...

Tomcat メモリ オーバーフロー問題の解決経験

少し前に、製品バージョンをテスト用にテスターに​​提出したのですが、テスト結果はまったく予想外のもの...

JQueryセレクターの詳細な説明

目次基本的なセレクター:レベルセレクター:属性セレクター:フィルターセレクター:フォーム属性セレクタ...

CSS3を使用してプログレスバー効果を実現し、動的にパーセンテージを追加する

プロジェクト中、プログレスバーを実装するために js の requestAnimationFrame...

Javascript配列の重複排除のいくつかの方法の詳細な説明

目次アレイ重複排除1 2層forループ(バブルソートの2層ループ記述に類似) 2 ループとインデック...