Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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が行われます。

frost_star
まだまだ半人前プログラマー。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした