首页手记 AntDesign-Form-rules课程：新手入门指南

AntDesign-Form-rules课程：新手入门指南

标签：

JavaScript 前端工具设计

概述

本文介绍了AntDesign-Form-rules课程的基础知识，包括Form组件的安装、基本使用和表单校验规则。文章详细讲解了如何创建和提交表单，以及如何实现各种校验规则，帮助读者快速掌握Ant Design表单组件的使用方法。

AntDesign-Form-rules课程：新手入门指南

1. AntDesign-Form简介

1.1 介绍Ant Design框架

Ant Design 是一个由蚂蚁金服开发的前端 UI 库，旨在提供一套简单、清晰、一致的界面设计规范，帮助开发者快速构建出美观、易用的 Web 应用界面。Ant Design 框架不仅提供了丰富的组件库，还强调了设计语言的统一，使得前端应用的用户体验更加一致和友好。Ant Design 通过 React、Vue 和 Angular 三个主流前端框架提供组件支持，使得开发者能够快速集成和使用这些组件。

1.2 Form组件的基本概念和用途

Form 组件是 Ant Design 框架中的一个重要组成部分，用于构建表单界面。它提供了丰富的表单控件，如输入框、选择器、按钮等，并支持表单校验、动态添加表单项等功能。表单组件可以方便地处理前后端的数据交互过程，确保用户输入的数据满足一定的格式和规则，从而提升应用的健壮性和用户体验。

1.3 安装和引入Form组件

安装 Ant Design 的 Form 组件需要先安装 Ant Design 框架。以下是在 React 项目中安装 Ant Design 的步骤：

安装 Ant Design：
```
npm install antd --save
```
引入 Form 组件：
```
import { Form } from 'antd';
```

使用 Form 组件的基本结构：

const App = () => {
 return (
   <Form>
     <Form.Item label="用户名">
       <Input />
     </Form.Item>
     <Form.Item>
       <Button type="primary" htmlType="submit">提交</Button>
     </Form.Item>
   </Form>
 );
};

export default App;

2. Form组件的基本使用

2.1 创建一个简单的表单

创建一个简单的表单，包含一个输入框和提交按钮，这是使用 Form 组件的最基本方式：

import React from 'react';
import { Form, Input, Button } from 'antd';

const App = () => {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };
  return (
    <Form onFinish={onFinish}>
      <Form.Item name="username" label="用户名" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default App;

2.2 基础组件的使用

使用 Form 组件时，可以将输入框、选择器、按钮等基础组件嵌入到表单项中。以下是一个包含多个表单项的简单示例：

import React from 'react';
import { Form, Input, Select, Button } from 'antd';

const App = () => {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };
  return (
    <Form onFinish={onFinish}>
      <Form.Item name="username" label="用户名" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item name="age" label="年龄" rules={[{ required: true, message: '请输入年龄' }]}>
        <Input />
      </Form.Item>
      <Form.Item name="gender" label="性别">
        <Select placeholder="选择性别">
          <Select.Option value="male">男</Select.Option>
          <Select.Option value="female">女</Select.Option>
        </Select>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default App;

2.3 表单提交与响应

在 Form 组件中，通过 onFinish 回调函数可以获取表单提交后的数据。当表单提交成功时，onFinish 回调函数会被触发，此时可以对获取的数据进行处理或发送到后端。

import React from 'react';
import { Form, Input, Button } from 'antd';

const App = () => {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    // 这里可以添加数据提交到服务器的逻辑
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <Form onFinish={onFinish} onFinishFailed={onFinishFailed}>
      <Form.Item name="username" label="用户名" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default App;

3. AntDesign-Form-rules的基础规则

3.1 必填项校验

必填项校验是最基本的表单校验规则之一。通过 rules 属性中的 required 参数可以实现必填项校验。

import React from 'react';
import { Form, Input } from 'antd';

const App = () => {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };
  return (
    <Form onFinish={onFinish}>
      <Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }]}>
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default App;

3.2 最小长度和最大长度限制

在表单校验时，还可以设置最小长度和最大长度的限制。通过 min 和 max 参数可以实现长度限制。

import React from 'react';
import { Form, Input } from 'antd';

const App = () => {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };
  return (
    <Form onFinish={onFinish}>
      <Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }, { min: 5, max: 10, message: '长度应在5到10个字符之间' }]}>
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default App;

3.3 正则表达式校验

正则表达式校验是常用的表单校验方式。通过 pattern 参数可以实现正则表达式校验。

import React from 'react';
import { Form, Input } from 'antd';

const App = () => {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };
  return (
    <Form onFinish={onFinish}>
      <Form.Item name="email" label="邮箱" rules={[{ required: true, message: '请输入邮箱' }, { type: 'email', message: '请输入有效的邮箱地址' }]}>
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default App;

3.4 自定义校验规则

除了内置的校验规则，还可以自定义校验函数来满足特定的校验需求。

import React from 'react';
import { Form, Input } from 'antd';

const customValidate = (rule, value) => {
  if (value && value.length < 5) {
    return Promise.reject('长度不能少于5个字符');
  }
  return Promise.resolve();
};

const App = () => {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };
  return (
    <Form onFinish={onFinish}>
      <Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }, { validator: customValidate }]}>
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default App;

4. Form组件的高级功能

4.1 动态添加和删除表单项

动态添加和删除表单项是 Form 组件的一个重要功能。通过 Form.Item 组件的 name 属性可以动态添加或删除表单项。

import React from 'react';
import { Form, Input, Button } from 'antd';

const App = () => {
  const [fields, setFields] = React.useState([{ key: 'field1' }]);

  const add = () => {
    setFields([...fields, { key: `${fields.length + 1}` }]);
  };

  const remove = (key) => {
    setFields(fields.filter(field => field.key !== key));
  };

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  const renderFields = (fields) => {
    return fields.map(({ key }) => (
      <Form.Item
        key={key}
        name={key}
        label={`字段 ${key}`}
        rules={[{ required: true, message: `请输入字段 ${key}` }]}
      >
        <Input />
        <Button type="primary" onClick={() => remove(key)}>删除</Button>
      </Form.Item>
    ));
  };

  return (
    <Form onFinish={onFinish}>
      {renderFields(fields)}
      <Form.Item>
        <Button type="primary" onClick={add}>添加字段</Button>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default App;

4.2 表单控制和状态管理

表单控件可以通过 Form.Item 组件的 name 属性进行状态管理。通过 Form.useForm 钩子，可以获取表单的值和修改值的方法。

import React from 'react';
import { Form, Input, Button } from 'antd';

const App = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  const resetForm = () => {
    form.resetFields();
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }]}>
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
      <Form.Item>
        <Button type="primary" onClick={resetForm}>重置表单</Button>
      </Form.Item>
    </Form>
  );
};

export default App;

4.3 表单数据的自动填充和预填充

表单数据的自动填充和预填充可以通过 Form.Item 组件的 initialValue 属性实现。这样可以在表单加载时预填充某些默认值。

import React from 'react';
import { Form, Input, Button } from 'antd';

const App = () => {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form onFinish={onFinish}>
      <Form.Item name="username" label="用户名" initialValue="默认用户名" rules={[{ required: true, message: '请输入用户名' }]}>
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default App;

5. Form组件的实际应用案例

5.1 注册表单的实现

注册表单通常包含多个字段，如用户名、密码、确认密码等，且需要进行复杂的校验。

import React from 'react';
import { Form, Input, Button } from 'antd';

const App = () => {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form onFinish={onFinish}>
      <Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }]}>
        <Input />
      </Form.Item>
      <Form.Item name="password" label="密码" rules={[{ required: true, message: '请输入密码' }]}>
        <Input.Password />
      </Form.Item>
      <Form.Item name="confirmPassword" label="确认密码" rules={[
        { required: true, message: '请输入确认密码' },
        { validator: (rule, value) => {
          if (!value || value === values.password) {
            return Promise.resolve();
          }
          return Promise.reject('两次输入的密码不一致');
        }}
      ]}>
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default App;

