スクリプトのお勉強

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の名前が変更されていることが分かります。

-スクリプトのお勉強

執筆者:

関連記事

unconstant – perlライブラリ

ちょっとだけperlの機能修正をしたので、そのときに使用したライブラリについて書こうと思います。 perlのunconstant です。 use constantの解除 use constantとは固 …

Thunderbird プラグインの開発(プラグインでの実現方法)

前回 Thunderbird プラグインの WebExtension版開発方法を調べたので、開発したいプラグインと、WebExtension版プラグインでの実現方法について書いていきます。 開発するプ …

fastapi + SQLAlchemy で CRUDアプリケーションを作ってみる

概要 勉強用に、PythonでPostgresqlを制御しようと思います。の続きです。 前回でPostgreSQLと、データベース/テーブルまでは用意したので、今回はAPIを作成しようと思います。 実 …

CentOS7をRocky Linux 9に移行する

このVMのOSをCentOS7にした関係上、そろそろupdateする必要があります。そもそもCentOS7を選択した理由は、仕事で使用するからでした。 で、仕事ではRocky Linux 9なので、こ …

(小ネタ) python3 date_range + step付き

ちょっと前に同じような感じのネタを。。 したような気がするのだが、まぉおいておこう。。 素のPython3で、日付にてfor文を回す方法 日付で分割して処理をしたいと思うときがあります。例えば、202 …

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