48 lines
1.6 KiB
Vue
48 lines
1.6 KiB
Vue
<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 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>
|