u

code/g3soft-libs/docs/examples/form/validate-trigger.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+// validateTrigger：change（默认，输入即校验）或 blur（失焦才校验，输入过程不打扰）
+import { reactive } from 'vue'
+import { G3Form, G3FormItem, G3Input, G3Space } from '@g3soft/ui'
+
+const changeModel = reactive({ code: '' })
+const blurModel = reactive({ code: '' })
+
+const rules = { code: [{ required: true, min: 4, message: '至少 4 位' }] }
+</script>
+
+<template>
+  <G3Space :size="24" wrap>
+    <G3Form
+      :model="changeModel"
+      :rules="rules"
+      validate-trigger="change"
+      layout="vertical"
+      style="width: 260px"
+    >
+      <G3FormItem name="code" label="change：输入即校验">
+        <G3Input v-model="changeModel.code" placeholder="试试输入 1 个字符" />
+      </G3FormItem>
+    </G3Form>
+
+    <G3Form
+      :model="blurModel"
+      :rules="rules"
+      validate-trigger="blur"
+      layout="vertical"
+      style="width: 260px"
+    >
+      <G3FormItem name="code" label="blur：失焦才校验">
+        <G3Input v-model="blurModel.code" placeholder="输入过程不报错" />
+      </G3FormItem>
+    </G3Form>
+  </G3Space>
+</template>