vee-validateでカスタムルール(どちらか選択) #Vue.js

概要

リストのどちらかのみを選択するルールを作成してみる。
実装方法

下記のやり方でうまくいったので、添付しておく。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Validation</title>
</head>
<body>

  <div id="app">
    <h1>Vee-Validate(独自ルール - どちらか選択)</h1>

    <div>
      <label>カテゴリー</label>
      <div :class="{'is-error': errors.has('category') }">
        <select name="category1" v-model="category1" >
          <option v-for="item in list1" :value="item.value">
            {{ item.label }}
          </option>
        </select>
        <select name="category2" v-model="category2" >
          <option v-for="item in list2" :value="item.value">
            {{ item.label }}
          </option>
        </select>
      </div>
      <div v-show="errors.has('category')">
        <p>{{ errors.first('category') }}</p>
      </div>
    </div>

    <button type="button" @click="submit">作成する</button>

    <div v-show="errors.has('notification')">
      <p>{{ errors.first('notification') }}</p>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13"></script>
  <script src="https://cdn.jsdelivr.net/npm/vee-validate@2.1.0-beta.9/dist/vee-validate.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vee-validate@2.1.0-beta.9/dist/locale/ja.js"></script>
  <script>
    Vue.use(VeeValidate);

    new Vue({
      el: '#app',
      // データ
      data: {
        category1: null,
        list1: [
          {label:'- 未選択 -', value:null},
          {label:'りんご', value:'apple'},
          {label:'いちご', value:'strawberry'},
          {label:'ぶどう', value:'grape'}
        ],
        category2: null,
        list2: [
          {label:'- 未選択 -', value:null},
          {label:'オクラ', value:'okra'},
          {label:'カブ', value:'turnip'},
          {label:'キャベツ', value:'cabbage'}
        ],
      },
      created() {
        // メッセージを日本語に設定する
        this.$validator.localize('ja');

        /**
         * 入力検証 (カテゴリー)
         *
         * ※ カテゴリ1/カテゴリ2のどちらかを必ず選択する
         * ※ 両方選択することはできない
         */
        this.$validator.extend('category', {
          current: null,
          getMessage(field) {
            if (!this.current.category1 && !this.current.category2) {
              return 'どちらか１つ選択してください';
            } else if (this.current.category1 && this.current.category2) {
              return '両方選択することはできません';
            }
          },
          validate(value) {
            this.current = value;
            if (!value.category1 && !value.category2) {
              return false;
            } else if (value.category1 && value.category2) {
              return false;
            }
            return true;
          }
        });
        this.$validator.attach({
          name: "category",
          alias: 'カテゴリー',
          rules: "category",
          getter: () => this.category
        });
      },
      computed: {
        category() {
          return {
            category1 : this.category1,
            category2 : this.category2
          };
        }
      },
      watch: {
        category(value) {
          this.$validator.validate('category', value);
        }
      },
      methods: {
        submit: function () {
          // お知らせメッセージを初期化
          this.$validator.errors.remove('notification');

          // バリデートの判定
          this.$validator.validateAll().then((result) => {

            if (result === false) {
              // 入力エラー
              this.$validator.errors.add({
                field: 'notification',
                msg: '入力エラーがあります...'
              });
              return false;
            }

            // 何かしらの処理...
            console.log(Math.random());
            const is_success = (Math.random() > 0.3);
            if (!is_success) {
              // お知らせメッセージをセットする
              this.$validator.errors.add({
                field: 'notification',
                msg: '処理に失敗しました...'
              });
              return false;
            }

            //エラーがなかった時の処理を下に記述
            alert('Submit OK.')
          });
        }
      }
    });
  </script>
</body>
</html>
実行結果

作成ボタンを押すと、エラーメッセージが表示されました。
vee-validateでカスタムルール(どちらか選択)

概要

実装方法

実行結果

参考サイト
