Posted in nuxt

[Nuxt] パラメータの取得とバリデート

   Published Date: 2020年5月20日

NuxtでURLのパラメータを取得し、それをバリデートしてみます。
http://www.example.com/posts/1
http://www.example.com/posts/test
のようにアクセスした場合に数字の場合は表示、文字列の場合はエラーを返すようにします。

Nuxtプロジェクトに以下のファイルを追加して、下記のソースを記載します。
「pages/posts/sample.vue」

<template>
  <div>
    <h2>{{ message }}</h2>
    <p>id: {{ this.$route.params.id }}</p>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      message: 'パラメータの取得とバリデート',
    };
  },
  validate({ params }) {
    return /^\d+$/.test(params.id)
  },
};
</script>

http://www.example.com/posts/sample/1
でアクセスするとページに idが表示されます。

http://www.example.com/posts/sample/test
でアクセスすると「This page could not be found」が表示されます。（エラーになります）

validateの「/^\d+$/」は正規表現という記載方法で、
^は先頭
\dは数字
+は直前の正規表現の1回以上の繰り返し
$は行末（文字列の終わり）
を意味しています。

他のバリデーションパターン（正規表現）を知りたい場合はgoogleで「正規表現」で検索するとたくさん情報が出てきます。

正規表現の後の.test()は
正規表現.test(テストするデータ)という書式で利用できます。
.test()は与えられたデータが正規表現に一致するかをチェックする関数です。
マッチすれば true マッチしない場合は false　を返します。



Author: webmaster