u

code/g3soft-libs/docs/examples/form/submit.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+// 提交与失败：submit 只在全部通过时触发；submitFailed 带上出错字段
+import { reactive, ref } from 'vue'
+import { G3Button, G3Form, G3FormItem, G3Input, G3Message, G3Space } from '@g3soft/ui'
+
+const model = reactive({ name: '', email: '' })
+const rules = {
+  name: [{ required: true }],
+  email: [{ required: true, type: 'email' }],
+}
+
+const formRef = ref<InstanceType<typeof G3Form> | null>(null)
+
+async function validateManually() {
+  const errors = await formRef.value?.validateAll()
+  if (!errors?.length) G3Message.success('校验通过')
+  else G3Message.error(`有 ${errors.length} 个字段未通过`)
+}
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="12" style="display: flex; max-width: 420px">
+    <G3Form
+      ref="formRef"
+      :model="model"
+      :rules="rules"
+      :label-width="72"
+      @submit="() => G3Message.success('全部通过，已提交')"
+      @submit-failed="(payload: { errorFields: unknown[] }) => G3Message.error(`失败：${payload.errorFields.length} 个字段`)"
+      @reset="G3Message.info('已重置')"
+    >
+      <G3FormItem name="name" label="名称">
+        <G3Input v-model="model.name" />
+      </G3FormItem>
+      <G3FormItem name="email" label="邮箱">
+        <G3Input v-model="model.email" />
+      </G3FormItem>
+      <G3FormItem>
+        <G3Space :size="8">
+          <G3Button html-type="submit">提交</G3Button>
+          <G3Button html-type="reset" type="outline">重置</G3Button>
+          <G3Button type="ghost" @click="validateManually">手动校验</G3Button>
+        </G3Space>
+      </G3FormItem>
+    </G3Form>
+  </G3Space>
+</template>