嵌套表单的校验这么做，快速掌握NaiveUi的表单校验技巧

2023-03-24 08:10:07

轻松实现嵌套表单校验，掌握 NaiveUI 表单技巧

作为一名前端开发人员，我们经常需要处理复杂的表单，其中可能包含嵌套的表单项。在使用 NaiveUI 的表单组件时，实现嵌套表单的校验可以是一个挑战，但别担心，本文将为你提供详细的分步指南，让你快速掌握这一技巧。

1. 了解嵌套表单的校验原理

在 NaiveUI 中，表单组件支持嵌套表单，这意味着你可以将一个表单嵌套在另一个表单中。当父表单被校验时，子表单也会自动被校验，因为它们都使用同一个 Form 组件实例。因此，当父表单的校验规则被触发时，子表单也会收到校验事件，从而实现嵌套表单的校验。

2. 父组件的代码示例

import { Form, FormItem } from 'naive-ui'

const ParentForm = () => {
  const [form] = Form.useForm()

  return (
    <Form
      form={form}
      label-placement="left"
      onSubmit={async (values) => {
        console.log(values)
      }}
    >
      <FormItem label="姓名" name="name" rules={[{ required: true, message: '请输入姓名' }]}>
        <Input placeholder="请输入姓名" />
      </FormItem>

      <NestedForm />

      <button type="submit">提交</button>
    </Form>
  )
}

3. 子组件的代码示例

import { Form, FormItem } from 'naive-ui'

const NestedForm = () => {
  const [form] = Form.useForm()

  return (
    <Form form={form} label-placement="left">
      <FormItem label="地址" name="address" rules={[{ required: true, message: '请输入地址' }]}>
        <Input placeholder="请输入地址" />
      </FormItem>
    </Form>
  )
}