1. frost_star

    No comment

    frost_star
Changes in tags
Changes in body
Source | HTML | Preview
@@ -1,92 +1,94 @@
[Element](http://element.eleme.io/#/en-US)はVue 2.0のコンポーネントライブラリです。
様々なコンポーネントが用意されていますが、今回はその中でも[FormのValidation](http://element.eleme.io/#/en-US/component/form#validation)に注目します。
Validation機能は、入力チェックとその結果の表示を簡単にしてくれる便利な機能なのですが、Elementの公式ページにはいくつか例が載っているものの、すべての機能(例えば、typeプロパティに使えるデータ型には何があるかなど)に関しては記載されていません。
# ElementのValidatorの仕様
Elementのソースを見ていくと、Validationを行う部分に関しては[async-validator](https://github.com/yiminghe/async-validator)が使われています。
+(2017/10/17追記 よく見たら公式サイトのValidationのところにもちゃんとasync-validatorを参照しろって書いてました)
+
ElementでのValidationのソースコードは以下のようになります。
```js
<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](https://github.com/yiminghe/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が行われます。