Vue.jsとVeeValidate (vee-validate) で条件付き必須チェックを行う方法

Vue.jsで作ったSPAの入力検証にVeeValidateというフレームワークを使っています。

VeeValidate (vee-validate) とは

VeeValidateは、テンプレートベースの入力検証フレームワークで、以下のような特徴があります。

• テンプレートベースで入力検証を定義できる
• 多彩な検証ルールがあらかじめ提供されている
• 多言語化サポート
• ルールやエラーメッセージのカスタマイズが容易

JavaScript部分で次のような設定を行い、

Vue.use(VeeValidate);

HTMLテンプレート内で

<input v-validate="'required'" name="username" type="text">
<span>{{ errors.first('username') }}</span>

このようにv-validate="..."と書いておくだけで入力値の検証が行われるので、非常に便利です。

VeeValidateで条件付き必須チェック (required) を行う方法

この例のように、フィールドusernameが常に必須の場合は'required'を指定しますが、「ある特定の条件がそろった場合のみ必須」としたい場合はどのような指定になるでしょうか？

答えは単純で、以下のようなコードとなります。

<input v-validate="{ required: this.isRequired }" name="username" type="text">
<span>{{ errors.first('username') }}</span>

isRequiredというのはVue.jsのcomputedフィールドです。
この値がtrueの場合は必須チェックが行われ、そうでなければ任意入力ということになります。

computed: {
  isRequired: function() {
    // 特定の条件を満たす場合はtrueを返す
    return ...;
  }
}