スクリプトのお勉強

Nuxt.jsのFormで入力/確認/完了フォームを作成してみた(その2)

投稿日:

前回の記事の続きです。以下について書いていきます。この記事で終わりのはず?

  • バリデーション機能(主にIPアドレスのバリデーション追加)
  • 画面

バリデーション機能

バリデーション機能は、vee-validateを使用しています。
使い方は以下の通りです。

Nuxt plugins

Nuxtのプラグインとして、以下のように設定しました。以下には”ipaddr”を指定してIPアドレスをバリデーションするためにextend(“ipaddr”)を追加しています。

$ cat plugins/vee-validate.js
import Vue from 'vue'
import {
  extend,
  ValidationProvider,
  ValidationObserver,
  localize
} from 'vee-validate'
import ja from 'vee-validate/dist/locale/ja.json'
import { required, email, max } from 'vee-validate/dist/rules'

extend('required', required)
extend('email', email)
extend('max', max)
// see: https://teratail.com/questions/231233
import isIP from 'validator/lib/isIP';
const validate_ip = value => isIP(String(value));

extend("ipaddr", {
        params: [],
          validate: (value) => {
          if (validate_ip(value)) {
            return true;
          }
          return false;
        },
        message:
          "IPAddress must be valid"
        }
);

Vue.component('validation-provider', ValidationProvider)
Vue.component('validation-observer', ValidationObserver)

localize('ja', ja)

ValidationObserver/ValidationProvider

実際のバリデーションは以下のように設定します。以下はIPアドレスの例です。
ValidationObserverタグの中に、ValidationProviderタグをしているすることでバリデーションします。
“ipaddr”は上記のplugins/vee-validate.js内の指定を使用しています。

<validation-observer ref="validationObserver" tag="div">
<validation-provider v-slot="{ errors }" rules="required|ipaddr" name="ipaddr" >
          <v-text-field
            v-model="edituser.ipaddress"
            label="IPアドレス"
            :error-messages="errors"
          />
        </validation-provider>

....
methods: {
  async submit (edituser) {
    const isValid = await this.$refs.validationObserver.validate();
    if (!isValid) return false;
    this.$router.push({ name: 'confirmuser', params: { user: edituser }})
  },
}

間違ったIPアドレスを指定すると、以下のようにエラーになります。

画面

以下に画面を貼っていきます。

一覧画面

一覧は、v-data-tableコンポーネントを使用しています。

<v-data-table
   :headers="headers"
   :items="users"
   :items-per-page="10"
   :search="search"
   class="elevation-1"

編集画面

フォームは、v-text-fieldを使用しています。

確認画面

完了画面

一覧画面(変更後)

変更後の一覧は以下の通りです。1の名前が変更されていることが分かります。

-スクリプトのお勉強

執筆者:

関連記事

Vue.jsをbetter jQueryとして使う!FastAPI+Vue.jsと生成AIで作る住所録アプリ

昔あるところに。。 昔、jquery全盛で、Vue.jsが出てきたすぐに「これはjqueryを駆逐できるかも」と思ってjqueryの実装をVue.jsに変えようとしたことがあります。 結局全部を変えた …

Djangoアプリサンプル – 画像ファイルアップロード + 顔モザイク(画像アップロード編)

仕事で使用している、Djangoについて、サンプルを作成してみようと思います。ここでは、画像ファイルのアップロードと顔モザイクを行うwebアプリを作成してみようと思います。 この記事ではファイルアップ …

ワンライナーから使いそうなのを抜粋

ワンライナー多すぎ、、 https://linuxcommandlibrary.com/basic/oneliners は膨大なワンライナーがあっていいのですが、多すぎて、何が使えるかぱっと見分かりま …

Markdown to HTML(grip)

1.はじめに 最近の文書はほとんどMarkdownで書くのですが、それをHTMLに変換する方法を調べました。 ただし、私がMarkdownと思っている文法は「github-flavored-markd …

Pythonでコマンド非同期起動

はじめに 小ネタです。 作成するプログラムの要件で、コマンドを起動して、そのコマンドが「継続」している/していないことを確認する、という要件があります。 具体的には、pingコマンドを普通に打つと、コ …

google オプトアウト Click here to opt-out.