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>
以上!!
