1. frost_star

    Posted

    frost_star
Changes in title
+ElementのValidationの使い方はasync-validatorを参照する
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,92 @@
+[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)が使われています。
+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が行われます。