add form validation demo

package.json

@@ -20,8 +20,10 @@
     "echarts": "3.8.2",
     "element-ui": "1.4.2",
     "file-saver": "1.3.3",
+    "hakim": "^0.2.5",
     "js-cookie": "2.1.4",
     "jsonlint": "1.6.2",
+    "jszip": "^3.1.4",
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
@@ -36,8 +38,7 @@
     "vue-splitpane": "^1.0.0",
     "vuedraggable": "2.14.1",
     "vuex": "2.3.1",
-    "xlsx": "^0.10.8",
-    "jszip": "^3.1.4"
+    "xlsx": "^0.10.8"
   },
   "devDependencies": {
     "autoprefixer": "7.1.1",

src/router/index.js

@@ -119,6 +119,7 @@ export const asyncRouterMap = [
       },
       { path: 'form/edit', icon: 'form', component: _import('example/form'), name: '编辑Form', meta: { isEdit: true }},
       { path: 'form/create', icon: 'form', component: _import('example/form'), name: '创建Form' },
+      { path: 'form/validate', icon: 'form', component: _import('example/validation'), name: '验证Form' },
       { path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'Tab' }
     ]
   },

src/views/example/validation.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <div class="info">
+      element-ui自带的表单验证，有诸多不足。比如：一个表单项，要么为空，要么为整数，如何写？为了解决这个问题，引入hakim这个小工具，
+      可以用<span class="code">与</span>与<span class="code">或</span>的方式来组合多条规则，灵活方便
+      https://github.com/zzzgit/hakim
+    </div>
+    <div style="width: 400px">
+      <el-form :model="formModel" :rules="rules" ref="form" label-width="250px">
+        <el-form-item label="大于0的数字，最多1位小数" prop="item1">
+          <el-input v-model="formModel.item1"></el-input>
+        </el-form-item>
+        <el-form-item label="同时包含英文和数字" prop="item2">
+          <el-input v-model="formModel.item2"></el-input>
+        </el-form-item>
+        <el-form-item label="为空，为正整数，或者为电子邮件" prop="item3">
+          <el-input v-model="formModel.item3"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm('form')">校验</el-button>
+          <el-button @click="resetForm('form')">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import Hakim from 'hakim'
+export default {
+  name: 'articleDetail',
+  data() {
+    return {
+      formModel: {
+        item1: null,
+        item2: null,
+        item3: null
+      },
+      rules: {
+        item1: [
+          {
+            required: true,
+            trigger: 'change',
+            validator: (rule, value, resolve) => {
+              if (!new Hakim([{ is: 'number' }, { gt: 0 }, { dplacesLt: 2 }]).validate(value)) {
+                return resolve(new Error('大于0的数字，最多1位小数'))
+              }
+              return resolve()
+            }
+          }
+        ],
+        item2: [
+          {
+            required: true,
+            trigger: 'change',
+            validator: (rule, value, resolve) => {
+              if (!new Hakim([{ isNot: 'empty' }, { exist: 'latin' }, { exist: 'digit' }]).validate(value)) {
+                return resolve(new Error('同时包含英文和数字'))
+              }
+              return resolve()
+            }
+          }
+        ],
+        item3: [
+          {
+            trigger: 'change',
+            validator: (rule, value, resolve) => {
+              if (!new Hakim([{ is: 'empty' }, [{ is: 'number' }, { is: 'positive' }, { is: 'integer' }], { is: 'email' }, true]).validate(value)) {
+                return resolve(new Error('为空，为正整数，或者为电子邮件'))
+              }
+              return resolve()
+            }
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!')
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+  .info{
+    height: 80px;
+    padding-top: 20px;
+    padding-left: 10px;
+    background-color: gray;
+    margin-bottom: 20px;
+  }
+  .code{
+    background-color: yellow;
+  }
+
+</style>