示例
你想要的效果按下面示例仿写即可,具体使用教程晚点会出
- 示例一:
<ProFormText
name={['table_info', 'lifetime_min']}
label='刷新频率'
labelCol={{ span: 8, offset: 2 }}
wrapperCol={{ span: 14, offset: 0 }}
rules={[{ required: true }, { pattern: /^[0-9]*$/, message: '必须是数字格式' }]}
disabled={mode === 'read' || mode === 'update'}
placeholder='最小值(单位秒)'
fieldProps={{ style: { width: 200, textAlign: 'center' } }}
/>
~
<ProFormDependency name={['table_info', 'lifetime_min']}>
{(depFields) => {
console.log('depFields', depFields.table_info?.lifetime_min)
let min = depFields.table_info?.lifetime_min
return (
<ProFormText
name={['table_info', 'lifetime_max']}
label=''
labelCol={{ span: 0, offset: 0 }}
wrapperCol={{ span: 16, offset: 0 }}
rules={[
{ required: true },
{ pattern: /^[0-9]*$/, message: '必须是数字格式' },
{
validator: async (rule: any, value: any, callback: Function) => {
if (Number(min) > Number(value)) {
// rule: 当前校验字段在 descriptor 中所对应的校验规则,其中的 field 属性是当前正在校验字段的名称
// value: 当前校验字段的值
// callback 在校验完成时的回调,传入 Error [或者是一个数组] 代表校验失败
throw new Error(`最大值要大于最小值`)
} else {
return null
}
},
},
]}
disabled={mode === 'read' || mode === 'update'}
placeholder='最大值(单位秒)'
fieldProps={{ style: { width: 200, textAlign: 'center', borderLeftWidth: 0 } }}
/>
)
}}
</ProFormDependency>
- 示例 2:
rules: [
{ required: false },
{
validator: async (rule, value) => {
JSON.parse(value)
return true
},
message: '无效的JSON格式',
},
],
- 示例 3:
rules={[
{
validator: (rule: any, hashNodeNum: number) => {
if (hashNodeNum % 1 !== 0) {
return Promise.reject('只能输入整数')
}
if (sharedCount % 1) {
return Promise.reject('开启高可用时,hash节点个数必须为偶数')
}
return Promise.resolve()
},
},
]}
- 示例 4:
rules={[
{
validator: (rule: any, taskConfigDefault: string) => {
try {
const data = JSON.parse(taskConfigDefault)
if (_.isObject(data)) {
if (!_.isNumber(_.get(data, 'cache_size'))) {
return Promise.reject('cache_size必须为数字')
}
if (!_.isNumber(_.get(data, 'buffer_size'))) {
return Promise.reject('buffer_size必须为数字')
}
if (!_.isString(_.get(data, 'task_cluster'))) {
return Promise.reject('task_cluster必须为字符串')
}
if (!_.isNumber(_.get(data, 'ack_timeout_secs'))) {
return Promise.reject('ack_timeout_secs必须为数字')
}
if (!_.isNumber(_.get(data, 'flush_timeout_secs'))) {
return Promise.reject('flush_timeout_secs必须为数字')
}
if (!_.isNumber(_.get(data, 'min_flush_timeout_secs'))) {
return Promise.reject('min_flush_timeout_secs必须为数字')
}
return Promise.resolve()
} else {
return Promise.reject('请输入JSON格式!')
}
} catch (err) {
return Promise.reject('请输入JSON格式!')
}
},
},
]}
- 示例 5:
rules={[
{ required: true },
{
validator: (rule: any, lzGaia: (string | number)[]) => {
if (lzGaia && lzGaia.length !== 0 && lzGaia.length !== 4) {
return Promise.reject('数据信息不完整!')
} else {
return Promise.resolve()
}
},
},
]}
- 示例 6:
rules={[
{
validator: (rule: any, hashNodeNum: number) => {
if (hashNodeNum % 1 !== 0) {
return Promise.reject('只能输入整数')
}
if (sharedCount % 1) {
return Promise.reject('开启高可用时,hash节点个数必须为偶数')
}
return Promise.resolve()
},
},
]}
- 示例 7:
rules: [
{ required: true },
{
validator: (rule, value, cb) => {
if (
value.schedule_cycle === FlowScheduleCycle.SCHEDULE_CYCLE_MINUTE &&
value.schedule_step % 5 !== 0
) {
cb('分钟级任务间隔必须是5的整数倍')
} else if (
value.schedule_cycle !== FlowScheduleCycle.NON_CYCLIC &&
value.schedule_step === ''
) {
cb('请输入')
} else {
cb()
}
},
},
]
- 示例 8:
rules: [
{ required: true },
{
validator: async (rule, value) => {
if (value > 0) throw new Error('必须小于或等于0')
},
},
],
- 示例 9:
rules={[
{
required: true,
message: '请输入枚举值!',
},
() => ({
validator(_, value) {
if (!value || !/[A-Z]+/g.test(value)) {
return Promise.resolve()
}
return Promise.reject(new Error('请勿输入大写枚举值!'))
},
}),
]}
- 示例 10:
export const integerRule = {
validator: async (ruleObject: any, value: any, cb: Function) => {
if (value !== undefined && !/^[0-9]+$/.test(value)) {
throw new Error(`无效格式,'${ruleObject.fullField}'不是整数`)
}
},
}