Ant Design 全局自定义默认表单验证错误信息

在Ant Design中使用[{required:true,min:6,max:12}]等表单验证规则时,提示往往是英文的,不过我更希望它是中文的,正好Ant Design提供了相应的API来实现,以下就是API使用方式.

默认表单验证规则 required:true 效果:

自定义表单验证 required:true 效果:

Ant Design文档描述: 文档地址:ant.design/components/…;

实现方式:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { ConfigProvider } from 'antd';
import { ValidateMessages } from 'node_modules/rc-field-form/lib/interface.d';
//配置表单校验,默认的全局配置信息
const validateMessages: ValidateMessages = {
    required: '${label} 是必选字段',
    string: {
        len: '${label} 长度必须是 ${len} 位',
        min: '${label} 长度必须至少 ${min} 位',
        max: '${label} 长度必须最多 ${min} 位',
        range: '${label} 长度必须在 ${min}~${max} 之间',
    },
    number: {
        len: '${name} 长度必须是 ${len} 位',
        min: '${name} 长度必须至少 ${min} 位',
        max: '${name} 长度必须最多 ${min} 位',
        range: '${name} 长度必须在 ${min}~${max} 之间',
    },
};
ReactDOM.render(
    <>
        <ConfigProvider form={{ validateMessages }}>
            <App />
        </ConfigProvider>
    </>,
    document.getElementById('root')
);

代码解释:

从antd中引入类型约束:(类型约束并不是必须引用,TS版本下需要类型提示,可以引入)

import { ValidateMessages } from 'node_modules/rc-field-form/lib/interface.d';

类型约束:

ValidateMessage:字符串,${*}用于调用验证规则使用的字段.

如:

${label}表示Form.Item中的label字段对应的值.

${name}表示Form.Item中的name字段对应的值.

${min}表示Form.Item->rules校验规则中的min字段对应的值.

.......等等等

最终完整效果:

完.