数据部分:
export const borderData: BorderProps[] = [ { label: '重点排放单位名称', name: 'name', type: 'input', col: 12, max: 100, selectName: '', value: '', pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/, }, { name: 'code', label: '统一社会信用代码', type: 'input', col: 12, max: 18, selectName: '', value: '', pattern: /^[A-Za-z0-9]+$/, }, { label: '公司归属', name: 'company_belong', selectName: 'CompanyOwnership', type: 'select', col: 12, value: '', pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/, }, ];
核心内容部分:
<Form form={FormBorder}> <Row> {borderData?.map((item, index) => { return ( <Col span={item.col} key={index}> <FormItem name={item.name} label={item.label} rules={[ { required: true, message: `${item.label}必填项`, }, () => ({ validator(_, value) { let rules = item.pattern; let flag = rules?.test(value); if (flag) { return Promise.resolve(); } return Promise.reject(new Error('请输入正确内容')); }, }), ]} > {getType(item, !EditStatus ? true : false)} </FormItem> </Col> ); })} </Row> </Form>
数据提交验证:
const onFinish = async () => { FormBorder.validateFields() .then(() => { setLoading(true); updateOrganizationInfo(Number(current), valid) .then((res) => { setLoading(false); }) .catch(() => { setLoading(false); }); }) .catch(error => { console.log(error); }); };