ElementのValidationの使い方はasync-validatorを参照する

ElementはVue 2.0のコンポーネントライブラリです。
様々なコンポーネントが用意されていますが、今回はその中でもFormのValidationに注目します。
Validation機能は、入力チェックとその結果の表示を簡単にしてくれる便利な機能なのですが、Elementの公式ページにはいくつか例が載っているものの、すべての機能(例えば、typeプロパティに使えるデータ型には何があるかなど)に関しては記載されていません。

ElementのValidatorの仕様

Elementのソースを見ていくと、Validationを行う部分に関してはasync-validatorが使われています。
(2017/10/17追記 よく見たら公式サイトのValidationのところにもちゃんとasync-validatorを参照しろって書いてました)

ElementでのValidationのソースコードは以下のようになります。

<template lang="html">
  <el-row :gutter="20">
    <el-col :span="12" :offset="6">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="Name" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
      },
      rules: {
        name: [
          { required: true, message: '入力必須です', trigger: 'blur' },
          { min: 3, max: 5, message: '3~5文字で入力してください', trigger: 'blur' },
        ],
      },
    };
  },
};
</script>

<style lang="css">
</style>

ここで、rulesとして定義する部分に、async-validatorのRulesの形式で指定できます。

async-validatorのRules

プロパティ

• type
  型を定義

  • string(デフォルト)
  • number
  • boolean
  • method
  • regexp
  • integer
  • float
  • array
  • object
  • enum
  • date
  • url
  • hex
  • email

• required
  trueの場合、必須

• pattern
  正規表現のパターンと一致チェック

• min, max
  最小と最大を設定し、その間に数や文字数が収まるかをチェック

• len
  数や文字数と一致チェック

• enum
  typeがenumの時、データがenumの配列の中身のいずれかに一致しているかをチェック

• whitespace
  trueの時、空白でもエラーになる

• message
  ValidationErrorが発生した場合に表示するメッセージを定義します。

ほかにも少し高度なプロパティがいくつかありますが、詳細は公式を参照してください。

Elementのプロパティ

triggerはElementのほうで使われるプロパティです。
Validationのタイミングについて設定できます。
changeを指定するとリアルタイム、blurを指定するとフォーカスが外れたタイミングでValidationが行われます。