驗證表單中物件的欄位 - Vue 3 + Vee-validate + 是的
P粉486138196
P粉486138196 2023-11-16 13:56:09

我有一個表單,其中某些欄位位於物件內:

<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 (以相同順序),且表單不會僅當您再次編輯groupdescription 時才被視為有效。

我自己更改欄位時如何進行驗證?

這是完整程式碼的連結。

我使用以下版本:

"vue":"^3.2.37",
"vee-validate": "^4.5.11",
"yup": "^0.32.11"


#
P粉486138196
P粉486138196

全部回覆(1)
P粉191610580

當您將 useField() 與物件一起使用時,嵌套屬性將失去其反應性連線。因此,這裡有兩個選項可以解決此問題:用reactive()包裝useField或為每個巢狀屬性單獨使用useField()。

選項1

const { value: user } =reactive(useField('user'));

選項2

const { value: first_name } = useField('user.first_name');
const { value: last_name } = useField('user.last_name');

這裡是一個工作範例這裡

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!