diff --git a/example/docs/zh-CN/components/form.md b/example/docs/zh-CN/components/form.md
index f87c90eb..3414d9d6 100644
--- a/example/docs/zh-CN/components/form.md
+++ b/example/docs/zh-CN/components/form.md
@@ -4,37 +4,62 @@
 ::: demo
 
 <template>
-  <lay-form @submit="submit" :model="model">
-    <lay-form-item label="账户">
+  <lay-form :model="model">
+    <lay-form-item label="账户" prop="username">
       <lay-input v-model="model.username"></lay-input>
     </lay-form-item>
-    <lay-form-item label="密码">
-      <lay-input v-model="model.password"></lay-input>
+    <lay-form-item label="密码" prop="password">
+      <lay-input v-model="model.password" type="password"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="爱好" prop="hobby">
+      <lay-select v-model="model.hobby">
+        <lay-select-option value="1" label="学习"></lay-select-option>
+        <lay-select-option value="2" label="编码"></lay-select-option>
+        <lay-select-option value="3" label="运动"></lay-select-option>
+      </lay-select>
+    </lay-form-item>
+    <lay-form-item label="特长" prop="specialty">
+      <lay-radio v-model="model.specialty" name="specialty" label="1">写作</lay-radio>
+      <lay-radio v-model="model.specialty" name="specialty" label="2">画画</lay-radio>
+      <lay-radio v-model="model.specialty" name="specialty" label="3">编码</lay-radio>
+    </lay-form-item>
+    <lay-form-item label="描述" prop="desc">
+      <lay-textarea placeholder="请输入描述" v-model="model.desc"></lay-textarea>
     </lay-form-item>
     <lay-form-item>
-      <lay-button naive-type="submit">提交</lay-button>
+      <lay-button @click="submitClick">提交</lay-button>
     </lay-form-item>
   </lay-form>
 </template>
 
 <script>
 import { ref, reactive } from 'vue'
+import {layer} from '@layui/layer-vue'
 
 export default {
   setup() {
 
     const model = reactive({
         username: "admin",
-        password: "admin"
+        password: "123456",
+        specialty: "1"
     })
 
-    const submit = function(val) {
-      alert(JSON.stringify(val))
-    }
+    const submitClick = function(){
+      layer.open({
+        type: 1,
+        title:"表单结果", 
+        content: `<div style="padding: 10px">${JSON.stringify(model)}</div>`, 
+        shade: false,
+        isHtmlFragment: true,
+        btn : [{ text: '确认', callback(index) {  layer.close(index) }}],
+        area : '500px'
+      });
+    };
 
     return {
       model,
-      submit
+      submitClick
     }
   }
 }
