Vee-Validate 表单初值与状态管理攻略：打造响应、可靠表单

2024-03-20 14:52:23

Vee-Validate 中的初始值和表单状态管理

导言

在构建基于 Web 表单的应用程序时，我们经常遇到需要管理初始值和跟踪表单状态的情况。Vee-Validate 是一个出色的 JavaScript 库，可以简化这些任务。了解 Vee-Validate 中的初始值和表单状态管理对于创建具有响应性和可验证性的表单至关重要。

初始值

初始值是指在加载表单时显示在输入字段中的值。在 Vee-Validate 中，我们可以使用 initialValues 属性来设置初始值。这样做的好处包括：

预填充表单： 允许用户从他们已经输入的数据开始，从而减少重新输入的需要。
保留用户输入： 即使表单提交失败或刷新页面，也可以保留用户输入，从而提高用户体验。

表单状态

表单状态包含有关表单状态的信息，例如是否干净或脏。Vee-Validate 维护一个表单状态对象，该对象提供以下信息：

meta.dirty：表示至少有一个字段的值已被修改。
meta.valid：表示表单是否通过了所有验证规则。
meta.touched：表示至少一个字段已被交互（聚焦或失去焦点）。

设置初始值

当我们使用 Vee-Validate 来设置初始值时，要注意一个常见问题。将初始值直接分配给 initialValues 属性会导致表单变脏，即使这些值尚未被用户修改。

解决方案

为了正确设置初始值，我们可以使用以下步骤：

在 onMounted 钩子之外获取 API 初始值。
使用 useWatch 钩子观察初始值并触发回调函数。
在回调函数中，使用 setFieldValue 方法将初始值设置到 Vee-Validate 表单中。

这确保了仅在我们对表单字段进行实际更改时才将表单标记为脏。

代码示例

<script setup lang="ts">
const initialValues = ref({})
const { handleSubmit } = useForm({
  validationSchema: {...}
})

onMounted(async () => {
  const api = useApi()
  const companyData = (await api.get(`/companies/${store.currentCompany.id}`)).data
  initialValues.value = companyData
})

useWatch(initialValues, (newValue, oldValue) => {
  if (newValue !== oldValue) {
    for (const key in newValue) {
      setFieldValue(key, newValue[key])
    }
  }
})
</script>

监控表单状态

我们可以使用 watch 选项来监控表单状态的变化。这对于检测表单何时变脏或验证何时通过非常有用。

<script setup lang="ts">
const { handleSubmit } = useForm({
  validationSchema: {...}
})

watch(meta, (newValue, oldValue) => {
  console.log('Form state has changed!')
})
</script>

结论

掌握 Vee-Validate 中的初始值和表单状态管理对于构建健壮且用户友好的表单至关重要。通过使用本指南中介绍的技术，我们可以轻松地设置初始值、跟踪表单状态并确保表单行为符合我们的预期。

常见问题解答