antdesign Form表单布局和信息验证

1-引入相应的组件

`
import { Form, Row, Col, Input, Select, message } from 'antd'
const { TextArea } = Input;
`

2-对显示器大小进行判断布局

`
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};
const formItemInputLayout = {
  labelCol: {
    xs: { span: 8 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 18 },
  },
};
labelCol 左边留白大小
wrapperCol 内容区大小（两者和不能!>24）
`

3-对form表单进行布局

`
<Form form={form} {...formItemLayout} validateTrigger="onBlur">
        <Row>
          <Col span={12} >
            <Form.Item
              name="demandUnit"
              label="需求单位"
              rules={[{ required: true }]}
            >
              {/* <Input placeholder="请输入" /> */}
              <span className={styles.demandUnit}>{loginDept}</span>
            </Form.Item>
          </Col>
          <Col span={12} className={styles.formCol}>
            <Form.Item
              name="applyScene"
              label="应用场景"
              rules={[{ required: true }]}
              style={{textAlign:"left"}}
            >
              <Select placeholder="请选择" onChange={(value)=>{setApplyScene(value)}} >
                <Option value={0}>减填写</Option>
                <Option value={1}>减材料</Option>
                <Option value={2}>业务协助</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item
              name="rejectReason"
              label="驳回理由"
              {...formItemInputLayout}
            >
              <TextArea rows={3} placeholder="如已申请过，填写驳回理由；如已通过，输入“申请已通过”" style={{ width: "93%" }} />
            </Form.Item>
          </Col>
        </Row>
</form>
//通过ant Guid组件布局
通过 `row` 在水平方向建立一组 `column`（简写 col）。
你的内容应当放置于 `col` 内，并且，只有 `col` 可以作为 `row` 的直接元素。
栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 `<Col span={8}      />` 来创建。
如果一个 `row` 中的 `col` 总和超过 24，那么多余的 `col` 会作为一个整体另起一行排列。
`

3-对表单进行验证 通过在Form.Item上添加rule属性

`   
const [form] = Form.useForm();
const saveFun = () => {
    form.validateFields().then((values) => {
    //这里写提交时请求的方法，在提交前会自动进行验证
    }
}
`

4-验证信息

`  
  rules={[  //手机号验证                    {                      required: true,                      message: '请填写正确手机号',                      pattern:                        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                    },
                  ]}
                  
   rules={[  //邮箱验证                {                  required: true,                  message: '请填写正确邮箱',                  pattern:                    /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                },
              ]}                
                  
                  
                  
`