diff --git a/packages/devui-vue/docs/components/form/index.md b/packages/devui-vue/docs/components/form/index.md
index 5eed27e888..11eae36d49 100644
--- a/packages/devui-vue/docs/components/form/index.md
+++ b/packages/devui-vue/docs/components/form/index.md
@@ -1,6 +1,6 @@
 # Form 表单
 
-表单用于收集数据
+具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
 
 ### 何时使用
 
@@ -10,8 +10,6 @@
 
 ### 基础用法
 
-> done
-
 基本用法当中，Label是在数据框的上面。
 
 
@@ -21,25 +19,25 @@
 <template>
   <d-form ref="dFormBasic" :formData="formModel" layout="vertical" @submit="onSubmitForm">
     <d-form-item prop="name">
-      <d-form-label required hasHelp helpTips="名字可以随意填">Name</d-form-label>
-      <d-form-control extraInfo="这行是说明文字，可以不用理，你尽管填你的姓名。">
+      <d-form-label required hasHelp helpTips="可以输入中文名字或者英文名字">姓名</d-form-label>
+      <d-form-control extraInfo="请输入您的名字">
         <d-input v-model="formModel.name" />
       </d-form-control>
     </d-form-item>
     <d-form-item prop="age">
-      <d-form-label>Age</d-form-label>
+      <d-form-label>年龄</d-form-label>
       <d-form-control>
         <d-input v-model="formModel.age" />
       </d-form-control>
     </d-form-item>
     <d-form-item prop="city">
-      <d-form-label>City</d-form-label>
+      <d-form-label>城市</d-form-label>
       <d-form-control>
         <d-select v-model="formModel.city" :options="selectOptions" />
       </d-form-control>
     </d-form-item>
     <d-form-item prop="loveFruits">
-      <d-form-label>Love Fruits</d-form-label>
+      <d-form-label>喜欢的水果</d-form-label>
       <d-form-control>
         <d-tag-input
           v-model:tags="formModel.loveFruits"
@@ -51,32 +49,32 @@
       </d-form-control>
     </d-form-item>
     <d-form-item prop="sex">
-      <d-form-label>Sex</d-form-label>
+      <d-form-label>性别</d-form-label>
       <d-form-control>
         <d-radio v-model="formModel.sex" value="0">男</d-radio>
         <d-radio v-model="formModel.sex" value="1">女</d-radio>
       </d-form-control>
     </d-form-item>
-    <d-form-item prop="goOffWork">
-      <d-form-label>Go off work, I nerver to be a Juan King!</d-form-label>
+    <d-form-item prop="workOn">
+      <d-form-label>下班了吗</d-form-label>
       <d-form-control>
-        <d-switch v-model:checked="formModel.goOffWork"></d-switch>
+        <d-switch v-model:checked="formModel.workOn"></d-switch>
       </d-form-control>
     </d-form-item>
-    <d-form-item prop="ladySupport">
-      <d-form-label>Which lady you would like to support?</d-form-label>
+    <d-form-item prop="interestedDomain">
+      <d-form-label>兴趣领域</d-form-label>
       <d-form-control>
-        <d-checkbox-group v-model="formModel.ladySupport" label="1818黄金眼">
-          <d-checkbox label="郑女士" value="ladyZheng" />
-          <d-checkbox label="小毛" value="ladyMao" />
-          <d-checkbox label="小刘" value="ladyLiu" />
-          <d-checkbox label="小蒋" value="ladyJiang" />
-          <d-checkbox label="小滕" value="ladyTeng" />
+        <d-checkbox-group v-model="formModel.interestedDomain" label="兴趣领域">
+          <d-checkbox label="前端" value="frontend" />
+          <d-checkbox label="后端" value="backend" />
+          <d-checkbox label="移动端" value="mobileend" />
+          <d-checkbox label="人工智能" value="ai" />
+          <d-checkbox label="算法" value="algorithm" />
         </d-checkbox-group>
       </d-form-control>
     </d-form-item>
-    <d-form-operation class="demo-form-operation">
-      <d-button type="submit" class="demo-btn">提交</d-button>
+    <d-form-operation class="form-demo-form-operation">
+      <d-button type="submit" class="form-demo-btn">提交</d-button>
       <d-button bsStyle="common" @click="resetForm">重置</d-button>
     </d-form-operation>
   </d-form>
