docs: update form valiation demos

Change-Id: Iaaa934e454cf74e96a7d5c5a08dd0063eeba2ca0

Author: xiaodemen

one/docs/components/form.md

@@ -44,10 +44,6 @@
 
 [[ demo src="/demo/form/before-after.vue" ]]
 
-### 警告信息
-
-[[ demo src="/demo/form/warn.vue" ]]
-
 ### 抽象表单项
 
 [[ demo src="/demo/form/abstract.vue" ]]

one/docs/demo/form/before-after.vue

@@ -2,36 +2,33 @@
 <article class="veui-form-demo">
   <veui-form
     ref="form"
-    :data="storeData4"
+    :data="data"
     :before-validate="beforeValidate"
     :after-validate="afterValidate"
   >
     <veui-field
       field="name"
       name="name"
       label="姓名"
-      :rules="requiredRule"
     >
-      <veui-input v-model="storeData4.name"/>
+      <veui-input v-model="data.name"/>
     </veui-field>
 
     <veui-field
       field="phone"
       name="phone"
-      :rules="phoneRule"
       label="手机"
     >
       <veui-input
-        v-model="storeData4.phone"
+        v-model="data.phone"
         name="phone"
         autocomplete="off"
       />
     </veui-field>
 
-    <template #actions="{ validating }">
+    <template #actions>
       <veui-button
         ui="primary"
-        :loading="validating"
         type="submit"
       >提交</veui-button>
     </template>
@@ -42,17 +39,9 @@
 <script>
 import {
   Form,
-  Fieldset,
   Field,
-  Span,
   Input,
-  Button,
-  Select,
-  Checkbox,
-  CheckboxGroup,
-  NumberInput,
-  Transfer,
-  ConfigProvider
+  Button
 } from 'veui'
 import confirmManager from 'veui/managers/confirm'
 
@@ -66,26 +55,10 @@ export default {
   },
   data () {
     return {
-      storeData4: {
+      data: {
         name: '曹达华',
         phone: '18888888888'
-      },
-      requiredRule: [
-        {
-          name: 'required',
-          value: true,
-          triggers: 'blur,input'
-        }
-      ],
-      phoneRule: [
-        { name: 'required', triggers: 'change,input,blur' },
-        {
-          name: 'pattern',
-          value: /^1\d{10}$/,
-          message: '请输入正确的手机号',
-          triggers: 'blur'
-        }
-      ]
+      }
     }
   },
   methods: {
@@ -114,22 +87,3 @@ export default {
   }
 }
 </script>
-
-<style lang="less" scoped>
-@import "~veui-theme-dls/lib.less";
-
-.veui-form-demo {
-  .operation {
-    margin-top: 60px;
-    margin-left: 120px;
-
-    [class*="veui"] {
-      margin-left: 10px;
-    }
-
-    [class*="veui"]:first-child {
-      margin-left: 0;
-    }
-  }
-}
-</style>

one/docs/demo/form/help.vue

@@ -1,16 +1,25 @@
 <template>
 <article>
   <section>
-    <veui-checkbox
+    <span class="label-text">辅助信息位置:</span>
+    <veui-radio-button-group
       v-model="helpPosition"
-      true-value="bottom"
+      ui="s"
+      :items="helpPositions"
+    />
+    <veui-checkbox
+      v-model="labelPosition"
+      true-value="top"
       false-value="side"
+      ui="s"
+      style="margin-left: 8px"
     >
-      辅助信息显示在底部
+      上下布局
     </veui-checkbox>
   </section>
   <veui-form
     :data="formData"
+    :label-position="labelPosition"
   >
     <veui-field
       name="name"
@@ -35,13 +44,14 @@
 </template>
 
 <script>
-import { Form, Field, Input, Checkbox } from 'veui'
+import { Form, Field, Input, Checkbox, RadioButtonGroup } from 'veui'
 
 export default {
   components: {
     'veui-form': Form,
     'veui-field': Field,
     'veui-input': Input,
+    'veui-radio-button-group': RadioButtonGroup,
     'veui-checkbox': Checkbox
   },
   data () {
@@ -50,7 +60,13 @@ export default {
         name: '',
         address: ''
       },
-      helpPosition: 'side'
+      helpPositions: [
+        { label: 'top', value: 'top' },
+        { label: 'side', value: 'side' },
+        { label: 'bottom', value: 'bottom' }
+      ],
+      helpPosition: 'side',
+      labelPosition: 'side'
     }
   }
 }
