Ant Design在日常开发中的使用，这里都有

最新推荐文章于 2024-08-13 07:19:30 发布

姑老爷呀

最新推荐文章于 2024-08-13 07:19:30 发布

阅读量6k

点赞数 1

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/pfourfire/article/details/124864411

版权

本文详细介绍了Ant Design在前端开发中的应用，包括表单组件的验证与数据收集、消息提示组件的使用、按钮加载状态的添加、表格组件与分页功能、富文本编辑器的集成以及上传组件的基本操作，提供了丰富的示例代码，帮助开发者更好地理解和运用Ant Design。

摘要由CSDN通过智能技术生成

antd的表单组件基本用法

官网ant.design/index-cn

按需导入组件

import {  Form, Input, Button, Checkbox } from 'antd'

<Form validateTrigger={['onBlur', 'onChange']}>
  <Form.Item
    name="mobile"
    rules={[
      {
        pattern: /^1[3-9]\d{9}$/,
        message: '手机号码格式不对'
      },
      { required: true, message: '请输入手机号' }
    ]}
  >
    <Input size="large" placeholder="请输入手机号" />
  </Form.Item>
  <Form.Item
    name="code"
    rules={[
      { len: 6, message: '验证码6个字符', validateTrigger: 'onBlur' },
      { required: true, message: '请输入验证码' }
    ]}
  >
    <Input size="large" placeholder="请输入验证码" maxLength={6} />
  </Form.Item>
  <Form.Item name="remember">
    <Checkbox className="login-checkbox-label">
      我已阅读并同意「用户协议」和「隐私条款」
    </Checkbox>
  </Form.Item>

  <Form.Item>
    <Button type="primary" htmlType="submit" size="large" block>
      登录
    </Button>
  </Form.Item>
</Form>

validateTrigger属性:设置在form上就是统一设置字段触发验证的时机设置在Form.Item上，设置触发验证时机