FormKitSchemaDefinition；

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { getNode, type FormKitNode } from '@formkit/core';
+import { FormKitSchemaDefinition, getNode, type FormKitNode } from '@formkit/core';
+
 import { onMounted } from 'vue';
 
 async function submit(...args: any[]) {
@@ -12,6 +13,7 @@ const castNumber = (node: FormKitNode) => {
   node.hook.input((value, next) => next(Number(value)))
 }
 
+
 onMounted(() => {
   const agreeNode = getNode('agreeNodeId')
   Object.assign(window, { agreeNode })
@@ -25,6 +27,38 @@ onMounted(() => {
     nameNode!.input(`${newValue} ${payload ? '👍' : '👎'}`)
   })
 })
+
+const addressSchema: FormKitSchemaDefinition = [
+  {
+    $formkit: 'group',
+    name: 'address',
+    children: [
+      {
+        $formkit: 'text',
+        name: 'street',
+        label: '街道地址',
+        validation: 'required',
+        validationLabel: '街道地址'
+      },
+      {
+        $formkit: 'text',
+        name: 'city',
+        label: '城市',
+        validation: 'required',
+        validationLabel: '城市'
+      },
+      {
+        $formkit: 'text',
+        name: 'zipCode',
+        label: '邮政编码',
+        validation: 'required|number|length:6',
+        validationLabel: '邮政编码',
+        errors: ['显式错误'] // 显式设置的错误是非阻塞的，这意味着它们不会像验证错误那样阻止表单提交。您可以在表单文档中了解更多有关错误处理的信息。
+        //  :errors="errors"
+      }
+    ]
+  }
+];
 </script>
 
 <template>
@@ -51,10 +85,10 @@ onMounted(() => {
           validation-visibility="live"
           validation="validateGroup"
           :validation-messages="{
-  validateGroup: ({ name/* , args */ }) => {
-    return `字段 ${name} 必须包含 '测试' 字符串。`
-  },
-}"
+            validateGroup: ({ name/* , args */ }) => {
+              return `字段 ${name} 必须包含 '测试' 字符串。`
+            },
+          }"
           #default="{ id, messages, fns, classes }"
         >
 
@@ -86,40 +120,41 @@ onMounted(() => {
             type="range"
             name="strength"
             id="strength"
-            label="Strength"
+            label="力量"
             value="5"
             validation="min:2|max:9"
             validation-visibility="live"
             min="1"
             max="10"
             step="1"
-            help="How many strength points should this character have?"
+            help="这个角色应该有多少力量点？"
             :plugins="[castNumber]"
             class="mb-4"
           />
 
 
           <!-- By default groups do not show validation messages, so we need to add it manually -->
-          <div class="error-box">
-            <p>fns.length(messages): {{ fns.length(messages) }}</p>
-            <ul
-              :class="classes.messages"
-              v-if="fns.length(messages)"
+          <ul
+            class="error-box"
+            :class="classes.messages"
+            v-if="fns.length(messages)"
+          >
+            <li
+              v-for="message in messages"
+              :key="message.key"
+              :id="`${id}-${message.key}`"
+              :data-message-type="message.type"
             >
-              <li
-                v-for="message in messages"
-                :key="message.key"
-                :class="classes.message"
-                :id="`${id}-${message.key}`"
-                :data-message-type="message.type"
-              >
-                {{ message.value }}
-              </li>
-            </ul>
-          </div>
+              {{ message.value }}
+            </li>
+          </ul>
         </FormKit>
       </div>
 
+      <div class="character-attributes">
+        <FormKitSchema :schema="addressSchema" />
+      </div>
+
       <FormKit
         type="checkbox"
         name="agree"
@@ -142,7 +177,7 @@ onMounted(() => {
   background-color: #f9fafb;
 }
 
-.error-box {
+ul.error-box {
   padding: 0.75rem;
   border: 1px solid #ef4444;
   border-radius: 0.375rem;
@@ -152,7 +187,7 @@ onMounted(() => {
   line-height: 1.25rem;
 }
 
-.error-box p {
+ul.error-box p {
   font-weight: 500;
 }
 </style>