39 lines
1.1 KiB
Vue
39 lines
1.1 KiB
Vue
<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>
|