arco design form表单自定义校验空值时注意事项

Arco Design 的 Form 组件支持通过 rules 配置校验规则，默认情况下可以通过 required: true 设置字段必填。如果使用了自定义 validator，但希望字段为空时跳过校验（即不触发空值错误），需要手动在 validator 中处理空值逻辑。

实现方法

在 rules 中配置 validator 函数，并在函数中检查值是否为空。如果值为空，直接返回校验通过；如果值非空，则执行自定义校验逻辑。

示例代码

jsx 复制代码

import React from 'react';
import { Form, Input, Button } from '@arco-design/web-react';

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

  // 自定义校验规则
  const customValidator = (value, callback) => {
    // 如果值为空，直接通过校验（跳过空值校验）
    if (!value) {
      callback(); // 空值时校验通过
      return;
    }

    // 非空值时执行自定义校验逻辑
    // 例如：校验值是否为特定格式（如数字）
    const isValid = /^\d+$/.test(value);
    if (isValid) {
      callback(); // 校验通过
    } else {
      callback('请输入纯数字'); // 校验失败，返回错误信息
    }
  };

  return (
    <Form
      form={form}
      layout="vertical"
      onSubmit={(values) => {
        console.log('提交数据:', values);
      }}
    >
      <Form.Item
        label="数字输入"
        field="number"
        rules={[
          {
            validator: customValidator, // 使用自定义校验
          },
        ]}
      >
        <Input placeholder="请输入数字（可选）" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default App;

代码说明

自定义校验函数 (customValidator)
- 参数 value：当前字段的值。
- 参数 callback：校验完成后的回调函数，用于返回校验结果。
  - 调用 callback() 表示校验通过。
  - 调用 callback('错误信息') 表示校验失败并返回错误信息。
- 在函数中，首先检查 value 是否为空（!value），如果是空值，直接调用 callback() 跳过校验。
- 如果值非空，则执行自定义校验逻辑（例如检查是否为纯数字）。
禁止空值校验
- 通过在 validator 中显式检查空值并返回 callback()，避免了空值触发错误。
- 没有设置 required: true，因此字段默认是非必填的。
规则配置
- 在 Form.Item 的 rules 中只配置了 validator，没有其他校验规则（如 required），确保空值不会触发默认的必填校验。

注意事项

避免 required: true ：如果在 rules 中设置了 { required: true }，Arco Design 会强制要求字段非空，这会覆盖自定义 validator 的空值逻辑。因此，如果希望字段可选，不要设置 required: true。
多规则组合 ：如果你需要在 rules 中组合多个校验规则，确保其他规则（如 minLength、maxLength）不会与空值校验冲突。例如：
javascript 复制代码
```
rules={[
  { minLength: 3, message: '至少输入3个字符' }, // 仅在非空时生效
  { validator: customValidator },
]}
```
Arco Design 的校验规则会按顺序执行，空值会在 validator 中被处理。

异步校验 ：如果你的校验逻辑需要异步操作（例如调用后端接口），可以让 validator 返回一个 Promise：

javascript 复制代码

const asyncValidator = async (value, callback) => {
  if (!value) {
    callback(); // 空值通过
    return;
  }
  try {
    // 模拟异步校验
    const isValid = await mockApiCheck(value);
    if (isValid) {
      callback();
    } else {
      callback('校验失败');
    }
  } catch (error) {
    callback('校验出错');
  }
};

表单初始化值 ：确保表单的初始值（通过 initialValues 或 defaultValue 设置）不会干扰空值逻辑。如果初始值是 undefined 或 null，validator 的空值检查应正确处理这些情况。

总结

通过在 validator 自定义校验函数中显式处理空值（if (!value) callback()），可以禁止 Arco Design Form 的空值校验，同时保留对非空值的自定义校验逻辑。关键点是避免使用 required: true 并确保 validator 逻辑正确处理空值场景。