62 lines
2.1 KiB
Vue
62 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
// 规则字段：required / type / pattern / len / min / max / message / validator
|
|
import { reactive } from 'vue'
|
|
import { G3Button, G3Form, G3FormItem, G3Input, G3Message, G3Select } from '@g3soft/ui'
|
|
|
|
const model = reactive({ username: '', email: '', age: '', slug: '', role: undefined as number | undefined })
|
|
|
|
const rules = {
|
|
// required：为空时提示「用户名不能为空」
|
|
username: [{ required: true, min: 3, max: 12 }],
|
|
// type：内置 string / number / integer / email / url
|
|
email: [{ required: true, type: 'email' }],
|
|
// validator：返回 true / undefined 通过；返回 false 用 message，返回字符串则作为错误文案
|
|
age: [
|
|
{
|
|
validator: (value: unknown) =>
|
|
Number(value) >= 18 ? true : '必须年满 18 岁',
|
|
},
|
|
],
|
|
// pattern：正则
|
|
slug: [{ pattern: /^[a-z0-9-]+$/, message: '只能包含小写字母、数字与连字符' }],
|
|
// 自定义动态文案：message 传函数
|
|
role: [{ required: true, message: () => '请选择角色' }],
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<G3Form
|
|
:model="model"
|
|
:rules="rules"
|
|
:label-width="88"
|
|
style="max-width: 420px"
|
|
@submit="(values: Record<string, unknown>) => G3Message.success(JSON.stringify(values))"
|
|
>
|
|
<G3FormItem name="username" label="用户名">
|
|
<G3Input v-model="model.username" placeholder="3-12 个字符" />
|
|
</G3FormItem>
|
|
<G3FormItem name="email" label="邮箱">
|
|
<G3Input v-model="model.email" placeholder="name@example.com" />
|
|
</G3FormItem>
|
|
<G3FormItem name="age" label="年龄">
|
|
<G3Input v-model="model.age" type="number" />
|
|
</G3FormItem>
|
|
<G3FormItem name="slug" label="标识">
|
|
<G3Input v-model="model.slug" placeholder="user-profile" />
|
|
</G3FormItem>
|
|
<G3FormItem name="role" label="角色">
|
|
<G3Select
|
|
v-model="model.role"
|
|
:options="[
|
|
{ label: '管理员', value: 1 },
|
|
{ label: '成员', value: 2 },
|
|
]"
|
|
placeholder="请选择"
|
|
/>
|
|
</G3FormItem>
|
|
<G3FormItem>
|
|
<G3Button html-type="submit">提交</G3Button>
|
|
</G3FormItem>
|
|
</G3Form>
|
|
</template>
|