5.2 登录表单的实现

登录表单通常包含用户名和密码输入框，以及登录按钮。

import React from 'react';
import { Form, Input, Button } from 'antd';

const App = () => {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form onFinish={onFinish}>
      <Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }]}>
        <Input />
      </Form.Item>
      <Form.Item name="password" label="密码" rules={[{ required: true, message: '请输入密码' }]}>
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">登录</Button>
      </Form.Item>
    </Form>
  );
};

export default App;

5.3 复杂业务场景下的表单应用

在复杂的业务场景中，表单可能包含多个动态添加的表单项、复杂的校验规则等。例如，一个商品管理应用中的商品编辑表单可能包含多个字段，如商品名称、描述、价格、库存等，且需要进行详细的校验和状态管理。

import React from 'react';
import { Form, Input, Button, Select } from 'antd';

const App = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  const resetForm = () => {
    form.resetFields();
  };

  const add = () => {
    form.setFieldsValue({ ...form.getFieldsValue(), 'item': [] });
  };

  const remove = (key) => {
    form.setFieldsValue({ ...form.getFieldsValue(), 'item': form.getFieldValue('item').filter(field => field.key !== key) });
  };

  const renderFields = (fields) => {
    return fields.map(({ key }) => (
      <Form.Item
        key={key}
        name={`item.${key}`}
        label={`商品 ${key}`}
        rules={[{ required: true, message: `请输入商品 ${key}` }]}
      >
        <Input />
        <Button type="primary" onClick={() => remove(key)}>删除</Button>
      </Form.Item>
    ));
  };

  const initialFields = [{ key: 'item0' }];

  return (
    <Form form={form} onFinish={onFinish}>
      {renderFields(initialFields)}
      <Form.Item>
        <Button type="primary" onClick={add}>添加商品</Button>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
      <Form.Item>
        <Button type="primary" onClick={resetForm}>重置表单</Button>
      </Form.Item>
    </Form>
  );
};

export default App;

6. 常见问题与解决方法

6.1 常见错误和异常处理

在使用 Ant Design 的 Form 组件时，常见的错误包括表单校验失败、表单项未正确绑定等。为了更好地处理这些异常，可以在 onFinishFailed 回调函数中捕获这些异常并进行相应的处理。

import React from 'react';
import { Form, Input, Button } from 'antd';

const App = () => {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form onFinish={onFinish} onFinishFailed={onFinishFailed}>
      <Form.Item name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }]}>
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default App;

6.2 表单性能优化方法

在处理表单时，可以通过以下几种方法来优化性能：

减少状态更新：尽量减少不必要的状态更新，例如，可以在某些情况下缓存计算结果，避免频繁计算。
批量更新：使用 setFields 方法批量更新表单项，避免多次状态更新。
懒加载：在需要时动态加载表单项，而不是一开始就加载所有表单项。

6.3 表单调试技巧和工具推荐

在调试表单时，可以使用以下技巧和工具：

浏览器开发者工具：使用浏览器的开发者工具来监控网络请求和响应，帮助调试表单提交过程。
日志输出：在 onFinish 和 onFinishFailed 回调函数中输出日志，帮助调试表单校验逻辑。
断点调试：在代码中设置断点，逐步执行代码，跟踪变量的值。
单元测试：编写单元测试来验证表单的校验逻辑和提交逻辑是否正确。

同时，推荐使用 console.log 在关键位置输出调试信息，以帮助快速定位问题。另外，可以使用 Prettier 和 ESLint 等工具来提高代码的可读性和一致性。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

交互式爱情

手记
篇

粉丝

23

获赞与收藏

76

关注作者，订阅最新文章

阅读免费教程

JavaScript 入门教程

80个小节 312438 2198

设计模式入门教程

10个小节 21906 415

Dreamweaver 教程

25个小节 5062 102

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空