ant-design-vue/components/form/demo/validation.vue
2021-11-05 09:41:56 +08:00

139 lines
4.3 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<docs>
---
order: 6
title:
zh-CN: 表单验证
en-US: Validation
---
## zh-CN
Form 组件提供了表单验证的功能只需要通过 `rules` 属性传入约定的验证规则并将 `FormItem` `name` 属性设置为需校验的字段名即可校验规则参见 [async-validator](https://github.com/yiminghe/async-validator)
## en-US
Just add the `rules` attribute for `Form` component, pass validation rules, and set `name` attribute for `FormItem` as a specific key that needs to be validated. See more information at [async-validator](https://github.com/yiminghe/async-validator).
</docs>
<template>
<a-form
ref="formRef"
:model="formState"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-item ref="name" label="Activity name" name="name">
<a-input v-model:value="formState.name" />
</a-form-item>
<a-form-item label="Activity zone" name="region">
<a-select v-model:value="formState.region" placeholder="please select your zone">
<a-select-option value="shanghai">Zone one</a-select-option>
<a-select-option value="beijing">Zone two</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="Activity time" required name="date1">
<a-date-picker
v-model:value="formState.date1"
show-time
type="date"
placeholder="Pick a date"
style="width: 100%"
/>
</a-form-item>
<a-form-item label="Instant delivery" name="delivery">
<a-switch v-model:checked="formState.delivery" />
</a-form-item>
<a-form-item label="Activity type" name="type">
<a-checkbox-group v-model:value="formState.type">
<a-checkbox value="1" name="type">Online</a-checkbox>
<a-checkbox value="2" name="type">Promotion</a-checkbox>
<a-checkbox value="3" name="type">Offline</a-checkbox>
</a-checkbox-group>
</a-form-item>
<a-form-item label="Resources" name="resource">
<a-radio-group v-model:value="formState.resource">
<a-radio value="1">Sponsor</a-radio>
<a-radio value="2">Venue</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="Activity form" name="desc">
<a-textarea v-model:value="formState.desc" />
</a-form-item>
<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
<a-button type="primary" @click="onSubmit">Create</a-button>
<a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>
</a-form-item>
</a-form>
</template>
<script lang="ts">
import { Dayjs } from 'dayjs';
import { defineComponent, reactive, ref, toRaw } from 'vue';
import type { UnwrapRef } from 'vue';
interface FormState {
name: string;
region: string | undefined;
date1: Dayjs | undefined;
delivery: boolean;
type: string[];
resource: string;
desc: string;
}
export default defineComponent({
setup() {
const formRef = ref();
const formState: UnwrapRef<FormState> = reactive({
name: '',
region: undefined,
date1: undefined,
delivery: false,
type: [],
resource: '',
desc: '',
});
const rules = {
name: [
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
],
region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
date1: [{ required: true, message: 'Please pick a date', trigger: 'change', type: 'object' }],
type: [
{
type: 'array',
required: true,
message: 'Please select at least one activity type',
trigger: 'change',
},
],
resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
};
const onSubmit = () => {
formRef.value
.validate()
.then(() => {
console.log('values', formState, toRaw(formState));
})
.catch(error => {
console.log('error', error);
});
};
const resetForm = () => {
formRef.value.resetFields();
};
return {
formRef,
labelCol: { span: 4 },
wrapperCol: { span: 14 },
other: '',
formState,
rules,
onSubmit,
resetForm,
};
},
});
</script>