From 817bfd9e5874aac7e3e15f2f58ebbe31da0451cc Mon Sep 17 00:00:00 2001
From: sheepluo <974383157@qq.com>
Date: Sun, 23 Jan 2022 17:10:55 +0800
Subject: [PATCH] feat(form): improve documents and support complicated data
 validate (#310)

* feat(form): improve documents

* docs(form): improve demo code

* feat(form): support complicated data validate

* test: update snapshots

* fix(form): ruleName

* feat: update common

Co-authored-by: chaishi <yaoyanhuoyi@qq.com>
---
 examples/form/demos/base.vue                  |  30 +-
 examples/form/demos/clear-validate.vue        | 149 ++++++
 examples/form/demos/custom-validator.vue      |  55 +-
 examples/form/demos/disabled.vue              |  66 +++
 examples/form/demos/reset.vue                 |  66 +++
 examples/form/demos/size.vue                  |  74 +++
 .../form/demos/validate-complicated-data.vue  | 171 +++++++
 examples/form/demos/validate-message.vue      |  66 +++
 examples/form/demos/validator-status.vue      |  46 +-
 examples/form/demos/validator.vue             |  76 +--
 src/_common                                   |   2 +-
 src/form/form-item.tsx                        |  13 +-
 test/ssr/__snapshots__/ssr.test.js.snap       | 480 +++++++++++++++++-
 13 files changed, 1177 insertions(+), 117 deletions(-)
 create mode 100644 examples/form/demos/clear-validate.vue
 create mode 100644 examples/form/demos/disabled.vue
 create mode 100644 examples/form/demos/reset.vue
 create mode 100644 examples/form/demos/size.vue
 create mode 100644 examples/form/demos/validate-complicated-data.vue
 create mode 100644 examples/form/demos/validate-message.vue

diff --git a/examples/form/demos/base.vue b/examples/form/demos/base.vue
index 9eca5b768..86d48f298 100644
--- a/examples/form/demos/base.vue
+++ b/examples/form/demos/base.vue
@@ -1,42 +1,32 @@
 <template>
   <div>
-    <t-form
-      :data="formData"
-      ref="form"
-      @reset="onReset"
-      @submit="onSubmit"
-      :colon="true"
-    >
-      <t-form-item label="姓名" name='name'>
+    <t-form :data="formData" ref="form" @reset="onReset" @submit="onSubmit" :colon="true">
+      <t-form-item label="姓名" name="name">
         <t-input v-model="formData.name" placeholder="请输入内容"></t-input>
       </t-form-item>
-      <t-form-item label="手机号码" name='tel'>
+      <t-form-item label="手机号码" name="tel">
         <t-input v-model="formData.tel" placeholder="请输入内容"></t-input>
       </t-form-item>
-      <t-form-item label="接收短信" name='status'>
+      <t-form-item label="接收短信" name="status">
         <t-switch v-model="formData.status"></t-switch>
       </t-form-item>
-      <t-form-item label="性别" name='gender'>
-        <t-radio-group v-model="formData.gender" >
+      <t-form-item label="性别" name="gender">
+        <t-radio-group v-model="formData.gender">
           <t-radio value="1">男</t-radio>
           <t-radio value="2">女</t-radio>
         </t-radio-group>
       </t-form-item>
-      <t-form-item label="课程" name='course'>
-        <t-checkbox-group
-          v-model="formData.course"
-          :options="courseOptions"
-        ></t-checkbox-group>
+      <t-form-item label="课程" name="course">
+        <t-checkbox-group v-model="formData.course" :options="courseOptions"></t-checkbox-group>
       </t-form-item>
       <t-form-item style="padding-top: 8px">
         <t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
-        <t-button  theme="default" variant="base" type="reset">重置</t-button>
+        <t-button theme="default" variant="base" type="reset">重置</t-button>
       </t-form-item>
     </t-form>
   </div>
 </template>
 <script>
-
 const INITIAL_DATA = {
   name: '',
   tel: '',
@@ -58,9 +48,11 @@ export default {
   },
 
   methods: {
+    // 重置方法：this.$refs.reset()
     onReset() {
       this.$message.success('重置成功');
     },
+    // 提交方法：this.$refs.submit()
     onSubmit({ validateResult, firstError }) {
       if (validateResult === true) {
         this.$message.success('提交成功');
diff --git a/examples/form/demos/clear-validate.vue b/examples/form/demos/clear-validate.vue
new file mode 100644
index 000000000..f76dd8b4c
--- /dev/null
+++ b/examples/form/demos/clear-validate.vue
@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <t-form :data="formData" :rules="rules" ref="form" @reset="onReset" @submit="onSubmit" scrollToFirstError="smooth">
+      <t-form-item label="用户名" help="这是用户名字段帮助说明" name="account">
+        <t-input v-model="formData.account"></t-input>
+      </t-form-item>
+      <t-form-item label="个人简介" help="一句话介绍自己" name="description">
+        <t-input v-model="formData.description"></t-input>
+      </t-form-item>
+      <t-form-item label="密码" name="password">
+        <t-input type="password" v-model="formData.password"></t-input>
+      </t-form-item>
+      <t-form-item label="邮箱" name="email">
+        <t-input v-model="formData.email"></t-input>
+      </t-form-item>
+      <t-form-item label="性别" name="gender">
+        <t-radio-group v-model="formData.gender">
+          <t-radio value="male">男</t-radio>
+          <t-radio value="femal">女</t-radio>
+        </t-radio-group>
+      </t-form-item>
+      <t-form-item label="课程" name="course">
+        <t-checkbox-group v-model="formData.course" :options="courseOptions"></t-checkbox-group>
+      </t-form-item>
+      <t-form-item label="学院" name="college">
+        <t-select v-model="formData.college" class="demo-select-base" clearable>
+          <t-option v-for="(item, index) in options" :value="item.value" :label="item.label" :key="index">
+            {{ item.label }}
+          </t-option>
+        </t-select>
+      </t-form-item>
+      <t-form-item
+        label="入学时间"
+        name="date"
+        :rules="[{ date: { delimiters: ['/', '-', '.'] }, message: '日期格式有误' }]"
+      >
+        <t-input v-model="formData.date"></t-input>
+      </t-form-item>
+      <t-form-item label="个人网站" name="content.url">
+        <t-input v-model="formData.content.url"></t-input>
+      </t-form-item>
+      <t-form-item style="padding-top: 8px">
+        <t-button theme="primary" type="submit" style="margin-right: 10px"> 提交 </t-button>
+        <t-button theme="default" variant="base" type="reset" style="margin-right: 10px"> 重置 </t-button>
+        <t-button theme="default" variant="base" @click="handleClear" style="margin-right: 10px">
+          清空校验结果
+        </t-button>
+        <t-button theme="default" variant="base" @click="clearFieldsValidateResult"> 清除指定字段的校验结果 </t-button>
+      </t-form-item>
+    </t-form>
+  </div>
+</template>
+<script>
+const INITIAL_DATA = {
+  account: '',
+  password: '',
+  description: '',
+  email: '',
+  gender: '',
+  college: '',
+  date: '',
+  content: {
+    url: '',
+  },
+  course: [],
+};
+export default {
+  data() {
+    return {
+      formData: { ...INITIAL_DATA },
+      courseOptions: [
+        { label: '语文', value: '1' },
+        { label: '数学', value: '2' },
+        { label: '英语', value: '3' },
+        { label: '体育', value: '4' },
+      ],
+      options: [
+        { label: '计算机学院', value: '1' },
+        { label: '软件学院', value: '2' },
+        { label: '物联网学院', value: '3' },
+      ],
+      rules: {
+        account: [
+          { required: true, message: '姓名必填' },
+          { min: 2, message: '至少需要两个字符，一个中文等于两个字符' },
+          { max: 10, message: '姓名字符长度超出' },
+        ],
+        description: [
+          { validator: (val) => val.length >= 5, message: '至少 5 个字，中文长度等于英文长度' },
+          { validator: (val) => val.length < 20, message: '不能超过 20 个字，中文长度等于英文长度' },
+        ],
+        password: [
+          { required: true, message: '密码必填' },
+          { len: 8, message: '请输入 8 位密码' },
+          { pattern: /[A-Z]+/, message: '密码必须包含大写字母' },
+        ],
+        email: [
+          { required: true, message: '邮箱必填' },
+          { email: { ignore_max_length: true }, message: '请输入正确的邮箱地址' },
+        ],
+        gender: [{ required: true, message: '性别必填' }],
+        course: [
+          { required: true, message: '课程必填' },
+          { validator: (val) => val.length <= 2, message: '最多选择 2 门课程' },
+        ],
+        'content.url': [
+          { required: true, message: '个人网站必填' },
+          {
+            url: {
+              protocols: ['http', 'https', 'ftp'],
+              require_protocol: true,
+            },
+            message: '请输入正确的个人主页',
+          },
+        ],
+      },
+    };
+  },
+
+  methods: {
+    onReset() {
+      this.$message.success('重置成功');
+      console.log('formData', this.formData);
+    },
+    onSubmit({ validateResult, firstError }) {
+      if (validateResult === true) {
+        this.$message.success('提交成功');
+      } else {
+        console.log('Errors: ', validateResult);
+        this.$message.warning(firstError);
+      }
+    },
+    handleClear() {
+      this.$refs.form.clearValidate();
+    },
+    // 清除指定字段的校验结果
+    clearFieldsValidateResult() {
+      this.$refs.form.clearValidate(['email', 'course', 'content.url']);
+      this.$message.success('已清除邮箱、课程、个人网站等字段校验结果');
+    },
+  },
+};
+</script>
+
+<style scoped>
+.demo-select-base {
+  width: 300px;
+}
+</style>
diff --git a/examples/form/demos/custom-validator.vue b/examples/form/demos/custom-validator.vue
index 28d70fad8..98cf590cc 100644
--- a/examples/form/demos/custom-validator.vue
+++ b/examples/form/demos/custom-validator.vue
@@ -1,37 +1,27 @@
 <template>
   <div>
-    <t-form
-      :data="formData"
-      :rules="rules"
-      ref="form"
-      @reset="onReset"
-      @submit="onSubmit"
-      @validate="onValidate"
-    >
-      <t-form-item label="用户名"  name="account">
-        <t-input v-model="formData.account" @blur="handleBlur()"></t-input>
+    <t-form :data="formData" :rules="rules" ref="form" @reset="onReset" @submit="onSubmit" @validate="onValidate">
+      <t-form-item label="用户名" name="account">
+        <t-input v-model="formData.account"></t-input>
       </t-form-item>
-      <t-form-item label="密码" name="password" help="同一个校验方法可输出不同的错误信息和类型，依次输入：1234 观察变化">
-        <t-input
-          type="password"
-          v-model="formData.password"
-        ></t-input>
+      <t-form-item
+        label="密码"
+        name="password"
+        help="同一个校验方法可输出不同的错误信息和类型，依次输入：1234 观察变化"
+      >
+        <t-input type="password" v-model="formData.password"></t-input>
       </t-form-item>
-      <t-form-item label="确认密码" name="rePassword" help="在此处体验普通自定义校验方法">
-        <t-input
-          type="password"
-          v-model="formData.rePassword"
-        ></t-input>
+      <t-form-item label="确认密码" name="rePassword" help="自定义异步校验方法">
+        <t-input type="password" v-model="formData.rePassword"></t-input>
       </t-form-item>
       <t-form-item style="padding-top: 8px">
         <t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
-        <t-button  theme="default" variant="base" type="reset">重置</t-button>
+        <t-button theme="default" variant="base" type="reset">重置</t-button>
       </t-form-item>
     </t-form>
   </div>
 </template>
 <script>
-
 const INITIAL_DATA = {
   account: '',
   password: '',
@@ -43,19 +33,19 @@ export default {
       formData: { ...INITIAL_DATA },
       rules: {
         account: [
-          { required: true, message: '姓名必填', type: 'error' },
+          { required: true, message: '用户名必填', type: 'error' },
           {
-            min: 2, message: '至少需要两个字', type: 'error', trigger: 'blur',
+            validator: this.userNameValidator,
           },
         ],
         password: [
           { required: true, message: '密码必填', type: 'error' },
-          // 不同的校验结果有不同的错误信息提醒，切错误信息类型不同
+          // 自定义校验规则：不同的值可以有不同的校验结果，不同的校验类型
           { validator: this.passwordValidator },
         ],
         rePassword: [
-          // 自定义校验规则
           { required: true, message: '密码必填', type: 'error' },
+          // 自定义校验规则：自定义异步校验规则
           { validator: this.rePassword, message: '两次密码不一致' },
         ],
       },
@@ -87,6 +77,19 @@ export default {
         trigger: 'blur',
       });
     },
+    // 自定义异步校验器，使用 resolve 返回结果控制校验结果、校验信息、校验结果类型
+    userNameValidator(val) {
+      return new Promise((resolve) => {
+        const timer = setTimeout(() => {
+          if (['Zhang', 'Li', 'Wang'].includes(val)) {
+            resolve({ result: true });
+          } else {
+            resolve({ result: false, message: '用户名不存在', type: 'error' });
+          }
+          clearTimeout(timer);
+        }, 10);
+      });
+    },
     // 自定义校验器，不同的值输出不同的校验结果。支持异步校验（文案选自某密码重置站点，如有侵权，请联系我们删除）
     passwordValidator(val) {
       if (val.length > 0 && val.length <= 2) {
diff --git a/examples/form/demos/disabled.vue b/examples/form/demos/disabled.vue
new file mode 100644
index 000000000..86d48f298
--- /dev/null
+++ b/examples/form/demos/disabled.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <t-form :data="formData" ref="form" @reset="onReset" @submit="onSubmit" :colon="true">
+      <t-form-item label="姓名" name="name">
+        <t-input v-model="formData.name" placeholder="请输入内容"></t-input>
+      </t-form-item>
+      <t-form-item label="手机号码" name="tel">
+        <t-input v-model="formData.tel" placeholder="请输入内容"></t-input>
+      </t-form-item>
+      <t-form-item label="接收短信" name="status">
+        <t-switch v-model="formData.status"></t-switch>
+      </t-form-item>
+      <t-form-item label="性别" name="gender">
+        <t-radio-group v-model="formData.gender">
+          <t-radio value="1">男</t-radio>
+          <t-radio value="2">女</t-radio>
+        </t-radio-group>
+      </t-form-item>
+      <t-form-item label="课程" name="course">
+        <t-checkbox-group v-model="formData.course" :options="courseOptions"></t-checkbox-group>
+      </t-form-item>
+      <t-form-item style="padding-top: 8px">
+        <t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
+        <t-button theme="default" variant="base" type="reset">重置</t-button>
+      </t-form-item>
+    </t-form>
+  </div>
+</template>
+<script>
+const INITIAL_DATA = {
+  name: '',
+  tel: '',
+  gender: '',
+  course: [],
+  status: false,
+};
+
+export default {
+  data() {
+    return {
+      formData: { ...INITIAL_DATA },
+      courseOptions: [
+        { label: '语文', value: '1' },
+        { label: '数学', value: '2' },
+        { label: '英语', value: '3' },
+      ],
+    };
+  },
+
+  methods: {
+    // 重置方法：this.$refs.reset()
+    onReset() {
+      this.$message.success('重置成功');
+    },
+    // 提交方法：this.$refs.submit()
+    onSubmit({ validateResult, firstError }) {
+      if (validateResult === true) {
+        this.$message.success('提交成功');
+      } else {
+        console.log('Errors: ', validateResult);
+        this.$message.warning(firstError);
+      }
+    },
+  },
+};
+</script>
diff --git a/examples/form/demos/reset.vue b/examples/form/demos/reset.vue
new file mode 100644
index 000000000..839003c85
--- /dev/null
+++ b/examples/form/demos/reset.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <div>
+      <t-radio-group v-model="resetType" variant="default-filled">
+        <t-radio-button value="empty">重置为空</t-radio-button>
+        <t-radio-button value="initial">
+          <t-popup content="改变表单数据后，点击重置按钮，观察数据重置情况"> 重置为初始值 </t-popup>
+        </t-radio-button>
+      </t-radio-group>
+    </div>
+    <br /><br />
+
+    <!-- colon 表示，是否统一显示 label 冒号 -->
+    <t-form :data="formData" :resetType="resetType" colon @reset="onReset" @submit="onSubmit">
+      <t-form-item label="姓名" name="name">
+        <t-input v-model="formData.name" placeholder="请输入内容"></t-input>
+      </t-form-item>
+      <t-form-item label="手机号码" name="tel">
+        <t-input v-model="formData.tel" placeholder="请输入内容"></t-input>
+      </t-form-item>
+      <t-form-item label="课程" name="course">
+        <t-checkbox-group v-model="formData.course" :options="courseOptions"></t-checkbox-group>
+      </t-form-item>
+      <t-form-item style="padding-top: 8px">
+        <t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
+        <t-button theme="default" variant="base" type="reset">重置</t-button>
+      </t-form-item>
+    </t-form>
+  </div>
+</template>
+<script>
+// 这是初始值，数据变化后可以设置表单重置为这个初始值
+const INITIAL_DATA = {
+  name: 'TDesign',
+  tel: '12345678910',
+  course: ['1'],
+};
+
+export default {
+  data() {
+    return {
+      resetType: 'initial',
+      formData: { ...INITIAL_DATA },
+      courseOptions: [
+        { label: '语文', value: '1' },
+        { label: '数学', value: '2' },
+        { label: '英语', value: '3' },
+      ],
+    };
+  },
+
+  methods: {
+    onReset() {
+      this.$message.success('重置成功');
+    },
+    onSubmit({ validateResult, firstError }) {
+      if (validateResult === true) {
+        this.$message.success('提交成功');
+      } else {
+        console.log('Errors: ', validateResult);
+        this.$message.warning(firstError);
+      }
+    },
+  },
+};
+</script>
diff --git a/examples/form/demos/size.vue b/examples/form/demos/size.vue
new file mode 100644
index 000000000..b1dabbe3d
--- /dev/null
+++ b/examples/form/demos/size.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div>
+      <t-radio-group v-model="size" variant="default-filled">
+        <t-radio-button value="medium">中尺寸（默认）</t-radio-button>
+        <t-radio-button value="large">大尺寸</t-radio-button>
+      </t-radio-group>
+    </div>
+    <br /><br />
+
+    <!-- 开发中 -->
+    <t-form :data="formData" :size="size" @reset="onReset" @submit="onSubmit">
+      <t-form-item label="姓名" name="name">
+        <t-input v-model="formData.name" placeholder="请输入内容"></t-input>
+      </t-form-item>
+      <t-form-item label="手机号码" name="tel">
+        <t-input v-model="formData.tel" placeholder="请输入内容"></t-input>
+      </t-form-item>
+      <t-form-item label="接收短信" name="status">
+        <t-switch v-model="formData.status"></t-switch>
+      </t-form-item>
+      <t-form-item label="性别" name="gender">
+        <t-radio-group v-model="formData.gender">
+          <t-radio value="1">男</t-radio>
+          <t-radio value="2">女</t-radio>
+        </t-radio-group>
+      </t-form-item>
+      <t-form-item label="课程" name="course">
+        <t-checkbox-group v-model="formData.course" :options="courseOptions"></t-checkbox-group>
+      </t-form-item>
+      <t-form-item style="padding-top: 8px">
+        <t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
+        <t-button theme="default" variant="base" type="reset">重置</t-button>
+      </t-form-item>
+    </t-form>
+  </div>
+</template>
+<script>
+const INITIAL_DATA = {
+  name: '',
+  tel: '',
+  gender: '',
+  course: [],
+  status: false,
+};
+
+export default {
+  data() {
+    return {
+      size: 'medium',
+      formData: { ...INITIAL_DATA },
+      courseOptions: [
+        { label: '语文', value: '1' },
+        { label: '数学', value: '2' },
+        { label: '英语', value: '3' },
+      ],
+    };
+  },
+
+  methods: {
+    onReset() {
+      this.$message.success('重置成功');
+    },
+    onSubmit({ validateResult, firstError }) {
+      if (validateResult === true) {
+        this.$message.success('提交成功');
+      } else {
+        console.log('Errors: ', validateResult);
+        this.$message.warning(firstError);
+      }
+    },
+  },
+};
+</script>
diff --git a/examples/form/demos/validate-complicated-data.vue b/examples/form/demos/validate-complicated-data.vue
new file mode 100644
index 000000000..83ecf85d3
--- /dev/null
+++ b/examples/form/demos/validate-complicated-data.vue
@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <t-form
+      :data="formData"
+      :rules="rules"
+      resetType="initial"
+      ref="form"
+      style="max-width: 100%"
+      @reset="onReset"
+      @submit="onSubmit"
+    >
+      <t-form-item label="学校" name="school">
+        <t-radio-group v-model="formData.school" :options="SCHOOL_OPTIONS" />
+      </t-form-item>
+      <t-tabs
+        v-model="studentTab"
+        theme="card"
+        addable
+        @add="onAddStudent"
+        style="margin-left: 30px; border: 1px solid var(--td-component-stroke)"
+      >
+        <t-tab-panel
+          v-for="(student, index) in formData.students"
+          :key="student.id"
+          :value="student.id"
+          :label="student.label"
+          :destroyOnHide="false"
+        >
+          <div style="padding: 24px 24px 24px 0">
+            <!-- 重点阅读：数组里面，注意 name 定义，用于区分不同的字段 -->
+            <!-- 重点阅读：name 表示当前字段在 formData 中的路径，ruleName 表示当前字段在 rules 中的名称 -->
+            <t-form-item label="姓名" :name="`students[${index}].name`" :label-width="80">
+              <t-input v-model="formData.students[index].name" placeholder="请输入内容"></t-input>
+            </t-form-item>
+
+            <t-form-item label="选科" :name="`students[${index}].courseType`" :label-width="80">
+              <t-radio-group v-model="formData.students[index].courseType">
+                <t-radio value="wenke">文科</t-radio>
+                <t-radio value="like">理科</t-radio>
+              </t-radio-group>
+            </t-form-item>
+
+            <t-form-item label="课程" :name="`students[${index}].course`" :label-width="80">
+              <t-checkbox-group v-model="formData.students[index].course" :options="courseOptions"></t-checkbox-group>
+            </t-form-item>
+
+            <t-form-item style="padding-top: 8px" :label-width="80">
+              <t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
+              <t-button theme="default" variant="base" type="reset">重置</t-button>
+            </t-form-item>
+          </div>
+        </t-tab-panel>
+      </t-tabs>
+    </t-form>
+  </div>
+</template>
+
+<script>
+let id = 0;
+function getId() {
+  id += 1;
+  return id;
+}
+
+const INITIAL_DATA = {
+  school: 1,
+  students: [
+    {
+      id: getId(),
+      label: '学生1',
+      name: 'StudentA',
+      courseType: 'wenke',
+      course: ['1'],
+    },
+    {
+      id: getId(),
+      label: '学生2',
+      name: 'StudentB',
+      courseType: 'wenke',
+      course: [],
+    },
+  ],
+};
+
+const COURSE_OPTIONS = [
+  { label: '全部', checkAll: true },
+  { label: '语文', value: '1', courseTypes: ['wenke', 'like'] },
+  { label: '数学', value: '2', courseTypes: ['wenke', 'like'] },
+  { label: '物理', value: '3', courseTypes: ['like'] },
+  { label: '化学', value: '4', courseTypes: ['like'] },
+  { label: '地理', value: '5', courseTypes: ['wenke'] },
+  { label: '历史', value: '6', courseTypes: ['wenke'] },
+];
+
+const SCHOOL_OPTIONS = [
+  { label: '学校一', value: 1 },
+  { label: '学校二', value: 2 },
+  { label: '学校三', value: 3 },
+];
+
+export default {
+  data() {
+    return {
+      studentTab: 1,
+      formData: { ...INITIAL_DATA },
+      SCHOOL_OPTIONS,
+      // courseOptions: COURSE_OPTIONS,
+      rules: {
+        school: [{ required: true, message: '学校必填' }],
+        name: [{ required: true, message: '用户名必填' }],
+        courseType: [{ required: true, message: '选科必填' }],
+        course: [{ required: true, message: '课程必填' }],
+      },
+    };
+  },
+
+  computed: {
+    courseOptions() {
+      return COURSE_OPTIONS.filter((item) => {
+        if (!this.formData.courseType || !item.courseTypes) return true;
+        return item.courseTypes.includes(this.formData.courseType);
+      });
+    },
+  },
+
+  watch: {
+    'formData.courseType': function () {
+      this.formData.course = [];
+    },
+  },
+
+  methods: {
+    // 重置方法：this.$refs.reset()
+    onReset() {
+      this.$message.success('重置成功');
+    },
+    // 提交方法：this.$refs.submit()
+    onSubmit({ validateResult, firstError }) {
+      if (validateResult === true) {
+        this.$message.success('提交成功');
+      } else {
+        console.log('Errors: ', validateResult);
+        this.$message.warning(firstError);
+        // 判断错误在第几个 Tab，而后自动切换到第几个
+        for (let i = 0, len = this.formData.students.length; i < len; i++) {
+          const item = this.formData.students[i];
+          const keys = Object.keys(item).map((key) => `students[${i}].${key}`);
+          // 数组数据 key 在 validateResult 中存在，则表示校验不通过
+          const isInvalid = keys.find((key) => validateResult[key]);
+          if (isInvalid) {
+            this.studentTab = item.id;
+            return;
+          }
+        }
+      }
+    },
+    onAddStudent() {
+      const id = getId();
+      this.formData.students.push({
+        id,
+        label: `学生${id}`,
+        name: '',
+        courseType: 'wenke',
+        course: [],
+        status: false,
+      });
+      this.studentTab = id;
+    },
+  },
+};
+</script>
diff --git a/examples/form/demos/validate-message.vue b/examples/form/demos/validate-message.vue
new file mode 100644
index 000000000..86d48f298
--- /dev/null
+++ b/examples/form/demos/validate-message.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <t-form :data="formData" ref="form" @reset="onReset" @submit="onSubmit" :colon="true">
+      <t-form-item label="姓名" name="name">
+        <t-input v-model="formData.name" placeholder="请输入内容"></t-input>
+      </t-form-item>
+      <t-form-item label="手机号码" name="tel">
+        <t-input v-model="formData.tel" placeholder="请输入内容"></t-input>
+      </t-form-item>
+      <t-form-item label="接收短信" name="status">
+        <t-switch v-model="formData.status"></t-switch>
+      </t-form-item>
+      <t-form-item label="性别" name="gender">
+        <t-radio-group v-model="formData.gender">
+          <t-radio value="1">男</t-radio>
+          <t-radio value="2">女</t-radio>
+        </t-radio-group>
+      </t-form-item>
+      <t-form-item label="课程" name="course">
+        <t-checkbox-group v-model="formData.course" :options="courseOptions"></t-checkbox-group>
+      </t-form-item>
+      <t-form-item style="padding-top: 8px">
+        <t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
+        <t-button theme="default" variant="base" type="reset">重置</t-button>
+      </t-form-item>
+    </t-form>
+  </div>
+</template>
+<script>
+const INITIAL_DATA = {
+  name: '',
+  tel: '',
+  gender: '',
+  course: [],
+  status: false,
+};
+
+export default {
+  data() {
+    return {
+      formData: { ...INITIAL_DATA },
+      courseOptions: [
+        { label: '语文', value: '1' },
+        { label: '数学', value: '2' },
+        { label: '英语', value: '3' },
+      ],
+    };
+  },
+
+  methods: {
+    // 重置方法：this.$refs.reset()
+    onReset() {
+      this.$message.success('重置成功');
+    },
+    // 提交方法：this.$refs.submit()
+    onSubmit({ validateResult, firstError }) {
+      if (validateResult === true) {
+        this.$message.success('提交成功');
+      } else {
+        console.log('Errors: ', validateResult);
+        this.$message.warning(firstError);
+      }
+    },
+  },
+};
+</script>
diff --git a/examples/form/demos/validator-status.vue b/examples/form/demos/validator-status.vue
index 4e2d73a78..00fa47ab7 100644
--- a/examples/form/demos/validator-status.vue
+++ b/examples/form/demos/validator-status.vue
@@ -1,34 +1,45 @@
 <template>
-  <div>
+  <div class="tdesign-demo-form-status">
     <!--
       1. statusIcon 值为 true，显示默认图标。默认图标有 成功、失败、警告 等，不同的状态图标不同
       2. statusIcon 值为 false，不显示图标
       3. statusIcon 值类型为 function，可以自定义右侧状态图标
       4. statusIcon 为 slot(插槽)，可自定义右侧状态图标
     -->
+
+    <div>
+      <t-radio-group v-model="formStatusIcon" variant="default-filled">
+        <t-radio-button :value="true">显示校验图标</t-radio-button>
+        <t-radio-button :value="false">隐藏校验图标</t-radio-button>
+      </t-radio-group>
+    </div>
+    <br /><br />
     <t-form
       :data="formData"
       :rules="rules"
       :labelWidth="80"
+      :statusIcon="formStatusIcon"
       ref="formValidatorStatus"
       @reset="onReset"
       @submit="onSubmit"
-      :statusIcon="true"
     >
-      <t-form-item label="失败" help="这是校验通过后的提示信息" name="fail">
-        <t-input v-model="formData.fail"></t-input>
+      <t-form-item label="失败" name="fail">
+        <t-input v-model="formData.fail" placeholder="校验不通过状态"></t-input>
       </t-form-item>
-      <t-form-item label="警告" name="warning" successBorder>
-        <t-input v-model="formData.warning"></t-input>
+      <t-form-item label="警告" name="warning">
+        <t-input v-model="formData.warning" placeholder="校验警告状态"></t-input>
       </t-form-item>
       <t-form-item label="成功" name="success">
-        <t-input v-model="formData.success"></t-input>
+        <t-input v-model="formData.success" placeholder="不带绿色边框的成功状态"></t-input>
+      </t-form-item>
+      <t-form-item label="成功" name="success" successBorder>
+        <t-input v-model="formData.success" placeholder="带绿色边框的成功状态"></t-input>
       </t-form-item>
       <t-form-item label="失败" name="failB" :statusIcon="false">
         <t-input v-model="formData.failB" placeholder="隐藏状态图标"></t-input>
       </t-form-item>
       <t-form-item label="警告" name="warningB">
-        <t-input v-model="formData.warningB"></t-input>
+        <t-input v-model="formData.warningB" placeholder="校验警告状态"></t-input>
       </t-form-item>
       <t-form-item label="加载中" name="loading">
         <t-input v-model="formData.loading" placeholder="正在校验中，请稍等"></t-input>
@@ -38,6 +49,13 @@
           </div>
         </template>
       </t-form-item>
+
+      <!-- 自定义图标：可以使用渲染函数 statusIcon，也可以使用插槽 statusIcon -->
+      <t-form-item label="帮助" :statusIcon="getStatusIcon" name="help">
+        <t-input v-model="formData.help" placeholder="自定义右侧图标"></t-input>
+        <!-- <t-icon slot="statusIcon" name='help-circle' size="24px" style="color: #0006"/> -->
+      </t-form-item>
+
       <t-form-item v-for="(item, index) in addlist" :key="item.id" label="新增" :name="item.name">
         <t-input v-model="formData[item.name]"></t-input>
         <t-button
@@ -52,10 +70,7 @@
           <icon name="remove" size="16px" style="color: #0004" />
         </t-button>
       </t-form-item>
-      <t-form-item label="帮助" help="自定义帮助图标" :statusIcon="getStatusIcon" name="help">
-        <t-input v-model="formData.help"></t-input>
-        <!-- <t-icon slot="statusIcon" name='help-circle' size="24px" style="color: #0006"/> -->
-      </t-form-item>
+
       <t-form-item :statusIcon="false" style="padding-top: 8px">
         <t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
         <t-button theme="default" variant="base" type="reset">重置</t-button>
@@ -83,6 +98,7 @@ export default {
   },
   data() {
     return {
+      formStatusIcon: true,
       formData: { ...INITIAL_DATA },
       rules: {
         fail: [{ required: true, message: '必填', type: 'error' }],
@@ -126,3 +142,9 @@ export default {
   },
 };
 </script>
+
+<style>
+.tdesign-demo-form-status .t-input {
+  width: 520px;
+}
+</style>
diff --git a/examples/form/demos/validator.vue b/examples/form/demos/validator.vue
index 8a5a45613..74550cb81 100644
--- a/examples/form/demos/validator.vue
+++ b/examples/form/demos/validator.vue
@@ -1,60 +1,61 @@
 <template>
   <div>
-    <t-form
-      :data="formData"
-      :rules="rules"
-      ref="form"
-      @reset="onReset"
-      @submit="onSubmit"
-      scrollToFirstError="smooth"
-    >
-      <t-form-item label="用户名" help="这里请填写用户名" name='account'>
+    <!--  scrollToFirstError="smooth" -->
+    <t-form :data="formData" :rules="rules" ref="form" @reset="onReset" @submit="onSubmit">
+      <t-form-item label="用户名" help="这是用户名字段帮助说明" name="account">
         <t-input v-model="formData.account"></t-input>
       </t-form-item>
-      <t-form-item label="密码" help="这里请填写密码" name='password'>
+      <t-form-item label="个人简介" help="一句话介绍自己" name="description">
+        <t-input v-model="formData.description"></t-input>
+      </t-form-item>
+      <t-form-item label="密码" name="password">
         <t-input type="password" v-model="formData.password"></t-input>
       </t-form-item>
-      <t-form-item label="邮箱" name='email'>
+      <t-form-item label="邮箱" name="email">
         <t-input v-model="formData.email"></t-input>
       </t-form-item>
-      <t-form-item label="性别" name='gender'>
+      <t-form-item label="性别" name="gender">
         <t-radio-group v-model="formData.gender">
           <t-radio value="male">男</t-radio>
           <t-radio value="femal">女</t-radio>
         </t-radio-group>
       </t-form-item>
-      <t-form-item label="课程" name='course'>
-        <t-checkbox-group
-          v-model="formData.course"
-          :options="courseOptions"
-        ></t-checkbox-group>
+      <t-form-item label="课程" name="course">
+        <t-checkbox-group v-model="formData.course" :options="courseOptions"></t-checkbox-group>
       </t-form-item>
-      <t-form-item label="学院" name='college'>
+      <t-form-item label="学院" name="college">
         <t-select v-model="formData.college" class="demo-select-base" clearable>
           <t-option v-for="(item, index) in options" :value="item.value" :label="item.label" :key="index">
             {{ item.label }}
           </t-option>
         </t-select>
       </t-form-item>
-      <t-form-item label="入学时间" name='date' :rules="[{ date: { delimiters: ['/', '-', '.'] }, message: '日期格式有误' }]">
+      <t-form-item
+        label="入学时间"
+        name="date"
+        :rules="[
+          { required: true, message: '此项必填' },
+          { date: { delimiters: ['/', '-', '.'] }, message: '日期格式有误' },
+        ]"
+      >
         <t-input v-model="formData.date"></t-input>
       </t-form-item>
-      <t-form-item label="个人网站" name='content.url'>
+      <t-form-item label="个人网站" name="content.url">
         <t-input v-model="formData.content.url"></t-input>
       </t-form-item>
       <t-form-item style="padding-top: 8px">
         <t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
         <t-button theme="default" variant="base" type="reset" style="margin-right: 10px">重置</t-button>
-        <t-button theme="default" variant="base" @click="handleClear">清除校验结果</t-button>
+        <t-button theme="default" variant="base" @click="handleClear">清空校验结果</t-button>
       </t-form-item>
     </t-form>
   </div>
 </template>
 <script>
-
 const INITIAL_DATA = {
   account: '',
   password: '',
+  description: '',
   email: '',
   gender: '',
   college: '',
@@ -79,25 +80,42 @@ export default {
         { label: '软件学院', value: '2' },
         { label: '物联网学院', value: '3' },
       ],
+      // FormItem.rules 优先级大于 Form.rules
       rules: {
         account: [
           { required: true, message: '姓名必填', type: 'error' },
-          { min: 2, message: '至少需要两个字', type: 'error' },
+          { min: 2, message: '至少需要两个字符，一个中文等于两个字符', type: 'warning' },
+          { max: 10, message: '姓名字符长度超出', type: 'warning' },
+        ],
+        description: [
+          {
+            validator: (val) => val.length >= 5,
+            message: '至少 5 个字，中文长度等于英文长度',
+            type: 'warning',
+          },
+          {
+            validator: (val) => val.length < 20,
+            message: '不能超过 20 个字，中文长度等于英文长度',
+            type: 'warning',
+          },
         ],
         password: [
           { required: true, message: '密码必填', type: 'error' },
+          { len: 8, message: '请输入 8 位密码', type: 'warning' },
+          { pattern: /[A-Z]+/, message: '密码必须包含大写字母', type: 'warning' },
         ],
+        college: [{ required: true, message: '此项必填' }],
         email: [
-          { required: true, message: '格式必须为邮箱', type: 'warning' },
-        ],
-        gender: [
-          { required: true, message: '性别必填', type: 'warning' },
+          { required: true, message: '邮箱必填' },
+          { email: { ignore_max_length: true }, message: '请输入正确的邮箱地址' },
         ],
+        gender: [{ required: true, message: '性别必填' }],
         course: [
-          { required: true, message: '课程必填', type: 'warning' },
+          { required: true, message: '课程必填' },
+          { validator: (val) => val.length <= 2, message: '最多选择 2 门课程', type: 'warning' },
         ],
         'content.url': [
-          { required: true, message: '个人网站必填', type: 'warning' },
+          { required: true, message: '个人网站必填' },
           {
             url: {
               protocols: ['http', 'https', 'ftp'],
diff --git a/src/_common b/src/_common
index 751fb8663..7dfe2c92a 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 751fb86639070ce3618defe61ca19dbfa4960e57
+Subproject commit 7dfe2c92a8345c0a82dce0786668a8c9a9051685
diff --git a/src/form/form-item.tsx b/src/form/form-item.tsx
index dd3662726..968361a68 100644
--- a/src/form/form-item.tsx
+++ b/src/form/form-item.tsx
@@ -139,7 +139,11 @@ export default mixins(getConfigReceiverMixins<FormItemContructor, FormConfig>('f
     },
     innerRules(): FormRule[] {
       const parent = this.form;
-      return lodashGet(parent?.rules, this.name) || this.rules || [];
+      if (this.rules?.length) return this.rules || [];
+      if (!this.name) return [];
+      const index = this.name.lastIndexOf('.') || -1;
+      const pRuleName = this.name.slice(index + 1);
+      return lodashGet(parent?.rules, this.name) || lodashGet(parent?.rules, pRuleName) || [];
     },
   },
 
@@ -233,7 +237,7 @@ export default mixins(getConfigReceiverMixins<FormItemContructor, FormConfig>('f
     getDefaultIcon(): TNodeReturnValue {
       const resultIcon = (Icon: IconConstructor) => (
         <span class={CLASS_NAMES.status}>
-          <Icon size="20px"></Icon>
+          <Icon></Icon>
         </span>
       );
       const list = this.errorList;
@@ -256,13 +260,9 @@ export default mixins(getConfigReceiverMixins<FormItemContructor, FormConfig>('f
       props?: TdFormItemProps,
     ): TNodeReturnValue {
       const resultIcon = (otherContent?: TNodeReturnValue) => <span class={CLASS_NAMES.status}>{otherContent}</span>;
-      const withoutIcon = () => <span class={[CLASS_NAMES.status, `${CLASS_NAMES.status}-without-icon`]}></span>;
       if (statusIcon === true) {
         return this.getDefaultIcon();
       }
-      if (statusIcon === false) {
-        return withoutIcon();
-      }
       if (typeof statusIcon === 'function') {
         return resultIcon(statusIcon(this.$createElement, props));
       }
@@ -277,6 +277,7 @@ export default mixins(getConfigReceiverMixins<FormItemContructor, FormConfig>('f
       const slotStatusIcon = this.$scopedSlots.statusIcon;
       const parentStatusIcon = parent.statusIcon;
       const parentSlotStatusIcon = parent.$scopedSlots.statusIcon;
+      if (statusIcon === false) return;
       let resultIcon: TNodeReturnValue = this.getIcon(statusIcon, slotStatusIcon);
       if (resultIcon) return resultIcon;
       if (resultIcon === false) return;
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index afec94929..2d0e7ba14 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -4066,6 +4066,102 @@ exports[`ssr snapshot test renders ./examples/form/demos/base.vue correctly 1`]
 </div>
 `;
 
+exports[`ssr snapshot test renders ./examples/form/demos/clear-validate.vue correctly 1`] = `
+<div>
+  <form class="t-form">
+    <div class="t-form__item t-form-item__account t-form__item-with-help t-form__item-with-extra">
+      <div class="t-form__label t-form__label--required t-form__label--right" style="width:100px;"><label for="">用户名</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-input t-size-m"><input placeholder="请输入" type="text" value="" class="t-input__inner"></div>
+        </div>
+        <div class="t-form__help">这是用户名字段帮助说明</div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__description t-form__item-with-help t-form__item-with-extra">
+      <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">个人简介</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-input t-size-m"><input placeholder="请输入" type="text" value="" class="t-input__inner"></div>
+        </div>
+        <div class="t-form__help">一句话介绍自己</div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__password">
+      <div class="t-form__label t-form__label--required t-form__label--right" style="width:100px;"><label for="">密码</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-input t-size-m t-input--suffix"><input placeholder="请输入" type="password" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-browse-off t-input__suffix-clear"><path fill="currentColor" d="M10.77 11.98l1.38 1.37.7-.7-9.7-9.7-.7.7 1.2 1.21a7.9 7.9 0 00-2.53 2.91L1 8l.12.23a7.72 7.72 0 009.65 3.75zM10 11.2A6.67 6.67 0 012.11 8c.56-1 1.34-1.83 2.26-2.43l1.08 1.09a2.88 2.88 0 003.9 3.9l.64.64zM6.21 7.42l2.37 2.37a1.88 1.88 0 01-2.37-2.37zM14.88 8.23L15 8l-.12-.23a7.73 7.73 0 00-9.35-3.86l.8.8A6.7 6.7 0 0113.9 8a6.87 6.87 0 01-2.02 2.26l.7.7a7.9 7.9 0 002.3-2.73z" fill-opacity="0.9"></path><path fill="currentColor" d="M10.88 8c0 .37-.07.73-.2 1.06l-.82-.82.02-.24a1.88 1.88 0 00-2.12-1.86l-.82-.82A2.87 2.87 0 0110.88 8z" fill-opacity="0.9"></path></svg></span></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__email">
+      <div class="t-form__label t-form__label--required t-form__label--right" style="width:100px;"><label for="">邮箱</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-input t-size-m"><input placeholder="请输入" type="text" value="" class="t-input__inner"></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__gender">
+      <div class="t-form__label t-form__label--required t-form__label--right" style="width:100px;"><label for="">性别</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-radio-group t-size-m t-radio-group__outline"><label class="t-radio"><input type="radio" value="male" name="" class="t-radio__former"><span class="t-radio__input"></span><span class="t-radio__label">男</span></label> <label class="t-radio"><input type="radio" value="femal" name="" class="t-radio__former"><span class="t-radio__input"></span><span class="t-radio__label">女</span></label></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__course">
+      <div class="t-form__label t-form__label--required t-form__label--right" style="width:100px;"><label for="">课程</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-checkbox-group"><label class="t-checkbox"><input type="checkbox" name="" value="1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">语文</span></label><label class="t-checkbox"><input type="checkbox" name="" value="2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">数学</span></label><label class="t-checkbox"><input type="checkbox" name="" value="3" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">英语</span></label><label class="t-checkbox"><input type="checkbox" name="" value="4" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">体育</span></label></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__college">
+      <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">学院</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="demo-select-base t-select__wrap">
+            <div class="t-popup__reference t-select__popup-reference">
+              <div name="t-popup--animation" appear="true"></div>
+              <div class="t-select t-size-m"><span class="t-select__placeholder"> 请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+0</span><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon">
+                  <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
+                </svg></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__date">
+      <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">入学时间</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-input t-size-m"><input placeholder="请输入" type="text" value="" class="t-input__inner"></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__content.url">
+      <div class="t-form__label t-form__label--required t-form__label--right" style="width:100px;"><label for="">个人网站</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-input t-size-m"><input placeholder="请输入" type="text" value="" class="t-input__inner"></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__" style="padding-top:8px;">
+      <div class="t-form__label t-form__label--right" style="width:100px;"><label for=""></label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content"><button type="submit" class="t-button t-size-m t-button--variant-base t-button--theme-primary" style="margin-right:10px;"><span class="t-button__text"> 提交 </span></button> <button type="reset" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-right:10px;"><span class="t-button__text"> 重置 </span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-right:10px;"><span class="t-button__text">
+        清空校验结果
+      </span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default"><span class="t-button__text"> 清除指定字段的校验结果 </span></button></div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
 exports[`ssr snapshot test renders ./examples/form/demos/custom-validator.vue correctly 1`] = `
 <div>
   <form class="t-form">
@@ -4092,7 +4188,62 @@ exports[`ssr snapshot test renders ./examples/form/demos/custom-validator.vue co
         <div class="t-form__controls-content">
           <div class="t-input t-size-m t-input--suffix"><input placeholder="请输入" type="password" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-browse-off t-input__suffix-clear"><path fill="currentColor" d="M10.77 11.98l1.38 1.37.7-.7-9.7-9.7-.7.7 1.2 1.21a7.9 7.9 0 00-2.53 2.91L1 8l.12.23a7.72 7.72 0 009.65 3.75zM10 11.2A6.67 6.67 0 012.11 8c.56-1 1.34-1.83 2.26-2.43l1.08 1.09a2.88 2.88 0 003.9 3.9l.64.64zM6.21 7.42l2.37 2.37a1.88 1.88 0 01-2.37-2.37zM14.88 8.23L15 8l-.12-.23a7.73 7.73 0 00-9.35-3.86l.8.8A6.7 6.7 0 0113.9 8a6.87 6.87 0 01-2.02 2.26l.7.7a7.9 7.9 0 002.3-2.73z" fill-opacity="0.9"></path><path fill="currentColor" d="M10.88 8c0 .37-.07.73-.2 1.06l-.82-.82.02-.24a1.88 1.88 0 00-2.12-1.86l-.82-.82A2.87 2.87 0 0110.88 8z" fill-opacity="0.9"></path></svg></span></div>
         </div>
-        <div class="t-form__help">在此处体验普通自定义校验方法</div>
+        <div class="t-form__help">自定义异步校验方法</div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__" style="padding-top:8px;">
+      <div class="t-form__label t-form__label--right" style="width:100px;"><label for=""></label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content"><button type="submit" class="t-button t-size-m t-button--variant-base t-button--theme-primary" style="margin-right:10px;"><span class="t-button__text">提交</span></button> <button type="reset" class="t-button t-size-m t-button--variant-base t-button--theme-default"><span class="t-button__text">重置</span></button></div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`ssr snapshot test renders ./examples/form/demos/disabled.vue correctly 1`] = `
+<div>
+  <form class="t-form">
+    <div class="t-form__item t-form-item__name">
+      <div class="t-form__label t-form__label--colon t-form__label--right" style="width:100px;"><label for="">姓名</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-input t-size-m"><input placeholder="请输入内容" type="text" value="" class="t-input__inner"></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__tel">
+      <div class="t-form__label t-form__label--colon t-form__label--right" style="width:100px;"><label for="">手机号码</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-input t-size-m"><input placeholder="请输入内容" type="text" value="" class="t-input__inner"></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__status">
+      <div class="t-form__label t-form__label--colon t-form__label--right" style="width:100px;"><label for="">接收短信</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
+            <div class="t-switch__content t-size-m"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__gender">
+      <div class="t-form__label t-form__label--colon t-form__label--right" style="width:100px;"><label for="">性别</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-radio-group t-size-m t-radio-group__outline"><label class="t-radio"><input type="radio" value="1" name="" class="t-radio__former"><span class="t-radio__input"></span><span class="t-radio__label">男</span></label> <label class="t-radio"><input type="radio" value="2" name="" class="t-radio__former"><span class="t-radio__input"></span><span class="t-radio__label">女</span></label></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__course">
+      <div class="t-form__label t-form__label--colon t-form__label--right" style="width:100px;"><label for="">课程</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-checkbox-group"><label class="t-checkbox"><input type="checkbox" name="" value="1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">语文</span></label><label class="t-checkbox"><input type="checkbox" name="" value="2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">数学</span></label><label class="t-checkbox"><input type="checkbox" name="" value="3" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">英语</span></label></div>
+        </div>
       </div>
     </div>
     <div class="t-form__item t-form-item__" style="padding-top:8px;">
@@ -4159,6 +4310,268 @@ exports[`ssr snapshot test renders ./examples/form/demos/login.vue correctly 1`]
 </div>
 `;
 
+exports[`ssr snapshot test renders ./examples/form/demos/reset.vue correctly 1`] = `
+<div>
+  <div>
+    <div class="t-radio-group t-size-m t-radio-group--filled"><label class="t-radio-button"><input type="radio" value="empty" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">重置为空</span></label> <label class="t-radio-button t-is-checked"><input type="radio" checked="checked" value="initial" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label"><div class="t-popup__reference"><div name="t-popup--animation" appear="true"></div> 重置为初始值 </div></span></label>
+      <div class="t-radio-group__bg-block" style="width:0px;left:0px;"></div>
+    </div>
+  </div> <br><br>
+  <form class="t-form">
+    <div class="t-form__item t-form-item__name">
+      <div class="t-form__label t-form__label--colon t-form__label--right" style="width:100px;"><label for="">姓名</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-input t-size-m"><input placeholder="请输入内容" type="text" value="TDesign" class="t-input__inner"></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__tel">
+      <div class="t-form__label t-form__label--colon t-form__label--right" style="width:100px;"><label for="">手机号码</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-input t-size-m"><input placeholder="请输入内容" type="text" value="12345678910" class="t-input__inner"></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__course">
+      <div class="t-form__label t-form__label--colon t-form__label--right" style="width:100px;"><label for="">课程</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-checkbox-group"><label class="t-checkbox t-is-checked"><input type="checkbox" name="" value="1" checked="checked" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">语文</span></label><label class="t-checkbox"><input type="checkbox" name="" value="2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">数学</span></label><label class="t-checkbox"><input type="checkbox" name="" value="3" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">英语</span></label></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__" style="padding-top:8px;">
+      <div class="t-form__label t-form__label--right" style="width:100px;"><label for=""></label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content"><button type="submit" class="t-button t-size-m t-button--variant-base t-button--theme-primary" style="margin-right:10px;"><span class="t-button__text">提交</span></button> <button type="reset" class="t-button t-size-m t-button--variant-base t-button--theme-default"><span class="t-button__text">重置</span></button></div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`ssr snapshot test renders ./examples/form/demos/size.vue correctly 1`] = `
+<div>
+  <div>
+    <div class="t-radio-group t-size-m t-radio-group--filled"><label class="t-radio-button t-is-checked"><input type="radio" checked="checked" value="medium" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">中尺寸（默认）</span></label> <label class="t-radio-button"><input type="radio" value="large" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">大尺寸</span></label>
+      <div class="t-radio-group__bg-block" style="width:0px;left:0px;"></div>
+    </div>
+  </div> <br><br>
+  <form class="t-form">
+    <div class="t-form__item t-form-item__name">
+      <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">姓名</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-input t-size-m"><input placeholder="请输入内容" type="text" value="" class="t-input__inner"></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__tel">
+      <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">手机号码</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-input t-size-m"><input placeholder="请输入内容" type="text" value="" class="t-input__inner"></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__status">
+      <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">接收短信</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
+            <div class="t-switch__content t-size-m"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__gender">
+      <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">性别</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-radio-group t-size-m t-radio-group__outline"><label class="t-radio"><input type="radio" value="1" name="" class="t-radio__former"><span class="t-radio__input"></span><span class="t-radio__label">男</span></label> <label class="t-radio"><input type="radio" value="2" name="" class="t-radio__former"><span class="t-radio__input"></span><span class="t-radio__label">女</span></label></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__course">
+      <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">课程</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-checkbox-group"><label class="t-checkbox"><input type="checkbox" name="" value="1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">语文</span></label><label class="t-checkbox"><input type="checkbox" name="" value="2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">数学</span></label><label class="t-checkbox"><input type="checkbox" name="" value="3" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">英语</span></label></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__" style="padding-top:8px;">
+      <div class="t-form__label t-form__label--right" style="width:100px;"><label for=""></label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content"><button type="submit" class="t-button t-size-m t-button--variant-base t-button--theme-primary" style="margin-right:10px;"><span class="t-button__text">提交</span></button> <button type="reset" class="t-button t-size-m t-button--variant-base t-button--theme-default"><span class="t-button__text">重置</span></button></div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`ssr snapshot test renders ./examples/form/demos/validate-complicated-data.vue correctly 1`] = `
+<div>
+  <form class="t-form" style="max-width:100%;">
+    <div class="t-form__item t-form-item__school">
+      <div class="t-form__label t-form__label--required t-form__label--right" style="width:100px;"><label for="">学校</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-radio-group t-size-m t-radio-group__outline"><label class="t-radio t-is-checked"><input type="radio" checked="checked" value="1" name="" class="t-radio__former"><span class="t-radio__input"></span><span class="t-radio__label">学校一</span></label><label class="t-radio"><input type="radio" value="2" name="" class="t-radio__former"><span class="t-radio__input"></span><span class="t-radio__label">学校二</span></label><label class="t-radio"><input type="radio" value="3" name="" class="t-radio__former"><span class="t-radio__input"></span><span class="t-radio__label">学校三</span></label></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-tabs" style="margin-left:30px;border:1px solid var(--td-component-stroke);">
+      <div class="t-tabs__header t-is-top">
+        <div class="t-tabs__nav" style="min-height:48px;">
+          <div class="t-tabs__operations t-tabs__operations--left">
+            <div name="fade" mode="out-in" appear="true"></div>
+          </div>
+          <div class="t-tabs__operations t-tabs__operations--right">
+            <div name="fade" mode="out-in" appear="true"></div>
+            <div class="t-tabs__add-btn t-tabs__btn t-size-m"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-add">
+                <path fill="currentColor" d="M7.35 8.65v3.85h1.3V8.65h3.85v-1.3H8.65V3.5h-1.3v3.85H3.5v1.3h3.85z" fill-opacity="0.9"></path>
+              </svg></div>
+          </div>
+          <div class="t-tabs__nav-container t-tabs__nav--card t-is-top t-is-addable">
+            <div class="t-tabs__nav-scroll">
+              <div class="t-tabs__nav-wrap t-is-smooth" style="transform:translate(0px, 0);"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="t-tabs__content">
+        <div class="t-tab-panel">
+          <div style="padding:24px 24px 24px 0;">
+            <div class="t-form__item t-form-item__students[0].name">
+              <div class="t-form__label t-form__label--required t-form__label--right" style="width:80px;"><label for="">姓名</label></div>
+              <div class="t-form__controls" style="margin-left:80px;">
+                <div class="t-form__controls-content">
+                  <div class="t-input t-size-m"><input placeholder="请输入内容" type="text" value="StudentA" class="t-input__inner"></div>
+                </div>
+              </div>
+            </div>
+            <div class="t-form__item t-form-item__students[0].courseType">
+              <div class="t-form__label t-form__label--required t-form__label--right" style="width:80px;"><label for="">选科</label></div>
+              <div class="t-form__controls" style="margin-left:80px;">
+                <div class="t-form__controls-content">
+                  <div class="t-radio-group t-size-m t-radio-group__outline"><label class="t-radio t-is-checked"><input type="radio" checked="checked" value="wenke" name="" class="t-radio__former"><span class="t-radio__input"></span><span class="t-radio__label">文科</span></label> <label class="t-radio"><input type="radio" value="like" name="" class="t-radio__former"><span class="t-radio__input"></span><span class="t-radio__label">理科</span></label></div>
+                </div>
+              </div>
+            </div>
+            <div class="t-form__item t-form-item__students[0].course">
+              <div class="t-form__label t-form__label--required t-form__label--right" style="width:80px;"><label for="">课程</label></div>
+              <div class="t-form__controls" style="margin-left:80px;">
+                <div class="t-form__controls-content">
+                  <div class="t-checkbox-group"><label class="t-checkbox t-is-indeterminate"><input type="checkbox" indeterminate="indeterminate" name="" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">全部</span></label><label class="t-checkbox t-is-checked"><input type="checkbox" name="" value="1" checked="checked" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">语文</span></label><label class="t-checkbox"><input type="checkbox" name="" value="2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">数学</span></label><label class="t-checkbox"><input type="checkbox" name="" value="3" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">物理</span></label><label class="t-checkbox"><input type="checkbox" name="" value="4" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">化学</span></label><label class="t-checkbox"><input type="checkbox" name="" value="5" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">地理</span></label><label class="t-checkbox"><input type="checkbox" name="" value="6" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">历史</span></label></div>
+                </div>
+              </div>
+            </div>
+            <div class="t-form__item t-form-item__" style="padding-top:8px;">
+              <div class="t-form__label t-form__label--right" style="width:80px;"><label for=""></label></div>
+              <div class="t-form__controls" style="margin-left:80px;">
+                <div class="t-form__controls-content"><button type="submit" class="t-button t-size-m t-button--variant-base t-button--theme-primary" style="margin-right:10px;"><span class="t-button__text">提交</span></button> <button type="reset" class="t-button t-size-m t-button--variant-base t-button--theme-default"><span class="t-button__text">重置</span></button></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="t-tab-panel" style="display:none;">
+          <div style="padding:24px 24px 24px 0;">
+            <div class="t-form__item t-form-item__students[1].name">
+              <div class="t-form__label t-form__label--required t-form__label--right" style="width:80px;"><label for="">姓名</label></div>
+              <div class="t-form__controls" style="margin-left:80px;">
+                <div class="t-form__controls-content">
+                  <div class="t-input t-size-m"><input placeholder="请输入内容" type="text" value="StudentB" class="t-input__inner"></div>
+                </div>
+              </div>
+            </div>
+            <div class="t-form__item t-form-item__students[1].courseType">
+              <div class="t-form__label t-form__label--required t-form__label--right" style="width:80px;"><label for="">选科</label></div>
+              <div class="t-form__controls" style="margin-left:80px;">
+                <div class="t-form__controls-content">
+                  <div class="t-radio-group t-size-m t-radio-group__outline"><label class="t-radio t-is-checked"><input type="radio" checked="checked" value="wenke" name="" class="t-radio__former"><span class="t-radio__input"></span><span class="t-radio__label">文科</span></label> <label class="t-radio"><input type="radio" value="like" name="" class="t-radio__former"><span class="t-radio__input"></span><span class="t-radio__label">理科</span></label></div>
+                </div>
+              </div>
+            </div>
+            <div class="t-form__item t-form-item__students[1].course">
+              <div class="t-form__label t-form__label--required t-form__label--right" style="width:80px;"><label for="">课程</label></div>
+              <div class="t-form__controls" style="margin-left:80px;">
+                <div class="t-form__controls-content">
+                  <div class="t-checkbox-group"><label class="t-checkbox"><input type="checkbox" name="" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">全部</span></label><label class="t-checkbox"><input type="checkbox" name="" value="1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">语文</span></label><label class="t-checkbox"><input type="checkbox" name="" value="2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">数学</span></label><label class="t-checkbox"><input type="checkbox" name="" value="3" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">物理</span></label><label class="t-checkbox"><input type="checkbox" name="" value="4" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">化学</span></label><label class="t-checkbox"><input type="checkbox" name="" value="5" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">地理</span></label><label class="t-checkbox"><input type="checkbox" name="" value="6" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">历史</span></label></div>
+                </div>
+              </div>
+            </div>
+            <div class="t-form__item t-form-item__" style="padding-top:8px;">
+              <div class="t-form__label t-form__label--right" style="width:80px;"><label for=""></label></div>
+              <div class="t-form__controls" style="margin-left:80px;">
+                <div class="t-form__controls-content"><button type="submit" class="t-button t-size-m t-button--variant-base t-button--theme-primary" style="margin-right:10px;"><span class="t-button__text">提交</span></button> <button type="reset" class="t-button t-size-m t-button--variant-base t-button--theme-default"><span class="t-button__text">重置</span></button></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`ssr snapshot test renders ./examples/form/demos/validate-message.vue correctly 1`] = `
+<div>
+  <form class="t-form">
+    <div class="t-form__item t-form-item__name">
+      <div class="t-form__label t-form__label--colon t-form__label--right" style="width:100px;"><label for="">姓名</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-input t-size-m"><input placeholder="请输入内容" type="text" value="" class="t-input__inner"></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__tel">
+      <div class="t-form__label t-form__label--colon t-form__label--right" style="width:100px;"><label for="">手机号码</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-input t-size-m"><input placeholder="请输入内容" type="text" value="" class="t-input__inner"></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__status">
+      <div class="t-form__label t-form__label--colon t-form__label--right" style="width:100px;"><label for="">接收短信</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-switch t-size-m"><span class="t-switch__handle"></span>
+            <div class="t-switch__content t-size-m"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__gender">
+      <div class="t-form__label t-form__label--colon t-form__label--right" style="width:100px;"><label for="">性别</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-radio-group t-size-m t-radio-group__outline"><label class="t-radio"><input type="radio" value="1" name="" class="t-radio__former"><span class="t-radio__input"></span><span class="t-radio__label">男</span></label> <label class="t-radio"><input type="radio" value="2" name="" class="t-radio__former"><span class="t-radio__input"></span><span class="t-radio__label">女</span></label></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__course">
+      <div class="t-form__label t-form__label--colon t-form__label--right" style="width:100px;"><label for="">课程</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-checkbox-group"><label class="t-checkbox"><input type="checkbox" name="" value="1" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">语文</span></label><label class="t-checkbox"><input type="checkbox" name="" value="2" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">数学</span></label><label class="t-checkbox"><input type="checkbox" name="" value="3" class="t-checkbox__former"><span class="t-checkbox__input"></span><span class="t-checkbox__label">英语</span></label></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__" style="padding-top:8px;">
+      <div class="t-form__label t-form__label--right" style="width:100px;"><label for=""></label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content"><button type="submit" class="t-button t-size-m t-button--variant-base t-button--theme-primary" style="margin-right:10px;"><span class="t-button__text">提交</span></button> <button type="reset" class="t-button t-size-m t-button--variant-base t-button--theme-default"><span class="t-button__text">重置</span></button></div>
+      </div>
+    </div>
+  </form>
+</div>
+`;
+
 exports[`ssr snapshot test renders ./examples/form/demos/validator.vue correctly 1`] = `
 <div>
   <form class="t-form">
@@ -4168,16 +4581,24 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator.vue correctly
         <div class="t-form__controls-content">
           <div class="t-input t-size-m"><input placeholder="请输入" type="text" value="" class="t-input__inner"></div>
         </div>
-        <div class="t-form__help">这里请填写用户名</div>
+        <div class="t-form__help">这是用户名字段帮助说明</div>
       </div>
     </div>
-    <div class="t-form__item t-form-item__password t-form__item-with-help t-form__item-with-extra">
+    <div class="t-form__item t-form-item__description t-form__item-with-help t-form__item-with-extra">
+      <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">个人简介</label></div>
+      <div class="t-form__controls" style="margin-left:100px;">
+        <div class="t-form__controls-content">
+          <div class="t-input t-size-m"><input placeholder="请输入" type="text" value="" class="t-input__inner"></div>
+        </div>
+        <div class="t-form__help">一句话介绍自己</div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__password">
       <div class="t-form__label t-form__label--required t-form__label--right" style="width:100px;"><label for="">密码</label></div>
       <div class="t-form__controls" style="margin-left:100px;">
         <div class="t-form__controls-content">
           <div class="t-input t-size-m t-input--suffix"><input placeholder="请输入" type="password" value="" class="t-input__inner"><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-browse-off t-input__suffix-clear"><path fill="currentColor" d="M10.77 11.98l1.38 1.37.7-.7-9.7-9.7-.7.7 1.2 1.21a7.9 7.9 0 00-2.53 2.91L1 8l.12.23a7.72 7.72 0 009.65 3.75zM10 11.2A6.67 6.67 0 012.11 8c.56-1 1.34-1.83 2.26-2.43l1.08 1.09a2.88 2.88 0 003.9 3.9l.64.64zM6.21 7.42l2.37 2.37a1.88 1.88 0 01-2.37-2.37zM14.88 8.23L15 8l-.12-.23a7.73 7.73 0 00-9.35-3.86l.8.8A6.7 6.7 0 0113.9 8a6.87 6.87 0 01-2.02 2.26l.7.7a7.9 7.9 0 002.3-2.73z" fill-opacity="0.9"></path><path fill="currentColor" d="M10.88 8c0 .37-.07.73-.2 1.06l-.82-.82.02-.24a1.88 1.88 0 00-2.12-1.86l-.82-.82A2.87 2.87 0 0110.88 8z" fill-opacity="0.9"></path></svg></span></div>
         </div>
-        <div class="t-form__help">这里请填写密码</div>
       </div>
     </div>
     <div class="t-form__item t-form-item__email">
@@ -4205,7 +4626,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator.vue correctly
       </div>
     </div>
     <div class="t-form__item t-form-item__college">
-      <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">学院</label></div>
+      <div class="t-form__label t-form__label--required t-form__label--right" style="width:100px;"><label for="">学院</label></div>
       <div class="t-form__controls" style="margin-left:100px;">
         <div class="t-form__controls-content">
           <div class="demo-select-base t-select__wrap">
@@ -4220,7 +4641,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator.vue correctly
       </div>
     </div>
     <div class="t-form__item t-form-item__date">
-      <div class="t-form__label t-form__label--right" style="width:100px;"><label for="">入学时间</label></div>
+      <div class="t-form__label t-form__label--required t-form__label--right" style="width:100px;"><label for="">入学时间</label></div>
       <div class="t-form__controls" style="margin-left:100px;">
         <div class="t-form__controls-content">
           <div class="t-input t-size-m"><input placeholder="请输入" type="text" value="" class="t-input__inner"></div>
@@ -4238,7 +4659,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator.vue correctly
     <div class="t-form__item t-form-item__" style="padding-top:8px;">
       <div class="t-form__label t-form__label--right" style="width:100px;"><label for=""></label></div>
       <div class="t-form__controls" style="margin-left:100px;">
-        <div class="t-form__controls-content"><button type="submit" class="t-button t-size-m t-button--variant-base t-button--theme-primary" style="margin-right:10px;"><span class="t-button__text">提交</span></button> <button type="reset" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-right:10px;"><span class="t-button__text">重置</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default"><span class="t-button__text">清除校验结果</span></button></div>
+        <div class="t-form__controls-content"><button type="submit" class="t-button t-size-m t-button--variant-base t-button--theme-primary" style="margin-right:10px;"><span class="t-button__text">提交</span></button> <button type="reset" class="t-button t-size-m t-button--variant-base t-button--theme-default" style="margin-right:10px;"><span class="t-button__text">重置</span></button> <button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-default"><span class="t-button__text">清空校验结果</span></button></div>
       </div>
     </div>
   </form>
@@ -4246,22 +4667,26 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator.vue correctly
 `;
 
 exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue correctly 1`] = `
-<div>
+<div class="tdesign-demo-form-status">
+  <div>
+    <div class="t-radio-group t-size-m t-radio-group--filled"><label class="t-radio-button t-is-checked"><input type="radio" checked="checked" value="true" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">显示校验图标</span></label> <label class="t-radio-button"><input type="radio" name="" class="t-radio-button__former"><span class="t-radio-button__input"></span><span class="t-radio-button__label">隐藏校验图标</span></label>
+      <div class="t-radio-group__bg-block" style="width:0px;left:0px;"></div>
+    </div>
+  </div> <br><br>
   <form class="t-form">
-    <div class="t-form__item t-form-item__fail t-form__item-with-help t-form__item-with-extra">
+    <div class="t-form__item t-form-item__fail">
       <div class="t-form__label t-form__label--required t-form__label--right" style="width:80px;"><label for="">失败</label></div>
       <div class="t-form__controls" style="margin-left:80px;">
         <div class="t-form__controls-content">
-          <div class="t-input t-size-m"><input placeholder="请输入" type="text" value="" class="t-input__inner"></div>
+          <div class="t-input t-size-m"><input placeholder="校验不通过状态" type="text" value="" class="t-input__inner"></div>
         </div>
-        <div class="t-form__help">这是校验通过后的提示信息</div>
       </div>
     </div>
     <div class="t-form__item t-form-item__warning">
       <div class="t-form__label t-form__label--required t-form__label--right" style="width:80px;"><label for="">警告</label></div>
       <div class="t-form__controls" style="margin-left:80px;">
         <div class="t-form__controls-content">
-          <div class="t-input t-size-m"><input placeholder="请输入" type="text" value="" class="t-input__inner"></div>
+          <div class="t-input t-size-m"><input placeholder="校验警告状态" type="text" value="" class="t-input__inner"></div>
         </div>
       </div>
     </div>
@@ -4269,7 +4694,15 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue co
       <div class="t-form__label t-form__label--right" style="width:80px;"><label for="">成功</label></div>
       <div class="t-form__controls" style="margin-left:80px;">
         <div class="t-form__controls-content">
-          <div class="t-input t-size-m"><input placeholder="请输入" type="text" value="" class="t-input__inner"></div>
+          <div class="t-input t-size-m"><input placeholder="不带绿色边框的成功状态" type="text" value="" class="t-input__inner"></div>
+        </div>
+      </div>
+    </div>
+    <div class="t-form__item t-form-item__success">
+      <div class="t-form__label t-form__label--right" style="width:80px;"><label for="">成功</label></div>
+      <div class="t-form__controls" style="margin-left:80px;">
+        <div class="t-form__controls-content">
+          <div class="t-input t-size-m"><input placeholder="带绿色边框的成功状态" type="text" value="" class="t-input__inner"></div>
         </div>
       </div>
     </div>
@@ -4277,7 +4710,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue co
       <div class="t-form__label t-form__label--required t-form__label--right" style="width:80px;"><label for="">失败</label></div>
       <div class="t-form__controls" style="margin-left:80px;">
         <div class="t-form__controls-content">
-          <div class="t-input t-size-m"><input placeholder="隐藏状态图标" type="text" value="" class="t-input__inner"></div><span class="t-form__status t-form__status-without-icon"></span>
+          <div class="t-input t-size-m"><input placeholder="隐藏状态图标" type="text" value="" class="t-input__inner"></div>
         </div>
       </div>
     </div>
@@ -4285,7 +4718,7 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue co
       <div class="t-form__label t-form__label--required t-form__label--right" style="width:80px;"><label for="">警告</label></div>
       <div class="t-form__controls" style="margin-left:80px;">
         <div class="t-form__controls-content">
-          <div class="t-input t-size-m"><input placeholder="请输入" type="text" value="" class="t-input__inner"></div>
+          <div class="t-input t-size-m"><input placeholder="校验警告状态" type="text" value="" class="t-input__inner"></div>
         </div>
       </div>
     </div>
@@ -4297,28 +4730,27 @@ exports[`ssr snapshot test renders ./examples/form/demos/validator-status.vue co
         </div>
       </div>
     </div>
-    <div class="t-form__item t-form-item__add0">
-      <div class="t-form__label t-form__label--right" style="width:80px;"><label for="">新增</label></div>
+    <div class="t-form__item t-form-item__help">
+      <div class="t-form__label t-form__label--right" style="width:80px;"><label for="">帮助</label></div>
       <div class="t-form__controls" style="margin-left:80px;">
         <div class="t-form__controls-content">
-          <div class="t-input t-size-m"><input placeholder="请输入" type="text" class="t-input__inner"></div>
-          <!----><span class="t-form__status"><button type="button" class="t-button t-size-m t-button--variant-dashed t-button--theme-default"><span class="t-button__text"><svg class="t-icon t-icon-add" style="font-size:16px;color:#0004;"><use href="#t-icon-add"></use></svg></span></button></span>
+          <div class="t-input t-size-m"><input placeholder="自定义右侧图标" type="text" value="" class="t-input__inner"></div><span class="t-form__status"><svg class="t-icon t-icon-help-circle" style="font-size:16px;color:#0006;"><use href="#t-icon-help-circle"></use></svg></span>
         </div>
       </div>
     </div>
-    <div class="t-form__item t-form-item__help t-form__item-with-help t-form__item-with-extra">
-      <div class="t-form__label t-form__label--right" style="width:80px;"><label for="">帮助</label></div>
+    <div class="t-form__item t-form-item__add0">
+      <div class="t-form__label t-form__label--right" style="width:80px;"><label for="">新增</label></div>
       <div class="t-form__controls" style="margin-left:80px;">
         <div class="t-form__controls-content">
-          <div class="t-input t-size-m"><input placeholder="请输入" type="text" value="" class="t-input__inner"></div><span class="t-form__status"><svg class="t-icon t-icon-help-circle" style="font-size:16px;color:#0006;"><use href="#t-icon-help-circle"></use></svg></span>
+          <div class="t-input t-size-m"><input placeholder="请输入" type="text" class="t-input__inner"></div>
+          <!----><span class="t-form__status"><button type="button" class="t-button t-size-m t-button--variant-dashed t-button--theme-default"><span class="t-button__text"><svg class="t-icon t-icon-add" style="font-size:16px;color:#0004;"><use href="#t-icon-add"></use></svg></span></button></span>
         </div>
-        <div class="t-form__help">自定义帮助图标</div>
       </div>
     </div>
     <div class="t-form__item t-form-item__" style="padding-top:8px;">
       <div class="t-form__label t-form__label--right" style="width:80px;"><label for=""></label></div>
       <div class="t-form__controls" style="margin-left:80px;">
-        <div class="t-form__controls-content"><button type="submit" class="t-button t-size-m t-button--variant-base t-button--theme-primary" style="margin-right:10px;"><span class="t-button__text">提交</span></button> <button type="reset" class="t-button t-size-m t-button--variant-base t-button--theme-default"><span class="t-button__text">重置</span></button><span class="t-form__status t-form__status-without-icon"></span></div>
+        <div class="t-form__controls-content"><button type="submit" class="t-button t-size-m t-button--variant-base t-button--theme-primary" style="margin-right:10px;"><span class="t-button__text">提交</span></button> <button type="reset" class="t-button t-size-m t-button--variant-base t-button--theme-default"><span class="t-button__text">重置</span></button></div>
       </div>
     </div>
   </form>