驗證表單中物件的欄位 - Vue 3 + Vee-validate + 是的
我有一個表單，其中某些欄位位於物件內：
<script setup lang="ts">
...
const schema: yup.SchemaOf<any> =
yup.object({
group: yup.string().nullable().required(),
description: yup.string().nullable().required(),
user: yup
.object({
first_name: yup.string().required(),
last_name: yup.string().required(),
})
.required(),
})
const { errors, handleSubmit, isSubmitting } = useForm({
validationSchema: schema,
initialValues: {
group: '',
description: '',
user: {}
},
});
const { value: group } = useField<string>('group');
const { value: description } = useField<string>('description');
const { value: user } = useField<any>('user');
const isValid = useIsFormValid();
...
</script>
<template>
<div>
<label for="group">Group:</label
><input id="group" v-model="group" type="text" />
</div>
<div>
<label for="description">Description:</label
><input id="description" v-model="description" type="text" />
</div>
<div>
<label for="first-name">First name</label
><input id="first-name" v-model="user.first_name" type="text" />
</div>
<div>
<label for="last-name">Last name</label
><input id="last-name" v-model="user.last_name" type="text" />
</div>
<button :disabled="!isValid">Save</button>
...
</template>
但是該物件的資料驗證僅在更改其外部欄位後完成，即填入group, description, first_name, last_name （以相同順序），且表單不會僅當您再次編輯group 或description 時才被視為有效。
我自己更改欄位時如何進行驗證？
這是完整程式碼的連結。
我使用以下版本：
"vue":"^3.2.37", "vee-validate": "^4.5.11", "yup": "^0.32.11"
