首页手记 AntDesign-Form-rules学习：初学者指南

AntDesign-Form-rules学习：初学者指南

标签：

前端工具 React.JS Vue.js

概述

本文主要介绍了如何使用AntDesign-Form-rules学习，包括表单组件的安装、基本使用方法以及配置表单规则等。通过详细示例展示了如何添加表单项、配置必填校验和自定义校验函数。此外，还讲解了如何处理表单提交与校验结果。

引入Ant Design Form组件

Ant Design Form组件简介

Ant Design Form 组件是Ant Design框架中用于创建表单的核心组件。通过使用 Ant Design 的 Form 组件，你可以轻松地创建和管理复杂的表单结构。Ant Design Form 组件不仅提供了强大的表单校验功能，还支持多种表单控件，如输入框、选择框等，极大地方便了开发者进行表单的设计与实现。

Ant Design 是一个由阿里开源的基于 React 的 UI 组件库，它不仅提供了丰富的组件，还拥有良好的设计规范和用户体验。Form 组件在 Ant Design 中占据着重要的位置，用于处理表单的创建、提交和校验等操作。

安装与引入

在使用 Ant Design 的 Form 组件之前，需要先安装 Ant Design。可以通过 npm 或 yarn 来安装。

使用 npm 安装 Ant Design：
```
npm install antd
```
使用 yarn 安装 Ant Design：
```
yarn add antd
```

安装完成后，可以在 React 项目中引入 Form 组件。通常情况下，引入整个 antd 库是足够的，但如果你只想引入 Form 组件，可以使用内联模块导入的方式。

// 引入整个 antd 库
import Antd from 'antd';

// 获取 Form 组件
const { Form } = Antd;

// 使用 Form 组件
<Form />

或者直接从 antd 中导入特定的组件：

import { Form } from 'antd';

这两种方式都可以成功引入 Form 组件，选择哪种方式取决于你的具体需求和项目结构。

基本使用方法

创建表单

首先，你需要创建一个表单。通过使用 Form.create 方法或 useForm 钩子来创建一个表单实例。这些方法会返回一个表单实例，该实例包含了表单数据和校验等方法。

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

class DemoForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

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

export default Form.create()(DemoForm);

在这个例子中，我们首先通过 Form.create 方法创建了一个表单实例，并将其嵌套在 DemoForm 组件中。然后，我们定义了 handleSubmit 方法来处理表单提交事件。

添加表单项

表单项通常是通过 Form.Item 组件来实现的。Form.Item 组件可以包裹任何表单控件，并提供自动的布局和校验功能。getFieldDecorator 方法用于将表单控件与表单实例关联起来，从而实现表单项的校验和数据绑定。

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

class DemoForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

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

export default Form.create()(DemoForm);

在这个例子中，我们通过 Form.create 方法创建了表单实例，并使用 getFieldDecorator 方法将 Input 控件与表单实例关联起来。这样在表单提交时，Input 控件的值会自动进行校验。

配置表单规则

必填校验

必填校验是最基本的表单校验之一，可以确保用户在提交表单之前填写了所有必填字段。在定义表单项时，可以通过 rules 参数来指定校验规则。

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

class DemoForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

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

export default Form.create()(DemoForm);

上述代码中，getFieldDecorator 的 rules 参数中配置了 required: true，表示该字段是必填项。如果用户未填写该字段，则会触发校验提示信息。

指定校验规则

除了必填校验外，还可以指定其他类型的校验规则，如最小长度、最大长度、正则表达式等。下面的示例展示了如何使用不同的校验规则：

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

class DemoForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <Form onSubmit={this.handleSubmit}>
        <Form.Item label="用户名" hasFeedback>
          {getFieldDecorator('username', {
            rules: [
              { required: true, message: '请输入用户名' },
              { min: 4, message: '用户名至少为4个字符' },
              { max: 16, message: '用户名最多为16个字符' },
              { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线' },
            ],
          })(<Input />)}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

export default Form.create()(DemoForm);

在上述示例中，我们为 username 字段定义了多个校验规则：required 表示必填，min 和 max 分别定义了最小和最大长度，pattern 使用正则表达式限制用户名只能包含字母、数字和下划线。

自定义校验函数

除了内置的校验规则，还可以通过自定义校验函数来实现更复杂的校验逻辑。自定义校验函数接受一个参数 rule，并返回一个 Promise，用于异步处理校验结果。

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

class DemoForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  validateUsername = (rule, value) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (value && value.length < 4) {
          reject('用户名长度至少为4个字符');
        } else {
          resolve();
        }
      }, 1000);
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <Form onSubmit={this.handleSubmit}>
        <Form.Item label="用户名" hasFeedback>
          {getFieldDecorator('username', {
            rules: [
              { required: true, message: '请输入用户名' },
              { validator: this.validateUsername },
            ],
          })(<Input />)}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

export default Form.create()(DemoForm);

在上述示例中，我们定义了一个 validateUsername 自定义校验函数，并将其作为 rules 参数中的 validator 属性传入。该函数会异步地检查用户名的长度是否满足条件，如果不满足会在1秒后触发校验失败提示。

表单提交与校验

表单提交的方法

在表单提交时，通常需要调用 Form 组件的 validateFields 方法来校验表单数据。validateFields 方法会触发所有表单项的校验，并返回一个 Promise，根据校验结果决定是否继续处理。

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

class DemoForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

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

export default Form.create()(DemoForm);

在上述示例中，handleSubmit 方法在表单提交时被调用。该方法通过 this.props.form.validateFields 校验表单数据，并在表单数据通过校验后输出这些数据。

自动校验与手动校验

除了在表单提交时进行校验，还可以手动调用 validateFields 方法来校验表单项，或者使用 validateField 方法校验指定表单项。

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

