u

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

@@ -0,0 +1,61 @@
+<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>