84 lines
1.9 KiB
Vue
84 lines
1.9 KiB
Vue
<docs>
|
|
---
|
|
order: 23
|
|
title:
|
|
zh-CN: 动态校验规则
|
|
en-US: Dynamic Rules
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
根据不同情况执行不同的校验规则。
|
|
|
|
## en-US
|
|
|
|
Perform different check rules according to different situations.
|
|
|
|
</docs>
|
|
<template>
|
|
<a-form ref="formRef" :model="formState" name="dynamic_rule" v-bind="formItemLayout">
|
|
<a-form-item
|
|
label="Username"
|
|
name="username"
|
|
:rules="[{ required: true, message: 'Please input your username!' }]"
|
|
>
|
|
<a-input v-model:value="formState.username" />
|
|
</a-form-item>
|
|
|
|
<a-form-item
|
|
label="Nickname"
|
|
name="nickname"
|
|
:rules="[{ required: formState.checkNick, message: 'Please input your nickname!' }]"
|
|
>
|
|
<a-input v-model:value="formState.nickname" />
|
|
</a-form-item>
|
|
|
|
<a-form-item name="checkNick" v-bind="formTailLayout">
|
|
<a-checkbox v-model:checked="formState.checkNick">Nickname is required</a-checkbox>
|
|
</a-form-item>
|
|
|
|
<a-form-item v-bind="formTailLayout">
|
|
<a-button type="primary" @click="onCheck">Check</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { reactive, ref, watch } from 'vue';
|
|
import type { FormInstance } from 'ant-design-vue';
|
|
|
|
interface FormState {
|
|
username: string;
|
|
nickname: string;
|
|
checkNick: boolean;
|
|
}
|
|
const formRef = ref<FormInstance>();
|
|
const formState = reactive<FormState>({
|
|
username: '',
|
|
nickname: '',
|
|
checkNick: false,
|
|
});
|
|
watch(
|
|
() => formState.checkNick,
|
|
() => {
|
|
formRef.value.validateFields(['nickname']);
|
|
},
|
|
{ flush: 'post' },
|
|
);
|
|
const onCheck = async () => {
|
|
try {
|
|
const values = await formRef.value.validateFields();
|
|
console.log('Success:', values);
|
|
} catch (errorInfo) {
|
|
console.log('Failed:', errorInfo);
|
|
}
|
|
};
|
|
const formItemLayout = {
|
|
labelCol: { span: 4 },
|
|
wrapperCol: { span: 8 },
|
|
};
|
|
const formTailLayout = {
|
|
labelCol: { span: 4 },
|
|
wrapperCol: { span: 8, offset: 4 },
|
|
};
|
|
</script>
|