必填的处理

Drip Form 对表单必填的处理提供两种模式

1. 只有 formData 中不存在该表单字段时，提示必填
2. 当判断表单数据为空时，提示必填

必填校验模式

unitedSchema 顶层支持配置 requiredMode 来配置必填校验模式。

requiredMode 可选两个类型 default 或 empty.

default 模式

遵循 JSON Schema 规范。只有对象中不存在该属性时，才报错。空字符、null、空数组均不会报错

注意

reuqiredMode 为 default 时，表单数据为''、[]、null、undefined会自动删除字段。

如果希望表单存在以上数据，则使用 empty 模式

代码示例

• App.tsx
• unitedSchema.ts

import DripForm from '@jdfed/drip-form';
import antd from '@jdfed/drip-form-theme-antd';
import unitedSchema from './unitedSchema';
import '@jdfed/drip-form/dist/index.css';
import '@jdfed/drip-form-theme-antd/dist/index.css';
import 'antd/dist/antd.css';
import { useState } from 'react';

function App() {
  const [val, setVal] = useState({});
  return (
    <>
      <DripForm
        // 表单配置文件
        unitedSchema={unitedSchema}
        // 导入组件
        uiComponents={{ antd }}
                //监听数据变化
        control={({ formData }) => {
          setVal(formData);
        }}
      ></DripForm>
      <p>{JSON.stringify(val)}</p>
    </>
  );
}

export default App;

代码沙盒：

empty 模式

使用 isEmpty 方法判断该字段是否为空。当为''、null、[]、{}均会报错。数字 0 不会报错

代码示例

• App.tsx
• unitedSchema.ts

import DripForm from '@jdfed/drip-form';
import antd from '@jdfed/drip-form-theme-antd';
import unitedSchema from './unitedSchema';
import '@jdfed/drip-form/dist/index.css';
import '@jdfed/drip-form-theme-antd/dist/index.css';
import 'antd/dist/antd.css';
import { useState } from 'react';

function App() {
  const [val, setVal] = useState({});
  return (
    <>
      <DripForm
        // 表单配置文件
        unitedSchema={unitedSchema}
        // 导入组件
        uiComponents={{ antd }}
                //监听数据变化
        control={({ formData }) => {
          setVal(formData);
        }}
      ></DripForm>
      <p>{JSON.stringify(val)}</p>
    </>
  );
}

export default App;

代码沙盒：

使用 empty 模式，希望''、[]、{}报错。则需要配合以下相应的关键字来实现必填效果

• string类型 长度关键字
• array类型 长度关键字
• object类型 大小关键字