---
title: 表单校验（正则）规则 
order: 5
---

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { YwJsonForm } from '@ywfe/yw-design';
import 'antd/dist/antd.css';

const items = [
  {
    title: '必填校验',
    name: 'input1',
    component: 'Input',
    type: 'string',
    required: true,
    // rules: {required:true,message:'自定义文案'}
  },
  {
    title: '数字格式(内置)',
    name: 'input2',
    component: 'Input',
    type: 'number',
    rules: 'integer',
    componentProps: {},
  },
  {
    title: '金额&价格类',
    name: 'amount',
    component: 'NumberPicker',
    type: 'number',
    rules: [{
      maximum:1000,
      message:'您输入的金额为“实际输入金额”，金额过大请确认'
    },{
      format:'biz_amount',
      message:'仅支持大于等于0的数字，支持小数点后2位'
    }],
    componentProps: {},
  },
  {
    title: '正数格式(扩展)',
    name: 'input3',
    component: 'Input',
    type: 'number',
    rules: 'positive',
    componentProps: {},
  },
  {
    title: '正整数格式(扩展)',
    name: 'input4',
    component: 'Input',
    type: 'number',
    rules: 'positive_integer',
    componentProps: {},
  },
  {
    title: '整数格式(扩展)',
    name: 'input5',
    component: 'Input',
    type: 'number',
    rules: 'integer',
    componentProps: {},
  },
  {
    title: '最小值5',
    name: 'input6',
    component: 'NumberPicker',
    type: 'number',
    rules: { minimum: 5 },
    componentProps: {},
  },
  {
    title: '最小值5（<=5）',
    name: 'input7',
    component: 'NumberPicker',
    type: 'number',
    rules: { exclusiveMinimum: 5 },
    componentProps: {},
  },
  {
    title: 'url地址',
    name: 'input8',
    component: 'Input',
    type: 'string',
    rules: 'url',
    componentProps: {},
  },
  {
    title: '自定义异步校验',
    name: 'input9',
    component: 'Input',
    type: 'number',
    rules: (value) => {
      return new Promise((resolve) => {
        setTimeout(() => {
          if (!value) {
            resolve('');
          }
          if (value === '123') {
            resolve('');
          } else {
            resolve('错误❎');
          }
        }, 100);
      });
    },
  },
];

const buttons = [{ htmlType: 'submit' }, { htmlType: 'reset' }];
const onSubmit = (form) => {
  console.log('submit', form);
};
const App =  ()=> {
    return (
      <div>
        <YwJsonForm items={items} buttons={buttons} scrollIntoView/>
      </div>
    );
}

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