class DemoForm extends React.Component {
  handleSubmit = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  validateUsername = () => {
    this.props.form.validateFields(['username'], (err, values) => {
      if (!err) {
        console.log('Username is valid:', values.username);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <Form>
        <Form.Item label="用户名" hasFeedback>
          {getFieldDecorator('username', {
            rules: [{ required: true, message: '请输入用户名' }],
          })(<Input />)}
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={this.handleSubmit}>
            提交
          </Button>
          <Button type="primary" onClick={this.validateUsername}>
            验证用户名
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

export default Form.create()(DemoForm);

在上述示例中，我们定义了 handleSubmit 和 validateUsername 两个方法。handleSubmit 方法在表单提交时被调用，用于校验整个表单数据；而 validateUsername 方法用于校验指定的 username 表单项。

校验结果处理

获取校验结果

在表单提交或手动校验时，validateFields 方法会返回一个 Promise，该 Promise 的结果表示表单项的校验结果。如果表单项通过校验，则 err 参数为 null，values 参数包含了表单项的值；如果表单项未通过校验，则 err 参数包含了校验错误信息。

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

class DemoForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      } else {
        console.error('Validation failed:', err);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

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

export default Form.create()(DemoForm);

在上述示例中，handleSubmit 方法会在表单提交时调用 validateFields 方法进行校验。如果表单项通过校验，则输出表单项的值；如果表单项未通过校验，则输出校验错误信息。

更新表单状态

当表单项校验未通过时，可以通过调用 setFields 方法来更新表单项的状态。例如，可以将未通过校验的表单项的错误信息设置为某个特定值，从而方便地处理表单项的校验状态。

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

class DemoForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      } else {
        const errorFields = err;
        const targetField = 'username';

        this.props.form.setFields({
          [targetField]: {
            value: this.props.form.getFieldValue(targetField),
            errors: [errorFields[targetField][0]],
          },
        });
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;

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

export default Form.create()(DemoForm);

在上述示例中，如果表单项未通过校验，我们使用 setFields 方法将未通过校验的表单项的错误信息设置为 errorFields 中对应的错误信息。这样方便地更新了表单项的状态。

常见问题及解决方法

常见问题汇总

在使用 Ant Design Form 组件时，一些常见的问题包括：

表单项未通过校验时显示错误信息：最常见的问题是表单项未通过校验时，错误信息未显示在表单项上。
表单项值未正确绑定：校验未通过时，表单项的值未正确绑定到表单实例中。
自定义校验函数未生效：自定义校验函数未按预期执行，导致表单项未通过校验。
表单提交未触发：表单提交时，validateFields 方法未被正确调用。

解决方案

显示错误信息：确保在 getFieldDecorator 中使用正确的 rules 参数，并且 hasFeedback 属性设置为 true。这样在表单项未通过校验时会显示错误信息。

import { Form, Input } from 'antd';

class DemoForm extends React.Component {
 handleSubmit = (e) => {
   e.preventDefault();

   this.props.form.validateFields((err, values) => {
     if (!err) {
       console.log('Received values of form: ', values);
     } else {
       console.error('Validation failed:', err);
     }
   });
 };

 render() {
   const { getFieldDecorator } = this.props.form;

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

export default Form.create()(DemoForm);

绑定表单项值：确保 getFieldDecorator 的 valuePropName 和 getValueFromEvent 参数设置正确，以便正确绑定表单项的值。

import { Form, Input } from 'antd';

class DemoForm extends React.Component {
 handleSubmit = (e) => {
   e.preventDefault();

   this.props.form.validateFields((err, values) => {
     if (!err) {
       console.log('Received values of form: ', values);
     } else {
       console.error('Validation failed:', err);
     }
   });
 };

 render() {
   const { getFieldDecorator } = this.props.form;

   return (
     <Form onSubmit={this.handleSubmit}>
       <Form.Item label="用户名" hasFeedback>
         {getFieldDecorator('username', {
           rules: [{ required: true, message: '请输入用户名' }],
           valuePropName: 'value',
           getValueFromEvent: (e) => e.target.value,
         })(<Input />)}
       </Form.Item>
       <Form.Item>
         <Button type="primary" htmlType="submit">
           提交
         </Button>
       </Form.Item>
     </Form>
   );
 }
}

export default Form.create()(DemoForm);

自定义校验函数：确保自定义校验函数返回一个 Promise，并且处理好异步校验的逻辑。

import { Form, Input } from 'antd';

class DemoForm extends React.Component {
 handleSubmit = (e) => {
   e.preventDefault();

   this.props.form.validateFields((err, values) => {
     if (!err) {
       console.log('Received values of form: ', values);
     } else {
       console.error('Validation failed:', err);
     }
   });
 };

 validateUsername = (rule, value) => {
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       if (value && value.length < 4) {
         reject('用户名长度至少为4个字符');
       } else {
         resolve();
       }
     }, 1000);
   });
 };

 render() {
   const { getFieldDecorator } = this.props.form;

   return (
     <Form onSubmit={this.handleSubmit}>
       <Form.Item label="用户名" hasFeedback>
         {getFieldDecorator('username', {
           rules: [
             { required: true, message: '请输入用户名' },
             { validator: this.validateUsername },
           ],
         })(<Input />)}
       </Form.Item>
       <Form.Item>
         <Button type="primary" htmlType="submit">
           提交
         </Button>
       </Form.Item>
     </Form>
   );
 }
}

export default Form.create()(DemoForm);

表单提交：确保 validateFields 方法在表单提交时被正确调用。可以在 onSubmit 事件处理器中调用 validateFields 方法。

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

class DemoForm extends React.Component {
 handleSubmit = (e) => {
   e.preventDefault();

   this.props.form.validateFields((err, values) => {
     if (!err) {
       console.log('Received values of form: ', values);
     } else {
       console.error('Validation failed:', err);
     }
   });
 };

 render() {
   const { getFieldDecorator } = this.props.form;

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

export default Form.create()(DemoForm);

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

Qyouu

手记
篇

粉丝

88

获赞与收藏

414

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30936 346

网络编程入门教程

20个小节 12729 240

Pandas 入门教程

25个小节 18626 342

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空