@@ -60,4 +76,9 @@ export default {
 section {
   margin-bottom: 20px;
 }
+
+.label-text {
+   font-size: 12px;
+   margin-right: 8px;
+ }
 </style>

one/docs/demo/form/rule.vue

@@ -2,34 +2,24 @@
 <article class="veui-form-demo">
   <veui-form
     ref="form"
-    :data="storeData4"
+    :data="data"
   >
-    <veui-field
-      field="name"
-      name="name"
-      label="姓名"
-      :rules="requiredRule"
-    >
-      <veui-input v-model="storeData4.name"/>
-    </veui-field>
-
     <veui-field
       field="phone"
       name="phone"
       :rules="phoneRule"
       label="手机"
     >
       <veui-input
-        v-model="storeData4.phone"
+        v-model="data.phone"
         name="phone"
         autocomplete="off"
       />
     </veui-field>
 
-    <template #actions="{ validating }">
+    <template #actions>
       <veui-button
         ui="primary"
-        :loading="validating"
         type="submit"
       >提交</veui-button>
     </template>
@@ -40,17 +30,9 @@
 <script>
 import {
   Form,
-  Fieldset,
   Field,
-  Span,
   Input,
-  Button,
-  Select,
-  Checkbox,
-  CheckboxGroup,
-  NumberInput,
-  Transfer,
-  ConfigProvider
+  Button
 } from 'veui'
 
 export default {
@@ -63,46 +45,19 @@ export default {
   },
   data () {
     return {
-      storeData4: {
-        name: '',
+      data: {
         phone: '1888888888a'
       },
-      requiredRule: [
-        {
-          name: 'required',
-          value: true,
-          triggers: 'blur,input'
-        }
-      ],
       phoneRule: [
-        { name: 'required', triggers: 'change,input,blur' },
+        // 'required',
         {
           name: 'pattern',
           value: /^1\d{10}$/,
-          message: '请输入正确的手机号',
+          message: '{value} 不是正确的手机号',
           triggers: 'blur'
         }
       ]
     }
   }
 }
 </script>
-
-<style lang="less" scoped>
-@import "~veui-theme-dls/lib.less";
-
-.veui-form-demo {
-  .operation {
-    margin-top: 60px;
-    margin-left: 120px;
-
-    [class*="veui"] {
-      margin-left: 10px;
-    }
-
-    [class*="veui"]:first-child {
-      margin-left: 0;
-    }
-  }
-}
-</style>

one/docs/demo/form/validator.vue

@@ -2,7 +2,7 @@
 <article class="veui-form-demo">
   <veui-form
     ref="form"
-    :data="storeData4"
+    :data="data"
     :validators="validators"
   >
     <veui-fieldset
@@ -17,11 +17,11 @@
         :rules="numRequiredRule"
         class="start-field"
       >
-        <veui-input v-model="storeData4.start"/>
+        <veui-input v-model="data.start"/>
       </veui-field>
       <veui-span style="margin: 0 4px">-</veui-span>
       <veui-field field="end" name="end" :rules="numRequiredRule">
-        <veui-input v-model="storeData4.end"/>
+        <veui-input v-model="data.end"/>
       </veui-field>
       <veui-span>万</veui-span>
     </veui-fieldset>
@@ -42,15 +42,8 @@ import {
   Form,
   Fieldset,
   Field,
-  Span,
   Input,
-  Button,
-  Select,
-  Checkbox,
-  CheckboxGroup,
-  NumberInput,
-  Transfer,
-  ConfigProvider
+  Button
 } from 'veui'
 
 export default {
@@ -64,7 +57,7 @@ export default {
   },
   data () {
     return {
-      storeData4: {
+      data: {
         start: 20000,
         end: 10000
       },
@@ -90,12 +83,17 @@ export default {
 
             return new Promise(function (resolve) {
               setTimeout(function () {
+                let res = {}
+                if (parseInt(start, 10) < 4000) {
+                  res.start = {
+                    status: 'warning',
+                    message: '请提高下限'
+                  }
+                }
                 if (parseInt(start, 10) >= parseInt(end, 10)) {
-                  return resolve({
-                    start: '下限必须小于上限'
-                  })
+                  res.end = '上限必须大于下限'
                 }
-                return resolve(true)
+                resolve(Object.keys(res).length ? res : true)
               }, 2000)
             })
           },
@@ -116,18 +114,5 @@ export default {
       width: 80px;
     }
   }
-
-  .operation {
-    margin-top: 60px;
-    margin-left: 120px;
-
-    [class*="veui"] {
-      margin-left: 10px;
-    }
-
-    [class*="veui"]:first-child {
-      margin-left: 0;
-    }
-  }
 }
 </style>