From 5aece3ce7e010459757739e54e359506d1ece081 Mon Sep 17 00:00:00 2001
From: jonkee <zzzgoo@gmail.com>
Date: Thu, 16 Nov 2017 20:51:19 +0800
Subject: [PATCH] add form validation demo
---
package.json | 5 +-
src/router/index.js | 1 +
src/views/example/validation.vue | 110 +++++++++++++++++++++++++++++++
3 files changed, 114 insertions(+), 2 deletions(-)
create mode 100644 src/views/example/validation.vue
diff --git a/package.json b/package.json
index 2723c6a4..978c2dcc 100644
--- a/package.json
+++ b/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",
diff --git a/src/router/index.js b/src/router/index.js
index a4cc7b9b..1c16ed16 100644
--- a/src/router/index.js
+++ b/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' }
]
},
diff --git a/src/views/example/validation.vue b/src/views/example/validation.vue
new file mode 100644
index 00000000..029e9c27
--- /dev/null
+++ b/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>