Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
24
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@frost_star

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

24
Help us understand the problem. What is going on with this article?
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
24
Help us understand the problem. What is going on with this article?