前端 - 使用antd Form，期望只校验数据正确性不校验必填怎么操作？

Question

表单有两个提交按钮，一个是保存，一个是提交。保存时，只验证数据正确性，下次继续完善。提交就是验证数据正确性同时验证必填项。
该怎么实现呢？

Answer 1

要不用一个变量来控制一下：

import React, { useState } from "react";import { Input, Button, Space, Form } from "antd";import "antd/dist/antd.css";import "./styles.css";export default function App() {  const [form] = Form.useForm();  const [isSubmit, setIsSubmit] = useState(true);  const handleSubmit = (values) => {    setIsSubmit(true);    form.submit();    console.log(form.getFieldsValue());  };  const handleSave = async () => {    setIsSubmit(false);    form.validateFields();    console.log(form.getFieldsValue());  };  return (    <div className="App">      <Form form={form} layout="vertical">        <Form.Item          name="input1"          label="Input 1"          rules={[{ required: isSubmit }]}        >          <Input />        </Form.Item>        <Form.Item          name="input2"          label="Input 2"          rules={[{ required: isSubmit }]}        >          <Input />        </Form.Item>        <Space>          <Button onClick={handleSubmit} type="primary">            Submit          </Button>          <Button onClick={handleSave}>Save</Button>        </Space>      </Form>    </div>  );}

这里有个我自己写的完整的例子，希望能帮助到你。

Answer 2

看起来你需要根据不同的按钮动作来调整验证规则。Ant Design（antd）的Form组件为你提供了这样的功能。你可以为每个表单项定义不同的验证规则，并且根据需要使用这些规则。

当你使用Form.Item的rules属性定义验证规则时，你可以添加一个规则到rules数组中，该规则的validator函数会在表单项的值改变时被调用，如果验证通过则返回Promise.resolve()，否则返回一个有错误提示的Promise.reject()。

以下是一个例子，展示了如何在校验数据正确性时忽略必填项：

import { Form, Button } from 'antd';const Demo = () => {  const [form] = Form.useForm();  const validateInput = (rule, value) => {    if (value && value.includes('input')) {  // 如果输入值包含 'input' 则视为正确      return Promise.resolve();    }    return Promise.reject('输入的值必须包含 "input"!');  // 如果输入值不包含 'input' 则校验失败  };  const save = () => {    form.validateFields((err, values) => {      if (err) {        console.log('验证失败，表单数据错误');      } else {        console.log('保存成功，表单数据:', values);      }    });  };  const submit = () => {    form.validateFields((err, values) => {      if (err) {        console.log('验证失败，表单数据错误');      } else {        console.log('提交成功，表单数据:', values);      }    });  };  return (    <Form form={form}>      <Form.Item name="inputField" rules={[{ validator: validateInput }]}>        <Input />      </Form.Item>      <Button type="primary" onClick={save}>保存</Button>      <Button onClick={submit}>提交</Button>    </Form>  );};export default Demo;

在这个例子中，"inputField" 是表单项的名称，它的 rules 属性包含一个验证规则，使用 validator 函数 validateInput 对输入值进行校验。如果输入值包含 "input"，则校验通过；否则，校验失败并提示错误信息。

当你点击 "保存" 按钮时，会调用 save 方法，此方法会调用 form.validateFields 方法进行表单验证。此时，由于 validateInput 函数只校验输入值是否包含 "input"，而不会校验必填项，因此即使必填项未填，也可以保存。

而当你点击 "提交" 按钮时，会调用 submit 方法，同样会调用 form.validateFields 方法进行表单验证。但与 "保存" 不同，"提交" 会执行所有的验证规则，包括必填项的校验，因此如果必填项未填，则无法提交。