@aliretail/react-dynamic-delivery/demo/Page/validate-pattern.md

动态下发引擎

---
title: 校验 - 正则
order: 6
---

请在姓名区域输入数字或者 「.」「`」「$」「+」字符

```jsx
import { Component } from 'react';
import moment from 'moment';
import { FormComponents } from '@aliretail/react-materials-components';
import DynamicInit from '@aliretail/react-dynamic-delivery';

import './index.scss';
import './componentsMap';
import { MGetPageConfig } from './model/request';
import { getAllUrlParameter } from './utils/search';

const { SchemaForm, createFormActions, LifeCycleTypes } = FormComponents;

const ROOT_DOM_CLASS_NAME = 'aliretail--demo';

const apiPageConfig = {
  data: {
    page: {
      type: 'PageLayout',
      fields: {
        others: {
          mode: 'fixed',
        },
      },
    },
    NO_NAME_MODULE_CONTAINER_$0_SECTION: {
      type: 'UnionSection',
      fields: {
        others: {
          title: '基本信息',
        },
      },
    },
    NO_NAME_MODULE_CONTAINER_$0_FORM: {
      type: 'GridLayout',
      fields: {
        others: {
          isForm: true,
          align: 'left',
        },
      },
    },
    name: {
      type: 'Input',
      fields: {
        others: {
          maxLength: 16,
        },
        formItemConfig: {
          title: '姓名',
        },
        value: 'ness',
      },
      validate: {
        value: [
          {
            msg: '姓名不能带特殊符号',
            regex: '^[^\\.\\`\\$\\+]+$',
          },
          {
            msg: '姓名不能带数字',
            regex: '^[^\\d]+$',
          },
        ],
      },
    },
    age: {
      type: 'Input',
      fields: {
        formItemConfig: {
          title: '年龄',
          required: true,
        },
      },
    },
    nav: {
      type: 'Nav',
    },
    EDIT_FOOTER: {
      type: 'UnionFooter',
    },
    submitBtn: {
      type: 'Button',
      fields: {
        others: {
          type: 'primary',
          children: '提交并生效',
          linkageName: 'submitList',
        },
      },
    },
  },
  linkage: {
    submit: {
      type: 'submit',
      fields: {
        url: 'https://oneapi.alibaba-inc.com/mock/aliretail_materials/dynamic-delivery/MPagePush',
      },
    },
    showSuccessToast: {
      type: 'toast',
      fields: {
        type: 'success',
        content: '提交成功',
      },
    },
    submitList: ['submit', 'showSuccessToast'],
  },
  hierarchy: {
    root: 'page',
    structure: {
      page: ['nav', 'NO_NAME_MODULE_CONTAINER_$0_SECTION', 'EDIT_FOOTER'],
      EDIT_FOOTER: ['submitBtn'],
      NO_NAME_MODULE_CONTAINER_$0_SECTION: ['NO_NAME_MODULE_CONTAINER_$0_FORM'],
      NO_NAME_MODULE_CONTAINER_$0_FORM: ['name', 'age'],
    },
  },
};

class Demo extends Component {
  state = {
    actions: createFormActions(),
    schema: null,
  };

  dynamic = new DynamicInit({
    linkageMap: {},
    analyzeMode: 'complex',
    rootDom: `.${ROOT_DOM_CLASS_NAME}`,
  });

  async componentDidMount() {
    moment.locale('zh-cn');

    // 添加从url上面获取数据直接带到接口中
    const schema = this.dynamic.dynamicDeal(apiPageConfig);
    this.setState({
      schema,
    });
  }

  render() {
    const { schema, actions } = this.state;

    return (
      <div className={ROOT_DOM_CLASS_NAME}>
        <SchemaForm actions={actions} schema={schema} />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);
```