@@ -93,11 +91,11 @@ export default defineComponent({
       name: 'AlanLee',
       age: '24',
       city: '深圳',
-      loveFruits: [{name: 'apple'}],
-      suggestionList: [{name: 'apple'}, {name: 'watermalon'}, {name: 'peach'}],
+      loveFruits: [{name: '苹果'}],
+      suggestionList: [{name: '苹果'}, {name: '西瓜'}, {name: '桃子'}],
       sex: '0',
-      goOffWork: true,
-      ladySupport: ['ladyZheng'],
+      workOn: true,
+      interestedDomain: ['frontend'],
     });
     const selectOptions = reactive([
       '北京', '上海', '广州', '深圳'
@@ -123,11 +121,11 @@ export default defineComponent({
 
 
 <style>
-.demo-form-operation {
+.form-demo-form-operation {
   display: flex;
   align-items: center;
 }
-.demo-btn {
+.form-demo-btn {
   margin-right: 10px;
 }
 
@@ -140,8 +138,6 @@ export default defineComponent({
 
 ### 横向排列
 
-> done
-
 Label左右布局方式。
 
 
@@ -151,25 +147,25 @@ Label左右布局方式。
 <template>
   <d-form ref="dFormHorizontal" :formData="formModel" layout="horizontal" labelSize="lg" @submit="onSubmitForm">
     <d-form-item prop="name">
-      <d-form-label required>Name</d-form-label>
+      <d-form-label required>姓名</d-form-label>
       <d-form-control>
         <d-input v-model="formModel.name" />
       </d-form-control>
     </d-form-item>
     <d-form-item prop="age">
-      <d-form-label>Age</d-form-label>
+      <d-form-label>年龄</d-form-label>
       <d-form-control>
         <d-input v-model="formModel.age" />
       </d-form-control>
     </d-form-item>
     <d-form-item prop="city">
-      <d-form-label>City</d-form-label>
+      <d-form-label>城市</d-form-label>
       <d-form-control>
         <d-select v-model="formModel.city" :options="selectOptions" />
       </d-form-control>
     </d-form-item>
     <d-form-item prop="loveFruits">
-      <d-form-label>Love Fruits</d-form-label>
+      <d-form-label>喜欢的水果</d-form-label>
       <d-form-control>
         <d-tag-input
           v-model:tags="formModel.loveFruits"
@@ -181,32 +177,32 @@ Label左右布局方式。
       </d-form-control>
     </d-form-item>
     <d-form-item prop="sex">
-      <d-form-label>Sex</d-form-label>
+      <d-form-label>性别</d-form-label>
       <d-form-control>
         <d-radio v-model="formModel.sex" value="0">男</d-radio>
         <d-radio v-model="formModel.sex" value="1">女</d-radio>
       </d-form-control>
     </d-form-item>
-    <d-form-item prop="goOffWork">
-      <d-form-label>Go off work</d-form-label>
+    <d-form-item prop="workOn">
+      <d-form-label>下班了吗</d-form-label>
       <d-form-control>
-        <d-switch v-model:checked="formModel.goOffWork"></d-switch>
+        <d-switch v-model:checked="formModel.workOn"></d-switch>
       </d-form-control>
     </d-form-item>
-    <d-form-item prop="ladySupport">
-      <d-form-label>Support lady</d-form-label>
+    <d-form-item prop="interestedDomain">
+      <d-form-label>兴趣领域</d-form-label>
       <d-form-control>
-        <d-checkbox-group v-model="formModel.ladySupport" label="1818黄金眼">
-          <d-checkbox label="郑女士" value="ladyZheng" />
-          <d-checkbox label="小毛" value="ladyMao" />
-          <d-checkbox label="小刘" value="ladyLiu" />
-          <d-checkbox label="小蒋" value="ladyJiang" />
-          <d-checkbox label="小滕" value="ladyTeng" />
+        <d-checkbox-group v-model="formModel.interestedDomain" label="兴趣领域">
+          <d-checkbox label="前端" value="frontend" />
+          <d-checkbox label="后端" value="backend" />
+          <d-checkbox label="移动端" value="mobileend" />
+          <d-checkbox label="人工智能" value="ai" />
+          <d-checkbox label="算法" value="algorithm" />
         </d-checkbox-group>
       </d-form-control>
     </d-form-item>
-    <d-form-operation class="demo-form-operation">
-      <d-button type="submit" class="demo-btn">提交</d-button>
+    <d-form-operation class="form-demo-form-operation">
+      <d-button type="submit" class="form-demo-form-demo-demo-btn">提交</d-button>
       <d-button bsStyle="common" @click="resetForm">重置</d-button>
     </d-form-operation>
   </d-form>
@@ -222,12 +218,12 @@ export default defineComponent({
     let formModel = reactive({
       name: 'AlanLee',
       age: '24',
-      city: '',
-      loveFruits: [{name: 'apple'}],
-      suggestionList: [{name: 'apple'}, {name: 'watermalon'}, {name: 'peach'}],
+      city: '深圳',
+      loveFruits: [{name: '苹果'}],
+      suggestionList: [{name: '苹果'}, {name: '西瓜'}, {name: '桃子'}],
       sex: '0',
-      goOffWork: true,
-      ladySupport: ['ladyZheng'],
+      workOn: true,
+      interestedDomain: ['frontend'],
     });
     const selectOptions = reactive([
       '北京', '上海', '广州', '深圳'
@@ -252,11 +248,11 @@ export default defineComponent({
 
 
 <style>
-.demo-form-operation {
+.form-demo-form-operation {
   display: flex;
   align-items: center;
 }
-.demo-btn {
+.form-demo-form-demo-demo-btn {
   margin-right: 10px;
 }
 </style>
@@ -278,69 +274,71 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-button @click="openModal">Open Modal</d-button>
-  <div class="my-modal" v-show="showModal" @click="closeModal">
-    <d-form ref="dFormModal" :formData="formModel" layout="horizontal" labelSize="lg" @submit="onSubmitForm" class="my-form" @click.stop="() => {}">
-      <d-form-item prop="name">
-        <d-form-label required>Name</d-form-label>
-        <d-form-control>
-          <d-input v-model="formModel.name" />
-        </d-form-control>
-      </d-form-item>
-      <d-form-item prop="age">
-        <d-form-label>Age</d-form-label>
-        <d-form-control>
-          <d-input v-model="formModel.age" />
-        </d-form-control>
-      </d-form-item>
-      <d-form-item prop="city">
-        <d-form-label>City</d-form-label>
-        <d-form-control>
-          <d-select v-model="formModel.city" :options="selectOptions" />
-        </d-form-control>
-      </d-form-item>
-      <d-form-item prop="loveFruits">
-        <d-form-label>Love Fruits</d-form-label>
-        <d-form-control>
-          <d-tag-input
-            v-model:tags="formModel.loveFruits"
-            v-model:suggestionList="formModel.suggestionList"
-            display-property="name"
-            placeholder="请输入喜欢的水果"
-            no-data="暂无数据"
-          ></d-tag-input>
-        </d-form-control>
-      </d-form-item>
-      <d-form-item prop="sex">
-        <d-form-label>Sex</d-form-label>
-        <d-form-control>
-          <d-radio v-model="formModel.sex" value="0">男</d-radio>
-          <d-radio v-model="formModel.sex" value="1">女</d-radio>
-        </d-form-control>
-      </d-form-item>
-      <d-form-item prop="goOffWork">
-        <d-form-label>Go off work</d-form-label>
-        <d-form-control>
-          <d-switch v-model:checked="formModel.goOffWork"></d-switch>
-        </d-form-control>
-      </d-form-item>
-      <d-form-item prop="ladySupport">
-        <d-form-label>Support lady</d-form-label>
-        <d-form-control>
-          <d-checkbox-group v-model="formModel.ladySupport" label="1818黄金眼">
-            <d-checkbox label="郑女士" value="ladyZheng" />
-            <d-checkbox label="小毛" value="ladyMao" />
-            <d-checkbox label="小刘" value="ladyLiu" />
-            <d-checkbox label="小蒋" value="ladyJiang" />
-            <d-checkbox label="小滕" value="ladyTeng" />
-          </d-checkbox-group>
-        </d-form-control>
-      </d-form-item>
-      <d-form-operation class="demo-form-operation">
-        <d-button type="submit" class="demo-btn">提交</d-button>
-        <d-button bsStyle="common" @click="resetForm">重置</d-button>
-      </d-form-operation>
-    </d-form>
+  <d-button @click="openModal">打开弹窗</d-button>
+  <div class="form-demo-modal" v-show="showModal" @click="closeModal">
+    <div class="form-demo-modal-content">
+      <d-form ref="dFormModal" :formData="formModel" layout="horizontal" labelSize="lg" @submit="onSubmitForm">
+        <d-form-item prop="name">
+          <d-form-label required>姓名</d-form-label>
+          <d-form-control>
+            <d-input v-model="formModel.name" />
+          </d-form-control>
+        </d-form-item>
+        <d-form-item prop="age">
+          <d-form-label>年龄</d-form-label>
+          <d-form-control>
+            <d-input v-model="formModel.age" />
+          </d-form-control>
+        </d-form-item>
+        <d-form-item prop="city">
+          <d-form-label>城市</d-form-label>
+          <d-form-control>
+            <d-select v-model="formModel.city" :options="selectOptions" />
+          </d-form-control>
+        </d-form-item>
+        <d-form-item prop="loveFruits">
+          <d-form-label>喜欢的水果</d-form-label>
+          <d-form-control>
+            <d-tag-input
+              v-model:tags="formModel.loveFruits"
+              v-model:suggestionList="formModel.suggestionList"
+              display-property="name"
+              placeholder="请输入喜欢的水果"
+              no-data="暂无数据"
+            ></d-tag-input>
+          </d-form-control>
+        </d-form-item>
+        <d-form-item prop="sex">
+          <d-form-label>性别</d-form-label>
+          <d-form-control>
+            <d-radio v-model="formModel.sex" value="0">男</d-radio>
+            <d-radio v-model="formModel.sex" value="1">女</d-radio>
+          </d-form-control>
+        </d-form-item>
+        <d-form-item prop="workOn">
+          <d-form-label>下班了吗</d-form-label>
+          <d-form-control>
+            <d-switch v-model:checked="formModel.workOn"></d-switch>
+          </d-form-control>
+        </d-form-item>
+        <d-form-item prop="interestedDomain">
+          <d-form-label>兴趣领域</d-form-label>
+          <d-form-control>
+            <d-checkbox-group v-model="formModel.interestedDomain" label="兴趣领域">
+              <d-checkbox label="前端" value="frontend" />
+              <d-checkbox label="后端" value="backend" />
+              <d-checkbox label="移动端" value="mobileend" />
+              <d-checkbox label="人工智能" value="ai" />
+              <d-checkbox label="算法" value="algorithm" />
+            </d-checkbox-group>
+          </d-form-control>
+        </d-form-item>
+        <d-form-operation class="form-demo-form-operation">
+          <d-button type="submit" class="form-demo-form-demo-demo-btn">提交</d-button>
+          <d-button bsStyle="common" @click="resetForm">重置</d-button>
+        </d-form-operation>
+      </d-form>
+    </div>
   </div>
 
 </template>
@@ -354,12 +352,12 @@ export default defineComponent({
     let formModel = reactive({
       name: 'AlanLee',
       age: '24',
-      city: '',
-      loveFruits: [{name: 'apple'}],
-      suggestionList: [{name: 'apple'}, {name: 'watermalon'}, {name: 'peach'}],
+      city: '深圳',
+      loveFruits: [{name: '苹果'}],
+      suggestionList: [{name: '苹果'}, {name: '西瓜'}, {name: '桃子'}],
       sex: '0',
-      goOffWork: true,
-      ladySupport: ['ladyZheng'],
+      workOn: true,
+      interestedDomain: ['frontend'],
     });
     const selectOptions = reactive([
       '北京', '上海', '广州', '深圳'
@@ -394,15 +392,15 @@ export default defineComponent({
 
 
 <style>
-.demo-form-operation {
+.form-demo-form-operation {
   display: flex;
   align-items: center;
 }
-.demo-btn {
+.form-demo-form-demo-demo-btn {
   margin-right: 10px;
 }
 
-.my-modal {
+.form-demo-modal {
   position: fixed;
   top: 0;
   left: 0;
@@ -418,9 +416,9 @@ export default defineComponent({
   align-items: center;
 }
 
-.my-form {
+.form-demo-modal-content {
   background-color: #fff;
-  width: 60vw;
+  width: 40vw;
   padding: 20px;
 }
 </style>
@@ -432,8 +430,6 @@ export default defineComponent({
 
 ### 多列表单
 
-> done
-
 多列表单。layout的属性为`columns`，同时搭配columnsClass属性，值为"u-[row]-[col]"，例如`u-1-3`为1行3列。
 
 
@@ -443,13 +439,13 @@ export default defineComponent({
 <template>
   <d-form ref="dFormColumn" layout="columns" columnsClass="u-1-3" :formData="formModel" @submit="onSubmitForm">
     <d-form-item prop="name" v-for="(item) in 6" :key="item" class="column-item">
-      <d-form-label required hasHelp>Name</d-form-label>
+      <d-form-label required hasHelp>姓名</d-form-label>
       <d-form-control>
         <d-input />
       </d-form-control>
     </d-form-item>
     <d-form-item prop="loveFruits" class="column-item">
-      <d-form-label>Love Fruits</d-form-label>
+      <d-form-label>喜欢的水果</d-form-label>
       <d-form-control>
         <d-tag-input
           v-model:tags="formModel.loveFruits"
@@ -461,33 +457,33 @@ export default defineComponent({
       </d-form-control>
     </d-form-item>
     <d-form-item prop="sex" class="column-item">
-      <d-form-label>Sex</d-form-label>
+      <d-form-label>性别</d-form-label>
       <d-form-control>
         <d-radio v-model="formModel.sex" value="0">男</d-radio>
         <d-radio v-model="formModel.sex" value="1">女</d-radio>
       </d-form-control>
     </d-form-item>
     <d-form-item prop="goOffWork" class="column-item">
-      <d-form-label>Go off work</d-form-label>
+      <d-form-label>下班了吗</d-form-label>
       <d-form-control>
-        <d-switch v-model:checked="formModel.goOffWork"></d-switch>
+        <d-switch v-model:checked="formModel.workOn"></d-switch>
       </d-form-control>
     </d-form-item>
-    <d-form-item prop="ladySupport" class="column-item">
-      <d-form-label>Support lady</d-form-label>
+    <d-form-item prop="interestedDomain" class="column-item">
+      <d-form-label>兴趣领域</d-form-label>
       <d-form-control>
-        <d-checkbox-group v-model="formModel.ladySupport" label="1818黄金眼">
-          <d-checkbox label="郑女士" value="ladyZheng" />
-          <d-checkbox label="小毛" value="ladyMao" />
-          <d-checkbox label="小刘" value="ladyLiu" />
-          <d-checkbox label="小蒋" value="ladyJiang" />
-          <d-checkbox label="小滕" value="ladyTeng" />
+        <d-checkbox-group v-model="formModel.interestedDomain" label="兴趣领域">
+              <d-checkbox label="前端" value="frontend" />
+              <d-checkbox label="后端" value="backend" />
+              <d-checkbox label="移动端" value="mobileend" />
+              <d-checkbox label="人工智能" value="ai" />
+              <d-checkbox label="算法" value="algorithm" />
         </d-checkbox-group>
       </d-form-control>
     </d-form-item>
 
-    <d-form-operation class="demo-form-operation">
-      <d-button type="submit" class="demo-btn">提交</d-button>
+    <d-form-operation class="form-demo-form-operation">
+      <d-button type="submit" class="form-demo-form-demo-demo-btn">提交</d-button>
       <d-button bsStyle="common" @click="resetForm">重置</d-button>
     </d-form-operation>
   </d-form>
@@ -502,12 +498,12 @@ export default defineComponent({
     let formModel = reactive({
       name: 'AlanLee',
       age: '24',
-      city: '',
-      loveFruits: [{name: 'apple'}],
-      suggestionList: [{name: 'apple'}, {name: 'watermalon'}, {name: 'peach'}],
+      city: '深圳',
+      loveFruits: [{name: '苹果'}],
+      suggestionList: [{name: '苹果'}, {name: '西瓜'}, {name: '桃子'}],
       sex: '0',
-      goOffWork: true,
-      ladySupport: ['ladyZheng'],
+      workOn: true,
+      interestedDomain: ['frontend'],
     });
     const selectOptions = reactive([
       '北京', '上海', '广州', '深圳'
@@ -531,11 +527,11 @@ export default defineComponent({
 </script>
 
 <style>
-.demo-form-operation {
+.form-demo-form-operation {
   display: flex;
   align-items: center;
 }
-.demo-btn {
+.form-demo-form-demo-demo-btn {
   margin-right: 10px;
 }
 </style>
@@ -548,17 +544,11 @@ export default defineComponent({
 
 ### 模板驱动表单验证
 
-> doing
-
 在`d-form`、`d-input`等表单类组件上使用`v-d-validate-rules`指令，配置校验规则。
 
 
 #### 验证单个元素，使用内置校验器，配置error message
 
-> done
->
-> 待支持国际化词条配置
-
 当前DevUI支持的内置校验器有：`required`、`minlength`、`maxlength`、`min`、`max`、`requiredTrue`、`email`、`pattern`、`whitespace`。
 
 - 若需限制用户输入不能全为空格，可使用`whitespace`内置校验器
@@ -574,10 +564,10 @@ export default defineComponent({
 ```vue
 <template>
   <d-form ref="dFormTemplateValidate1" :formData="formModel" labelSize="lg" >
-    <d-form-item prop="name">
-      <d-form-label required>Name</d-form-label>
+    <d-form-item prop="username">
+      <d-form-label required>用户名</d-form-label>
       <d-form-control>
-        <d-input v-model="formModel.name" v-d-validate-rules="[
+        <d-input v-model="formModel.username" v-d-validate-rules="[
           {
             maxlength: 8,
           },
@@ -603,7 +593,7 @@ export default defineComponent({
   setup(props, ctx) {
     const dFormTemplateValidate1 = ref(null);
     let formModel = reactive({
-      name: 'AlanLee',
+      username: 'AlanLee',
     });
 
     return {
@@ -616,11 +606,11 @@ export default defineComponent({
 
 
 <style>
-.demo-form-operation {
+.form-demo-form-operation {
   display: flex;
   align-items: center;
 }
-.demo-btn {
+.form-demo-form-demo-demo-btn {
   margin-right: 10px;
 }
 </style>
@@ -631,8 +621,6 @@ export default defineComponent({
 
 #### 验证单个元素，自定义校验器
 
-> done
-
 自定义校验器，可传入`validators`字段配置校验规则，你可以简单返回`true | false `来标识当前校验是否通过，来标识当前是否错误并返回错误消息，适用于动态错误提示。如果是异步校验器，可传入`asyncValidators`字段配置校验规则。
 
 :::demo
@@ -704,11 +692,11 @@ export default defineComponent({
 
 
 <style>
-.demo-form-operation {
+.form-demo-form-operation {
   display: flex;
   align-items: center;
 }
-.demo-btn {
+.form-demo-form-demo-demo-btn {
   margin-right: 10px;
 }
 </style>
@@ -720,11 +708,14 @@ export default defineComponent({
 
 #### 验证单个元素，配置错误更新策略errorStrategy、校验时机updateOn
 
-> done
-
-设置`errorStrategy`属性初始化时是否进行校验， 默认配置为`dirty`，校验不通过进行错误提示；若需要在初始化时将错误抛出，可配置为`pristine`。
+- 设置`errorStrategy`属性初始化时是否进行校验
+  - 默认配置为`dirty`，校验不通过进行错误提示
+  - 若需要在初始化时将错误抛出，可配置为`pristine`
 
-设置`updateOn`，指定校验的时机。 校验器`updateOn`基于你绑定的模型的`updateOn`设置， 你可以通过`options`来指定， 默认为`change`，可选值还有`blur` 、`input`、`submit`、 设置为`submit`，则当元素所在表单进行提交时将触发校验。（待实现submit）
+- 设置`updateOn`，指定校验的时机
+  - 校验器`updateOn`基于你绑定的模型的`updateOn`设置， 你可以通过`options`来指定， 默认为`change`
+  - 可选值还有`blur` 、`input`、`submit`
+  - 设置为`submit`，则当元素所在表单进行提交时将触发校验
 
 :::demo
 
@@ -828,11 +819,11 @@ export default defineComponent({
 
 
 <style>
-.demo-form-operation {
+.form-demo-form-operation {
   display: flex;
   align-items: center;
 }
-.demo-btn {
+.form-demo-form-demo-demo-btn {
   margin-right: 10px;
 }
 </style>
@@ -844,14 +835,12 @@ export default defineComponent({
 
 #### 验证单个元素，自定义管理消息提示
 
-> done
-
 配置`messageShowType`可选择消息自动提示的方式，默认为`popover`。
 
 - 设置为`popover`错误信息将在元素聚焦时以`popover`形式呈现。
 
 - 设置为`text`错误信息将自动以文本方式显示在元素下方(需要与表单控件容器配合使用)。
- 
+
 - 设置为`none`错误信息将不会自动呈现到视图， 可在模板中获取`message`或通过监听`messageChange`事件获取错误`message`， 或在模板中直接通过引用获取。
 
 - 在 `options`中配置  `popPosition`可在消息提示方式为`popover`时，自定义`popover`内容弹出方向， 默认为`['right', 'bottom']`。更多取值参考popover组件。
@@ -929,11 +918,11 @@ export default defineComponent({
 
 
 <style>
-.demo-form-operation {
+.form-demo-form-operation {
   display: flex;
   align-items: center;
 }
-.demo-btn {
+.form-demo-form-demo-demo-btn {
   margin-right: 10px;
 }
 </style>
@@ -946,8 +935,6 @@ export default defineComponent({
 
 #### 验证单个元素，自定义asyncDebounceTime
 
-> done
-
 
 对于异步校验器，提供默认300ms debounce time。在options中设置`asyncDebounceTime`显示设置（单位ms）。
 
@@ -1000,11 +987,11 @@ export default defineComponent({
 
 
 <style>
-.demo-form-operation {
+.form-demo-form-operation {
   display: flex;
   align-items: center;
 }
-.demo-btn {
+.form-demo-form-demo-demo-btn {
   margin-right: 10px;
 }
 </style>
@@ -1017,8 +1004,6 @@ export default defineComponent({
 
 #### Form验证与提交
 
-> done
-
 点击提交按钮时进行验证，需指定name属性，并同时绑定d-form标签的submit事件才能生效。
 
 :::demo
@@ -1027,7 +1012,7 @@ export default defineComponent({
 <template>
   <d-form name="userInfoForm" ref="dFormTemplateValidate6" :formData="formModel" labelSize="lg" @submit="onSubmit">
     <d-form-item prop="name">
-      <d-form-label>Name</d-form-label>
+      <d-form-label>姓名</d-form-label>
       <d-form-control>
         <d-input v-model="formModel.name" v-d-validate-rules="{
           rules: {minlength: 2, message: '不能小于2个字符'},
@@ -1038,7 +1023,7 @@ export default defineComponent({
       </d-form-control>
     </d-form-item>
     <d-form-item prop="age">
-      <d-form-label>Age</d-form-label>
+      <d-form-label>年龄</d-form-label>
       <d-form-control>
         <d-input v-model="formModel.age" v-d-validate-rules="{
           rules: {min: 1, message: '年龄需大于0'},
@@ -1048,8 +1033,8 @@ export default defineComponent({
         }" />
       </d-form-control>
     </d-form-item>
-    <d-form-operation class="demo-form-operation">
-      <d-button type="submit" class="demo-btn">提交</d-button>
+    <d-form-operation class="form-demo-form-operation">
+      <d-button type="submit" class="form-demo-form-demo-demo-btn">提交</d-button>
       <d-button bsStyle="common" @click="resetForm">重置</d-button>
     </d-form-operation>
   </d-form>
@@ -1086,11 +1071,11 @@ export default defineComponent({
 
 
 <style>
-.demo-form-operation {
+.form-demo-form-operation {
   display: flex;
   align-items: center;
 }
-.demo-btn {
+.form-demo-form-demo-demo-btn {
   margin-right: 10px;
 }
 </style>
@@ -1102,8 +1087,6 @@ export default defineComponent({
 
 #### Form验证与提交，用户注册场景
 
-> doing
-
 对于自动错误提示的方式，在form中， 建议在dForm层统一设置`messageShowType`，需同时设置ref属性才能生效。
 
 
@@ -1115,7 +1098,7 @@ export default defineComponent({
           rules: {message: '表单验证未通过'},
         }" messageShowType="text">
     <d-form-item prop="name">
-      <d-form-label>Name</d-form-label>
+      <d-form-label>姓名</d-form-label>
       <d-form-control>
         <d-input v-model="formModel.name" v-d-validate-rules="{
           rules: {minlength: 2, message: '不能小于2个字符'},
@@ -1126,7 +1109,7 @@ export default defineComponent({
       </d-form-control>
     </d-form-item>
     <d-form-item prop="age">
-      <d-form-label>Age</d-form-label>
+      <d-form-label>年龄</d-form-label>
       <d-form-control>
         <d-input v-model="formModel.age" v-d-validate-rules="{
           rules: {min: 1, message: '年龄需大于0'},
@@ -1136,8 +1119,8 @@ export default defineComponent({
         }" />
       </d-form-control>
     </d-form-item>
-    <d-form-operation class="demo-form-operation">
-      <d-button type="submit" class="demo-btn">提交</d-button>
+    <d-form-operation class="form-demo-form-operation">
+      <d-button type="submit" class="form-demo-demo-btn">提交</d-button>
       <d-button bsStyle="common" @click="resetForm">重置</d-button>
     </d-form-operation>
   </d-form>
@@ -1174,11 +1157,11 @@ export default defineComponent({
 
 
 <style>
-.demo-form-operation {
+.form-demo-form-operation {
   display: flex;
   align-items: center;
 }
-.demo-btn {
+.form-demo-demo-btn {
   margin-right: 10px;
 }
 </style>
@@ -1189,8 +1172,6 @@ export default defineComponent({
 
 ### 响应式表单验证
 
-> done
-
 在`d-form`标签中指定校验规则rules，同时在`d-form-item`中指定`prop`的值为校验字段名。
 
 
@@ -1200,13 +1181,13 @@ export default defineComponent({
 <template>
   <d-form ref="dFormReactiveValidate" :form-data="validateFormModel" :rules="rules">
     <d-form-item prop="name">
-      <d-form-label :required="true" >Name</d-form-label>
+      <d-form-label :required="true" >姓名</d-form-label>
       <d-form-control>
         <d-input v-model="validateFormModel.name" />
       </d-form-control>
     </d-form-item>
     <d-form-item prop="age">
-      <d-form-label :required="true" >Age</d-form-label>
+      <d-form-label :required="true" >年龄</d-form-label>
       <d-form-control>
         <d-input v-model="validateFormModel.age" />
       </d-form-control>
@@ -1254,11 +1235,11 @@ export default defineComponent({
 
 
 <style>
-.demo-form-operation {
+.form-demo-form-operation {
   display: flex;
   align-items: center;
 }
-.demo-btn {
+.form-demo-demo-btn {
   margin-right: 10px;
 }
 </style>
@@ -1270,8 +1251,6 @@ export default defineComponent({
 
 ### 指定表单Feedback状态
 
-> done
-
 你可通过对d-form-control设置feedbackStatus手动指定反馈状态。当前已支持状态：`success`、`error`、`pending`。
 
 
@@ -1281,25 +1260,25 @@ export default defineComponent({
 <template>
   <d-form ref="dFormFeedback" :form-data="formModel">
     <d-form-item prop="name">
-      <d-form-label :required="true" >Name</d-form-label>
+      <d-form-label :required="true" >姓名</d-form-label>
       <d-form-control feedbackStatus="pending">
         <d-input v-model="formModel.name" />
       </d-form-control>
     </d-form-item>
     <d-form-item prop="nickname">
-      <d-form-label :required="true" >Nickname</d-form-label>
+      <d-form-label :required="true" >昵称</d-form-label>
       <d-form-control feedbackStatus="success">
         <d-input v-model="formModel.nickname" />
       </d-form-control>
     </d-form-item>
     <d-form-item prop="age">
-      <d-form-label :required="true" >Age</d-form-label>
+      <d-form-label :required="true" >年龄</d-form-label>
       <d-form-control feedbackStatus="error">
         <d-input v-model="formModel.age" />
       </d-form-control>
     </d-form-item>
     <d-form-item prop="sex">
-      <d-form-label :required="true">Sex</d-form-label>
+      <d-form-label :required="true">性别</d-form-label>
       <d-form-control feedbackStatus="error">
         <d-select v-model="formModel.sex" :options="sexSelectOptions" placeholder="Select your sex"></d-select>
       </d-form-control>
@@ -1335,11 +1314,11 @@ export default defineComponent({
 
 
 <style>
-.demo-form-operation {
+.form-demo-form-operation {
   display: flex;
   align-items: center;
 }
-.demo-btn {
+.form-demo-demo-btn {
   margin-right: 10px;
 }
 </style>
@@ -1358,7 +1337,7 @@ export default defineComponent({
 <template>
   <d-form ref="dFormFeedback2" :form-data="formModel">
     <d-form-item prop="address">
-      <d-form-label :required="true" >Address</d-form-label>
+      <d-form-label :required="true" >地址</d-form-label>
       <d-form-control>
         <d-input v-model="formModel.address" />
         <template v-slot:suffixTemplate>
@@ -1394,8 +1373,6 @@ export default defineComponent({
 
 ### 表单协同验证
 
-> done
-
 在一些场景下，你的多个表单组件互相依赖，需共同校验（如注册场景中的密码输入与确认密码），通过自定义校验器实现校验规则（将密码输入与确认密码的值进行比较）。
 
 
@@ -1405,25 +1382,25 @@ export default defineComponent({
 <template>
   <d-form name="togetherValidateForm" ref="dFormTogetherValidate" :form-data="formModel" labelSize="lg" @submit="onSubmit">
     <d-form-item prop="username">
-      <d-form-label :required="true" >Username</d-form-label>
+      <d-form-label :required="true" >用户名</d-form-label>
       <d-form-control>
         <d-input v-model="formModel.username" v-d-validate-rules="formRules.userNameRule" />
       </d-form-control>
     </d-form-item>
     <d-form-item prop="password">
-      <d-form-label :required="true" >Password</d-form-label>
+      <d-form-label :required="true" >密码</d-form-label>
       <d-form-control>
         <d-input v-model="formModel.password" v-d-validate-rules="formRules.passwordRule" />
       </d-form-control>
     </d-form-item>
     <d-form-item prop="confirmPassword">
-      <d-form-label :required="true" >Confirm Password</d-form-label>
+      <d-form-label :required="true" >确认密码</d-form-label>
       <d-form-control>
         <d-input v-model="formModel.confirmPassword" v-d-validate-rules="formRules.confirmPasswordRule" />
       </d-form-control>
     </d-form-item>
-    <d-form-operation class="demo-form-operation">
-      <d-button type="submit" class="demo-btn">提交</d-button>
+    <d-form-operation class="form-demo-form-operation">
+      <d-button type="submit" class="form-demo-demo-btn">提交</d-button>
       <d-button bsStyle="common" @click="resetForm">重置</d-button>
     </d-form-operation>
   </d-form>
@@ -1493,11 +1470,11 @@ export default defineComponent({
 </script>
 
 <style>
-.demo-form-operation {
+.form-demo-form-operation {
   display: flex;
   align-items: center;
 }
-.demo-btn {
+.form-demo-demo-btn {
   margin-right: 10px;
 }
 </style>
@@ -1519,13 +1496,13 @@ export default defineComponent({
 <template>
   <d-form ref="dFormWithComponent" :form-data="formModel">
     <d-form-item prop="name">
-      <d-form-label :required="true" >Name</d-form-label>
+      <d-form-label :required="true" >姓名</d-form-label>
       <d-form-control>
         <d-input v-model="formModel.name" />
       </d-form-control>
     </d-form-item>
     <d-form-item prop="age">
-      <d-form-label :required="true" >Age</d-form-label>
+      <d-form-label :required="true" >年龄</d-form-label>
       <d-form-control>
         <d-input v-model="formModel.age" />
       </d-form-control>
@@ -1553,11 +1530,11 @@ export default defineComponent({
 </script>
 
 <style>
-.demo-form-operation {
+.form-demo-form-operation {
   display: flex;
   align-items: center;
 }
-.demo-btn {
+.form-demo-demo-btn {
   margin-right: 10px;
 }
 </style>
@@ -1567,65 +1544,67 @@ export default defineComponent({
 
 
 
-### Form Attributes
+### API
+
+d-form参数
 
-| 参数         | 说明                                                         | 类型   | 可选值                              | 默认值       |
-| ------------ | ------------------------------------------------------------ | ------ | ----------------------------------- | ------------ |
-| name         | 可选，设置表单name属性，进行表单提交验证时必选。             | string |                                     |              |
-| formData     | 必选，表单数据                                               | object |                                     |              |
-| layout       | 可选，设置表单的排列方式                                     | string | `horizontal`、`vertical`、`columns` | `horizontal` |
-| labelSize    | 可选，设置 label 的占宽，未设置默认为 100px，'sm'对应 80px，'lg'对应 150px | string | `sm`、`lg`                          | --           |
-| labelAlign   | 可选，设置水平布局方式下，label 对齐方式                     | string | `start`、`center`、`end`            | `start`      |
-| columnsClass | 可选，设置多列表单样式                                       | string |                                     |              |
-| rules        | 可选，设置表单校验规则                                       | object |                                     |              |
+| 参数         | 类型                                  | 默认值       | 说明                                                         | 跳转demo                          |
+| ------------ | ------------------------------------- | ------------ | ------------------------------------------------------------ | --------------------------------- |
+| name         | string                                |              | 可选，设置表单name属性，进行表单提交验证时必选。             | [基础用法](#基础用法)             |
+| formData     | object                                |              | 必选，表单数据                                               | [基础用法](#基础用法)             |
+| layout       | 'horizontal' \|'vertical' \|'columns' | 'horizontal' | 可选，设置表单的排列方式                                     | [基础用法](#基础用法)             |
+| labelSize    | 'sm' \|'lg'                           |              | 可选，设置 label 的占宽，未设置默认为 100px，sm对应 80px，lg对应 150px | [基础用法](#基础用法)             |
+| labelAlign   | 'start' \|'center' \|'end'            | 'start'      | 可选，设置水平布局方式下，label 对齐方式                     | [基础用法](#基础用法)             |
+| columnsClass | string                                |              | 可选，设置多列表单样式                                       | [多列表单](#多列表单)             |
+| rules        | object                                |              | 可选，设置表单校验规则                                       | [响应式表单验证](#响应式表单验证) |
 
 
 
-### Form Methods
+d-form事件
 
-| 方法名 | 说明               | 参数 |
-| ------ | ------------------ | ---- |
-| submit | 可选，提交表单事件 | --   |
+| 事件名 | 类型       | 说明               | 跳转demo                          |
+| ------ | ---------- | ------------------ | --------------------------------- |
+| submit | () => void | 可选，提交表单事件 | [Form验证与提交](#Form验证与提交) |
 
 
 
-### Form-Item Attributes
+d-form-item参数
 
-| 参数         | 说明                                                 | 类型    | 可选值          | 默认值  |
-| ------------ | ---------------------------------------------------- | ------- | --------------- | ------- |
-| prop         | 可选，指定验证表单需验证的字段，验证表单时必选该属性 |         |                 |         |
-| dHasFeedback | 可选，设置当前 formControl 是否显示反馈图标          | boolean | `true`、`false` | `false` |
+| 参数         | 类型    | 默认值  | 说明                                                 | 跳转demo                                      |
+| ------------ | ------- | ------- | ---------------------------------------------------- | --------------------------------------------- |
+| prop         | string  |         | 可选，指定验证表单需验证的字段，验证表单时必选该属性 | [基础用法](#基础用法)                         |
+| dHasFeedback | boolean | 'false' | 可选，设置当前 formControl 是否显示反馈图标          | [指定表单Feedback状态](#指定表单Feedback状态) |
 
 
 
-### Form-Lable Attributes
+d-form-label参数
 
-| 参数     | 说明                                                         | 类型    | 可选值          | 默认值  |
-| -------- | ------------------------------------------------------------ | ------- | --------------- | ------- |
-| required | 可选，表单选项是否必填                                       | boolean | `true`、`false` | `false` |
-| hasHelp  | 可选，表单项是否需要帮助指引                                 | boolean | `true`、`false` | `false` |
-| helpTips | 可选，表单项帮助指引提示内容，需配合 `hasHelp`使用，且`helpTips`的值不能为空字符串才会生效。 | string  |                 | --      |
+| 参数     | 类型    | 默认值  | 说明                                                         | 跳转demo              |
+| -------- | ------- | ------- | ------------------------------------------------------------ | --------------------- |
+| required | boolean | 'false' | 可选，表单选项是否必填                                       | [基础用法](#基础用法) |
+| hasHelp  | boolean | 'false' | 可选，表单项是否需要帮助指引                                 | [基础用法](#基础用法) |
+| helpTips | string  |         | 可选，表单项帮助指引提示内容，需配合 `hasHelp`使用，且`helpTips`的值不能为空字符串才会生效。 | [基础用法](#基础用法) |
 
 
 
-### Form-Control Attributes
+d-form-control参数
 
-| 参数           | 说明                                                       | 类型    | 可选值          | 默认值  |
-| -------------- | ---------------------------------------------------------- | ------- | --------------- | ------- |
-| extraInfo      | 可选，附件信息，一般用于补充表单选项的说明                 | string  |                 | --      |
-| feedbackStatus | 可选，手动指定当前 control 状态反馈                        | boolean | `true`、`false` | `false` |
-| suffixTemplate | 可选，可传入图标模板作为输入框后缀（通过插槽传入icon组件） |         |                 | --      |
+| 参数           | 类型    | 默认值  | 说明                                                       | 跳转demo                                      |
+| -------------- | ------- | ------- | ---------------------------------------------------------- | --------------------------------------------- |
+| extraInfo      | string  |         | 可选，附件信息，一般用于补充表单选项的说明                 | [基础用法](#基础用法)                         |
+| feedbackStatus | boolean | 'false' | 可选，手动指定当前 control 状态反馈                        | [基础用法](#基础用法)                         |
+| suffixTemplate | string  |         | 可选，可传入图标模板作为输入框后缀（通过插槽传入icon组件） | [指定表单Feedback状态](#指定表单Feedback状态) |
 
 
 
 ### Directives
 
-#### v-d-validate-rules
+v-d-validate-rules
 
-| 参数    | 说明               | 类型   | 可选值                                     | 默认值 |
-| ------- | ------------------ | ------ | ------------------------------------------ | ------ |
-| rules   | 必选，表单校验规则 | object |                                            | --     |
-| options | 可选，配置选项     | object | `errorStrategy`、`updateOn`、`popPosition` |        |
+| 参数    | 类型   | 默认值 | 说明                                                         | 跳转demo                              |
+| ------- | ------ | ------ | ------------------------------------------------------------ | ------------------------------------- |
+| rules   | object |        | 必选，表单校验规则，更多规则参考[async-validator](https://www.npmjs.com/package/async-validator) | [模板驱动表单验证](#模板驱动表单验证) |
+| options |        |        | 可选，配置选项                                               | [模板驱动表单验证](#模板驱动表单验证) |
 
 > 该指令仅在`d-form`标签或`d-input`等表单类组件上使用有效。
 
@@ -1637,7 +1616,7 @@ export default defineComponent({
 {[validatorKey]: validatorValue, message: 'some tip messages.'}
 ```
 
-当前DevUI支持的内置校验器validatorKey有：`required`、`minlength`、`maxlength`、`min`、`max`、`requiredTrue`、`email`、`pattern`、`whitespace`。<br>
+当前DevUI支持的内置校验器validatorKey有：`required`、`minlength`、`maxlength`、`min`、`max`、`requiredTrue`、`email`、`pattern`、`whitespace`。更多规则参考[async-validator](https://www.npmjs.com/package/async-validator)。
 
 
 
@@ -1652,3 +1631,56 @@ export default defineComponent({
 
 
 
+### 接口 & 类型定义
+
+IForm
+
+```typescript
+export interface IForm {
+  formData: any
+  labelData: IFormLabel
+  formMitt: Emitter<any>
+  rules: any
+  columnsClass: string
+  messageShowType: string
+} 
+```
+
+
+
+IFormLabel
+
+```typescript
+export interface IFormLabel {
+  layout: string
+  labelSize: string
+  labelAlign: string
+}
+```
+
+
+
+IFormItem
+
+```typescript
+export interface IFormItem {
+  dHasFeedback: boolean
+  prop: string
+  formItemMitt: Emitter<any>
+  resetField(): void
+}
+```
+
+
+
+IFormControl
+
+```typescript
+export interface IFormControl {
+  feedbackStatus: string
+  extraInfo: string
+  formItemMitt: Emitter<any>
+  resetField(): void
+}
+```
+