@@ -42,38 +67,515 @@ export default {
 
 :::
 
-::: title 表单事件
+::: title 表单基本校验功能
+:::
+
+::: demo
+
+<template>
+  <lay-form :model="validateModel" ref="layFormRef" required>
+    <lay-form-item label="账户" prop="username">
+      <lay-input v-model="validateModel.username"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="密码" prop="password">
+      <lay-input v-model="validateModel.password" type="password">></lay-input>
+    </lay-form-item>
+    <lay-form-item label="爱好" prop="hobby">
+      <lay-select v-model="validateModel.hobby">
+        <lay-select-option value="1" label="学习"></lay-select-option>
+        <lay-select-option value="2" label="编码"></lay-select-option>
+        <lay-select-option value="3" label="运动"></lay-select-option>
+      </lay-select>
+    </lay-form-item>
+    <lay-form-item label="特长" prop="specialty">
+      <lay-radio v-model="validateModel.specialty" name="specialty" label="1">写作</lay-radio>
+      <lay-radio v-model="validateModel.specialty" name="specialty" label="2">画画</lay-radio>
+      <lay-radio v-model="validateModel.specialty" name="specialty" label="3">编码</lay-radio>
+    </lay-form-item>
+    <lay-form-item label="描述" prop="desc">
+      <lay-textarea placeholder="请输入描述" v-model="validateModel.desc"></lay-textarea>
+    </lay-form-item>
+    <lay-form-item>
+      <lay-button @click="validate">提交</lay-button>
+      <lay-button @click="clearValidate">清除校验</lay-button>
+      <lay-button @click="reset">重置表单</lay-button>
+    </lay-form-item>
+  </lay-form>
+</template>
+
+<script>
+import { ref, reactive } from 'vue'
+import {layer} from '@layui/layer-vue'
+
+export default {
+  setup() {
+
+    const validateModel = reactive({
+        username: "",
+        password: "",
+        specialty: "1"
+    })
+
+    const layFormRef = ref(null);
+    // 校验
+    const validate = function() {
+      layFormRef.value.validate((isValidate, model, errors) => {
+         layer.open({
+          type: 1,
+          title:"表单提交结果", 
+          content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(model)} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`, 
+          shade: false,
+          isHtmlFragment: true,
+          btn : [{ text: '确认', callback(index) {  layer.close(index) }}],
+          area : '500px'
+        });
+      });
+    }
+
+    // 清除校验
+    const clearValidate = function() {
+      layFormRef.value.clearValidate();
+    }
+
+    // 重置表单
+    const reset = function() {
+      layFormRef.value.reset();
+      validateModel.specialty = "1"
+    }
+
+    return {
+      validateModel,
+      layFormRef,
+      validate,
+      clearValidate,
+      reset
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 校验规则 - 通过表单配置
+:::
+
+::: demo
+
+<template>
+  <lay-form :model="ruleDemo1" ref="layFormRef1" :rules="rules" required initValidate>
+    <lay-form-item label="邮箱" prop="email">
+      <lay-input v-model="ruleDemo1.email"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="url路径" prop="url">
+      <lay-input v-model="ruleDemo1.url"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="日期" prop="date">
+      <lay-input v-model="ruleDemo1.date"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="用户名" prop="username">
+      <lay-input v-model="ruleDemo1.username"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="年龄" prop="age">
+      <lay-input v-model="ruleDemo1.age"></lay-input>
+    </lay-form-item>
+    <lay-form-item>
+      <lay-button @click="validate1">提交</lay-button>
+    </lay-form-item>
+  </lay-form>
+</template>
+
+<script>
+import { ref, reactive } from 'vue'
+import {layer} from '@layui/layer-vue'
+
+export default {
+  setup() {
+
+    const ruleDemo1 = reactive({
+        email: "",
+        url: "",
+        date: "",
+        username: "",
+        age: null,
+    })
+
+    const rules = ref({
+      email : {
+        type : 'email'
+      },
+      url : {
+        type : 'url'
+      },
+      date : {
+        type : 'date'
+      },
+      username : {
+        type :  'string',
+        min : 8,
+        max : 16
+      },
+      age : {
+        validator(rule, value, callback, source, options){
+          if (value < 18) {
+            callback(new Error(`${rule.field}太过于年轻`));
+          } else {
+            return true;
+          }
+        }
+      }
+    })
+
+    const layFormRef1 = ref(null);
+    // 校验
+    const validate1 = function() {
+      layFormRef1.value.validate((isValidate, model, errors) => {
+         layer.open({
+          type: 1,
+          title:"表单提交结果", 
+          content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(model)} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`, 
+          shade: false,
+          isHtmlFragment: true,
+          btn : [{ text: '确认', callback(index) {  layer.close(index) }}],
+          area : '500px'
+        });
+      });
+    }
+
+    return {
+      ruleDemo1,
+      layFormRef1,
+      validate1,
+      rules
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 校验规则 - 通过表单子项配置
+:::
+
+::: demo
+
+<template>
+  <lay-form :model="ruleDemo2" ref="layFormRef2" required initValidate>
+    <lay-form-item label="邮箱" prop="email" :rules="{type : 'email'}">
+      <lay-input v-model="ruleDemo2.email"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="url路径" prop="url" :rules="{type : 'url'}">
+      <lay-input v-model="ruleDemo2.url"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="日期" prop="date" :rules="{type : 'date'}">
+      <lay-input v-model="ruleDemo2.date"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="用户名" prop="username" 
+      :rules="{
+        type :  'string',
+        min : 8,
+        max : 16
+      }">
+      <lay-input v-model="ruleDemo2.username"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="年龄" prop="age" :rules="ageRules">
+      <lay-input v-model="ruleDemo2.age"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="自定义提示" prop="myEmail" 
+    :rules="{
+      type : 'email',
+      message : '必须为邮箱'
+    }">
+      <lay-input v-model="ruleDemo2.myEmail"></lay-input>
+    </lay-form-item>
+    <lay-form-item>
+      <lay-button @click="validate2">提交</lay-button>
+    </lay-form-item>
+  </lay-form>
+</template>
+
+<script>
+import { ref, reactive } from 'vue'
+import {layer} from '@layui/layer-vue'
+
+export default {
+  setup() {
+
+    const ruleDemo2 = reactive({
+        email: "",
+        url: "",
+        date: "",
+        username: "",
+        age: null,
+        myEmail: "",
+    });
+
+    const ageRules = {
+      validator(rule, value, callback, source, options){
+        if (value < 18) {
+          callback(new Error(`${rule.field}太过于年轻`));
+          return false;
+        }
+        return true;
+      }
+    };
+
+    const layFormRef2 = ref(null);
+    // 校验
+    const validate2 = function() {
+      layFormRef2.value.validate((isValidate, model, errors) => {
+         layer.open({
+          type: 1,
+          title:"表单提交结果", 
+          content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(model)} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`, 
+          shade: false,
+          isHtmlFragment: true,
+          btn : [{ text: '确认', callback(index) {  layer.close(index) }}],
+          area : '500px'
+        });
+      });
+    }
+
+    return {
+      ruleDemo2,
+      layFormRef2,
+      validate2,
+      ageRules
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 原生submit方式校验 -- 校验通过将提交表单 -- 不推荐使用
+:::
+
+::: demo
+
+<template>
+  <lay-form @submit="submit" :model="submitModel" requiredIcons="layui-icon-heart-fill" :use-CN="false" required>
+    <lay-form-item label="账户" prop="username">
+    <template #label>
+      <i class="layui-icon layui-icon-username"></i>
+      账户
+    </template>
+      <lay-input v-model="submitModel.username"></lay-input>
+    </lay-form-item>
+    <lay-form-item label="密码" prop="password">
+      <lay-input v-model="submitModel.password"></lay-input>
+    </lay-form-item>
+    <lay-form-item>
+      <lay-button native-type="submit">提交</lay-button>
+    </lay-form-item>
+  </lay-form>
+</template>
+
+<script>
+import { ref, reactive } from 'vue'
+import {layer} from '@layui/layer-vue'
+
+export default {
+  setup() {
+
+    const submitModel = reactive({
+        username: "",
+        password: ""
+    })
+
+    const submit = function(isValidate, model, errors) {
+      layer.open({
+        type: 1,
+        title:"表单提交结果", 
+        content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(model)} </p> <p>错误信息 : </br>${JSON.stringify(errors)}</p></div>`, 
+        shade: false,
+        isHtmlFragment: true,
+        btn : [{ text: '确认', callback(index) {  layer.close(index) }}],
+        area : '500px'
+      })
+    }
+
+    return {
+      submitModel
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 表单(form)属性
 :::
 
 ::: table
 
-| Name  | Description | Accepted Values |
-| ----- | ----------- | --------------- |
-| model | 表单绑定值  | --              |
+| 属性          | 描述                                                            |   类型    |     可选值     | 默认值   |
+| ------------- | -------------------------------------------------------------- | --------- | -------------- | ------- |
+| model         | 表单绑定值                                                      | `object`  |        -       |    {}   |
+| required      | 是否必填                                                        | `boolean` | `true` `false` | `false` |
+| rules         | 表单校验规则; <br>可查看[async-validator](https://github.com/yiminghe/async-validator)  | `object`  |       -        |     -   |
+| initValidate  | 是否一开始就校验表单                                             | `boolean` | `true` `false` | `false` |
+| useCN         | 是否使用中文错误提示                                             | `boolean` | `true` `false` | `false` |
+| requiredIcons | 必填前缀图标`class`                                             | `string`  |         -      | `*` |
+| required-erroer-message | 必填错误提示信息                                    | `string`  |         -     | `%s不能为空`|
+| validate-message | 自定义校验错误提示信息; <br>由于内置了中文错误提示，可按需求增量增加<br>可参考 [layui-vue 内置中文错误提示](https://gitee.com/layui-vue/layui-vue/tree/master/src/module/formItem/cnValidateMessage.ts)   | `string`  |         -     | `%s不能为空`|
 
 :::
 
-::: title 表单事件
+::: title 表单(form)事件
 :::
 
 ::: table
 
-| Name   | Description | Accepted Values |
-| ------ | ----------- | --------------- |
-| submit | 提交事件    | --              |
+|       属性     | 描述                            |     回调参数   |
+| ------------- | ------------------------------- | -------------- |
+| submit        | 提交事件`(不推荐使用)`              | (`isValidate`, `model`, `errors`)<br><br> `isValidate`: (`boolean`)是否校验通过<br><br> `model`: (`object`)表单绑定的值<br><br> `errors`: (`Array`)校验结果的错误信息 |
+
 
 :::
 
-::: title 表单项属性
+::: title 表单(form)方法
 :::
 
 ::: table
 
-| Name  | Description | Accepted Values |
-| ----- | ----------- | --------------- |
-| label | 标题名称    | --              |
+|       属性     | 描述           |     入参       |
+| ------------- | -------------- | -------------- |
+| validate      | 表单校验; <br>如果没有`callback`回调，会返回`Promise`,  <br> `Promise`参数为{`isValidate`, `model`, `errors`}<br> 参数具体描述请看上面表单`submit`提交事件   | (`fields` `[可选]`, `callback` `[可选]`)<br><br> `fields`: (`string` / `string[]` / `function`)<br>单独校验的字段，<br>该字段如果为`function`, <br>则认为`callback`入参，校验全部字段;<br><br> `callback`: (`function`)校验之后的回调，<br>回调参数为(`isValidate`, `model`, `errors`)；<br>参数具体描述请看上面表单`submit`提交事件|
+| clearValidate  | 清除表单校验  | (`fields`[可选])<br><br> `fields`: (`string` / `string[]`)<br>需要进行清除校验的表单字段, 如果该字段为空则清除全部校验|
+| reset          | 重置表单所有值 |  -  |
+
 
 :::
 
+::: title 表单项(form-item)属性
+:::
+
+::: table
+
+| 属性          | 描述                                                            |   类型    |     可选值     | 默认值   |
+| ------------- | -------------------------------------------------------------- | --------- | -------------- | ------- |
+| prop          | 在表单绑定值(`model`)中字段`key`                                 | `string`  |        -       |    -    |
+| label         | 子项前边描述值，**尽量填写**，中文校验错误需要用到                 | `string`  |        -       |    -    |
+| required      | 是否必填                                                        | `boolean` | `true` `false` | `false` |
+| rules         |  表单校验规则; <br>可查看[async-validator](https://github.com/yiminghe/async-validator)  | `object` | - | - |
+| error-message | 表单校验失败固定提示语                                           | `string`  |`block` `inline`| `block` |
+| mode          | 表单项显示的模式，`块元素` / `行元素`                             | `string`  |`block` `inline`| `block` |
+
+:::
+
+::: title 表单项(form-item)方法
+:::
+
+::: table
+
+|       属性     | 描述           |     入参       |
+| ------------- | -------------- | -------------- |
+| validate      | 表单校验; | (`callback` `[可选]`)<br><br> `callback`: (`function`)校验之后的回调，<br>回调参数为(`errors`, `fields`)；<br><br> `errors`: (`Array`)校验结果的错误信息；<br><br> `fields`: (`Array`)当前校验的字段信息|
+| clearValidate  | 清除表单校验   |      -         |
+
+
+:::
+
+::: title 表单项(form-item)插槽
+:::
+
+::: table
+
+|       属性    |                                    描述                           |                  可使用参数             |
+| ------------- | ---------------------------------------------------------------- | --------------------------------------- |
+|       -       | 默认插槽                                                          | 传递进来的`props`和表单绑定的值(`model`)  |
+|     label     | 子项前边描述插槽<br>如果使用此插槽，`props`**尽量**也传递`label`参数 | 传递进来的`props`和表单绑定的值(`model`)  |
+|    required   | 必填前缀插槽                                                      | `*` / `表单props` 中的 `requiredIcons`   |
+
+:::
+
+::: title 关于 async-validator 的使用
+:::
+
+查看： https://github.com/yiminghe/async-validator  
+中文翻译： https://www.cnblogs.com/wozho/p/10955525.html
+
+::: title async-validator 基本校验类型
+:::
+
+::: table
+|       属性   |         描述       |        使用方式     |
+| -------------| ----------------- | ------------------- |
+|     number   | 数字              | `{type : 'number'}`  |
+|     boolean  | 布尔类型          | `{type : 'boolean'}` |
+|     method   | 方法              | `{type : 'method'}`  |
+|     regexp   | 正则表达式        | `{type : 'regexp'}`  |
+|     integer  | 整型数字          | `{type : 'integer'}` |
+|     float    | 浮点小数          | `{type : 'float'}` |
+|     array    | 数组              | `{type : 'array'}` |
+|     object   | 对象              | `{type : 'object'}` |
+|     enum     | 枚举              | `{type : 'enum'}` |
+|     date     | 日期              | `{type : 'date'}` |
+|     url      | url               | `{type : 'url'}` |
+|     hex      | 十六进制          | `{type : 'hex'}` |
+|     email    | 邮箱              | `{type : 'email'}` |
+:::  
+
+::: title async-validator 中 validator参数使用
+:::
+
+```javascript
+{
+  validator: (rule, value) => value === 'root'
+}
+```
+
+::: title async-validator 中 asyncValidator参数使用
+:::
+
+```javascript
+{
+  asyncValidator: (rule, value) => {
+    return new Promise((resolve, reject) => {
+      if (value < 18) {
+        reject('too young');  // reject with error message
+      } else {
+        resolve();
+      }
+    });
+  }
+}
+```
+
+
+::: title form 配置 async-validator 的使用
+:::
+
+```javascript
+{
+    key : rule // key为表单子项需要校验的对应key名称， rule为校验规则，格式为{}
+}
+// 例如 表单绑定值为 {email : 'xxx', username: 'xxxxx'}
+// 需要校验邮箱,而邮箱输入框在表单绑定的值中key为email，
+// 需要校验用户名长度为8到16之间,而用户名输入框在表单绑定的值中key为username，
+{
+  email : {
+    type :  'email'
+  },
+  username : {
+    type :  'string',
+    min : 8,
+    max : 16
+  }
+}
+```
+
+::: title form-item 配置 async-validator 的使用
+:::
+
+```javascript
+// 例如 表单绑定值为 {email : 'xxx', phone: 'xxxxx'}
+// 需要校验邮箱,而邮箱输入框在表单绑定的值中key为email
+{
+  type :  'email'
+}
+```
+
+
 ::: comment
 :::
\ No newline at end of file
diff --git a/package.json b/package.json
index 8ff46ba1..51c41179 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "@layui/hooks-vue": "^0.1.6",
     "@layui/icons-vue": "^1.0.1",
     "@layui/layer-vue": "^1.2.0",
+    "async-validator": "^4.0.7",
     "evtd": "^0.2.3",
     "vue": "^3.2.26",
     "vue-router": "^4.0.12"
diff --git a/src/module/form/index.vue b/src/module/form/index.vue
index e4bb4ffa..cb49941e 100644
--- a/src/module/form/index.vue
+++ b/src/module/form/index.vue
@@ -1,25 +1,140 @@
 <template>
-  <form class="layui-form" @submit="submit">
+  <form class="layui-form" :onsubmit="submit">
     <slot />
   </form>
 </template>
 
-<script setup name="LayForm" lang="ts">
+<script lang="ts">
+export default{
+  name: 'LayForm'
+}
+</script>
+
+<script setup lang="ts">
+import { toRefs, provide,reactive, onMounted } from "vue"
+import { Rule, ValidateError, ValidateMessages } from "async-validator"
+import {layFormKey, LayFormItemContext, FormCallback, modelType} from "../type/form"
 
 const props = withDefaults(
   defineProps<{
-    model?: object
+    model?: modelType
+    required?: boolean,
+    rules?: Rule,
+    initValidate?: boolean,
+    requiredIcons?: string,
+    requiredErrorMessage?: string,
+    validateMessage?: ValidateMessages,
+    useCN?: boolean 
   }>(),
   {
     model: function(){
       return {}
-    }
+    },
+    useCN : true,
+    requiredIcons : '',
+    initValidate : false
   }
 )
 
+const formItems : LayFormItemContext[] = [];
+const formItemMap : {[key:string]:LayFormItemContext} = {};
+
 const emit = defineEmits(['submit'])
 
+// 初始化表单就进行校验
+onMounted(()=>{
+  props.initValidate && validate()?.catch(err => {});
+})
+
+// 原生提交表单事件
 const submit = function () {
-  emit('submit',props.model)
+  let _isValidate = false;
+  validate((isValidate, model, errors) => {
+    _isValidate = isValidate as boolean;
+    emit('submit', isValidate, model, errors);
+  });
+
+  // 如果表单失败则阻止提交表单，成功则进行提交表单
+  return _isValidate;
 }
+
+/**
+ * 校验表单数据
+ * @param fields 需要校验的表单字段(string|string[]); 该字段如果为function, 则默认为回调函数，校验全部字段;
+ * @param callback 校验表单之后的回调函数
+ **/
+const validate = function(fields?: string|string[]|FormCallback|null, callback?: FormCallback | null){
+  // 根据参数识别需要校验的表单项
+  let validateItems : LayFormItemContext[]  = formItems;
+  if (typeof fields === 'function') {
+    callback = fields;
+  } else if (typeof fields === 'string' || (Array.isArray(fields) && fields.length > 0)) {
+    validateItems = [];
+    const validateFields = !fields ? [] : ([] as string[]).concat(fields);
+    validateFields.forEach(field => formItemMap[field] && validateItems.push(formItemMap[field]));
+  }
+  // 通过调用每个子项进行校验
+  let errorsArrs: ValidateError[] = [];
+  validateItems.forEach(filed => {
+    filed.validate((errors, _fields)=>{
+      errorsArrs = errorsArrs.concat(errors as ValidateError[]);
+    });
+  });
+  const isValidate = errorsArrs.length === 0;
+  // 有回调则进行回调
+  if (typeof callback === 'function') {
+    isValidate ? callback(true, props.model, null) : callback(false, props.model, errorsArrs);
+    return null;
+  }
+
+  // 没有回调则创建一个Promise的链式调用
+  return new Promise((resolve, reject) => {
+    const callbackParams = {
+      isValidate, 
+      model : props.model, 
+      errors: isValidate ? null : errorsArrs
+    };
+    callbackParams.isValidate ? resolve(callbackParams) : reject(callbackParams);
+  });
+}
+
+/**
+ * 清除校验
+ * @param fields 需要进行清除校验的表单字段(string|string[]); 该字段如果为null, 则默认为全部字段清除校验;
+ **/
+const clearValidate = function(fields?: string | string[]){
+  const clearFields = !fields ? [] : ([] as string[]).concat(fields);
+  if (clearFields.length === 0) {
+    formItems.forEach(filed => filed.clearValidate());
+  } else {
+    clearFields.forEach(field => formItemMap[field] && formItemMap[field].clearValidate());
+  }
+}
+
+/**
+ * 重置表单所有值
+ **/
+const reset = function(){
+  for (const key in props.model) {
+    props.model[key] = null;
+  }
+  // 重新校验
+  setTimeout(()=>validate()?.catch(err => {}), 0);
+}
+
+// 添加子项
+const addField = function(item : LayFormItemContext) {
+  formItems.push(item);
+  formItemMap[item.prop as string] = item;
+}
+
+defineExpose({validate, clearValidate, reset});
+
+provide(layFormKey, reactive({
+  formItems, 
+  addField,
+  clearValidate,
+  validate,
+  ...toRefs(props)
+}));
 </script>
diff --git a/src/module/formItem/cnValidateMessage.ts b/src/module/formItem/cnValidateMessage.ts
new file mode 100644
index 00000000..5e6dab9a
--- /dev/null
+++ b/src/module/formItem/cnValidateMessage.ts
@@ -0,0 +1,49 @@
+import { ValidateMessages } from "async-validator";
+// 中文翻译 --> 根据 async-validator 中 ValidateMessages 进行翻译
+export default {
+    default: "%s验证失败",
+    required: "%s不能为空",
+    enum: "%s不在枚举%s里面",
+    whitespace: "%s不能为空",
+    date: {
+        format: "%s日期%s不是一个有效格式的日期%s",
+        parse: "%s无法解析为日期,%s是无效的",
+        invalid: "%s日期%s是无效的"
+    },
+    types: {
+        number: '%s不是一个有效的数字',
+        boolean: '%s不是一个有效的布尔类型',
+        method: '%s不是一个有效的方法',
+        regexp: '%s不是一个有效的正则表达式',
+        integer: '%s不是一个有效的整型数字',
+        float: '%s不是一个有效的浮点小数',
+        array: '%s不是一个有效的数组',
+        object: '%s不是一个有效的对象',
+        enum: '%s不是一个有效的枚举',
+        date: '%s不是一个有效的日期',
+        url: '%s不是一个有效的url',
+        hex: '%s不是一个有效的十六进制',
+        email: '%s不是一个有效的邮箱'
+    },
+    string: {
+        len: "%s必须是长度为%s个字符",
+        min: "%s最小长度为%s个字符",
+        max: "%s最长%s个字符",
+        range: "%s字符长度需要在%s和%s直接"
+    },
+    number: {
+        len: "%s长度必须为%s",
+        min: "%s必须小于%s",
+        max: "%s必须大于%s",
+        range: "%s需要在%s和%s之间"
+    },
+    array: {
+        len: "%s长度必须为%s",
+        min: "%s长度必须小于%s",
+        max: "%s长度必须大于%s",
+        range: "%s长度需要在%s和%s之间"
+    },
+    pattern: {
+        "mismatch": "%s值%s不能匹配%s"
+    }
+} as ValidateMessages;
\ No newline at end of file
diff --git a/src/module/formItem/index.less b/src/module/formItem/index.less
new file mode 100644
index 00000000..83650ef7
--- /dev/null
+++ b/src/module/formItem/index.less
@@ -0,0 +1,47 @@
+@error_color : red;
+
+.layui-required{
+    color: @error_color;
+    font-size: 12px;
+    line-height: 1;
+}
+
+.layui-form .layui-form-item{
+    .layui-input-block
+    ,.layui-input-inline{
+        .layui-form-danger {
+            border-color: #ff5722 !important;
+        }
+    }
+}
+ 
+.layui-error-message {
+    color: @error_color;
+    font-size: 12px;
+    line-height: 1;
+    padding-top: 2px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+}
+
+.layui-error-message-anim {
+    -ms-transform-origin: 0 0; 
+    -webkit-transform-origin: 0 0; 
+    transform-origin: 0 0;
+    -webkit-animation: layui-top-show-anim 0.3s ease 1;
+    animation: layui-top-show-anim 0.3s ease 1;
+}
+
+
+@keyframes layui-top-show-anim {
+  0% {
+    opacity: 0.3;
+    transform: rotateX(45deg);
+  }
+
+  100% {
+    opacity: 1;
+    transform: rotateX(0);
+  }
+}
\ No newline at end of file
diff --git a/src/module/formItem/index.vue b/src/module/formItem/index.vue
index f7db647e..fa4071bb 100644
--- a/src/module/formItem/index.vue
+++ b/src/module/formItem/index.vue
@@ -1,21 +1,140 @@
 <template>
-  <div class="layui-form-item">
-    <label class="layui-form-label">{{ label }}</label>
+  <div class="layui-form-item" ref="formItemRef">
+    <label class="layui-form-label">
+      <span v-if="props.prop &&isRequired" :class="['layui-required', 'layui-icon'].concat(layForm.requiredIcons??'')">
+        <slot name="required" :props="{...props, model: layForm.model}">{{layForm.requiredIcons? '' : '*'}}</slot>
+      </span>
+      <slot name="label" :props="{...props, model: layForm.model}">
+        {{ label }}
+      </slot>
+    </label>
     <div :class="[mode ? 'layui-input-' + mode : '']">
-      <slot />
+      <div ref="slotParent">
+        <slot :props="{...props, model: layForm.model}"/>
+      </div>
+      <span v-if="errorStatus" :class="['layui-error-message', {'layui-error-message-anim': errorStatus}]">{{errorMsg}}</span>
     </div>
   </div>
 </template>
 <script setup name="LayFormItem" lang="ts">
-import { defineProps, withDefaults } from 'vue'
+import "./index.less";
+import { defineProps, inject, withDefaults, ref, reactive, toRefs, onMounted, computed, watch} from 'vue'
+import {layFormKey, LayFormContext, LayFormItemContext, FieldValidateError} from "../type/form"
+import Schema, { Rule, RuleItem, Rules, ValidateCallback, ValidateError, ValidateMessages} from 'async-validator';
+import cnValidateMessage from './cnValidateMessage';
 
 const props = withDefaults(
   defineProps<{
+    prop?: string
     mode?: string
     label?: string
+    errorMessage?: string
+    rules?: Rule
+    required?: boolean
   }>(),
   {
     mode: 'block'
   }
 )
+
+const layForm = inject(layFormKey, {} as LayFormContext)
+const formItemRef = ref<HTMLDivElement>()
+const slotParent = ref<HTMLDivElement>()
+
+// 是否必填
+const isRequired = computed(()=>{
+  return props.required || layForm.required;
+})
+
+// 拼接校验规则
+const ruleItems = computed(()=>{
+  const prop = props.prop;
+  if (!prop) {
+    return {};
+  }
+  
+  let rulesArrs : RuleItem[] = [];
+  if (isRequired.value) {
+    rulesArrs.push({required: true});
+  }
+  if (props.rules) {
+    rulesArrs = rulesArrs.concat((props.rules as RuleItem | RuleItem[]));
+  }
+  if (layForm.rules && layForm.rules[prop]) {
+    rulesArrs = rulesArrs.concat((layForm.rules[prop] as RuleItem | RuleItem[]));
+  }
+  return rulesArrs;
+});
+
+// 值 计算 和 监听
+const filedValue = computed(()=> props.prop ? layForm.model[props.prop] : undefined);
+watch(()=>filedValue.value, (val)=> validate());
+
+// 错误状态和信息
+const errorStatus = ref(false);
+const errorMsg = ref();
+// 校验数据有效性
+const validate = (callback ?: ValidateCallback)=> {
+  if (props.prop && (ruleItems.value as RuleItem[]).length > 0) {
+    // 校验规则
+    const descriptor : Rules = {};
+    descriptor[layForm.useCN? (props.label||props.prop ): props.prop] = ruleItems.value;
+    const validator = new Schema(descriptor);
+    
+    let model : {[key : string]:any} = {};
+    let validateMessage = null;
+    // 使用中文错误提示
+    if (layForm.useCN) {
+      validateMessage =  Object.assign({}, cnValidateMessage, layForm.validateMessage);
+      model[props.label||props.prop] = filedValue.value;
+    } else {
+      layForm.validateMessage &&  (validateMessage = layForm.validateMessage);
+      model[props.prop] = filedValue.value;
+    }
+    // 自定义校验消息
+    layForm.requiredErrorMessage && (validateMessage = Object.assign(validateMessage, {required : layForm.requiredErrorMessage}));
+    validateMessage && validator.messages(validateMessage);
+    
+    // 开始校验
+    validator.validate(model, (errors, fields) => {
+      errorStatus.value = errors !== null && errors.length > 0;
+      const slotParentDiv = slotParent.value as HTMLDivElement;
+      if (errorStatus.value) {
+        const _errors = (errors as FieldValidateError[]);
+        // 如果是中文,将错误信息转换成FieldValidateError类型
+        layForm.useCN && _errors.forEach(error => {
+          error.label = props.label;
+          error.field = props.prop;
+        })
+        errorMsg.value = props.errorMessage??_errors[0].message;
+        slotParentDiv.childElementCount > 0 && slotParentDiv.firstElementChild?.classList.add('layui-form-danger');
+        callback && callback(_errors, fields);
+      } else {
+        clearValidate();
+      }
+    });
+  }
+}
+
+// 清除校验
+const clearValidate = ()=> {
+  errorStatus.value = false;
+  errorMsg.value = '';
+  const slotParentDiv = slotParent.value as HTMLDivElement;
+  slotParentDiv.childElementCount > 0 && slotParentDiv.firstElementChild?.classList.remove('layui-form-danger');
+}
+
+defineExpose({validate, clearValidate});
+
+onMounted(()=>{
+  if (props.prop) {
+    layForm.addField(reactive({
+      ...toRefs(props),
+      $el: formItemRef,
+      validate,
+      clearValidate
+    }) as LayFormItemContext);
+  }
+})
+
 </script>
diff --git a/src/module/select/index.vue b/src/module/select/index.vue
index 307a8ec0..bfaa4f03 100644
--- a/src/module/select/index.vue
+++ b/src/module/select/index.vue
@@ -41,10 +41,10 @@ const props = defineProps<{
 const openState = ref(false)
 
 const open = function () {
-  openState.value = true
+  openState.value = !openState.value
 }
 
-const selectItem = reactive({ label: '', value: props.modelValue })
+const selectItem = reactive({ label: null, value: props.modelValue })
 
 provide('selectItem', selectItem)
 provide('openState', openState)
@@ -56,4 +56,12 @@ watch(selectItem, function (item) {
   emit('change', item.value)
   emit('update:modelValue', item.value)
 })
+
+watch(()=>props.modelValue, function (value) {
+   if (!value) {
+    selectItem.label = null;
+    selectItem.value = '';
+    emit('update:modelValue', null);
+  }
+})
 </script>
diff --git a/src/module/type/form.ts b/src/module/type/form.ts
new file mode 100644
index 00000000..0a14155a
--- /dev/null
+++ b/src/module/type/form.ts
@@ -0,0 +1,37 @@
+import type { ValidateCallback, ValidateError, ValidateMessages } from 'async-validator'
+
+export const layFormKey = 'LayForm'
+
+export interface LayFormContext {
+    model: modelType
+    required?: boolean
+    requiredErrorMessage?: string
+    validateMessage: ValidateMessages
+    rules?: Record<string, unknown>
+    useCN : boolean
+    requiredIcons?: string
+    addField: (field: LayFormItemContext) => void
+}
+
+export interface LayFormItemContext {
+    prop?: string
+    $el: HTMLDivElement
+    required?: boolean
+    rules?: Record<string, unknown>
+    validate(callback?: ValidateCallback): void
+    clearValidate(): void
+}
+
+export declare type modelType = { [key: string]: any }
+
+export declare interface FormCallback {
+    (
+        isValid?: boolean, 
+        model?: modelType,
+        errors?: ValidateError[] | null
+    ): void
+}
+
+export declare interface FieldValidateError extends ValidateError {
+    label ?: string
+}
\ No newline at end of file
diff --git a/src/module/type/index.ts b/src/module/type/index.ts
index 2481e0c1..3c1ad287 100644
--- a/src/module/type/index.ts
+++ b/src/module/type/index.ts
@@ -1,2 +1,3 @@
 export * from './public'
 export * from './select'
+export * from './form'