くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

validator.jsとVee-ValidateでURL形式チェック

Nuxt(Vue)のバリデーションにVeeValidateを使っているけど、
用意されているルールにURLの形式チェックが無かったので、対応したときの備忘録。

validator.jsを使ってカスタムルールを作成する感じ。

作成したルール

/plugins/vue-validate.tsはこんな感じ。

// /plugins/vue-validate.ts
import Vue from "vue";
import {
  ValidationProvider,
  ValidationObserver,
  extend,
  localize
} from "vee-validate";
import { required } from "vee-validate/dist/rules";
import ja from "vee-validate/dist/locale/ja.json";
import isURL from "validator/lib/isURL";

// ** 必要なルールのみインポート
// * 定義済みのルール
extend("required", required);

// * カスタムルール
extend("url", {
  message: "URLを入力してください",
  validate(value) {
    return isURL(value, { protocols: ["https", "http"] });
  }
});

// ** メッセージを設定
localize("ja", ja);

Vue.component("ValidationProvider", ValidationProvider);
Vue.component("ValidationObserver", ValidationObserver);

あとは、こんな感じで設定すればOK

<ValidationProvider rules="required|url">
 <!-- 略 -->
</ValidationProvider>

以上!!

参考にしたサイト様