antdv 表单的输入项控制校验的两种方式

2023-12-28 14:22:19

前言

antdv 表单的 v-decorator 指令和 getFieldDecorator 方法都是用来对表单项进行校验的。这两者都是非常强大的工具，可以帮助您轻松地构建出各种复杂的表单。

但是，在使用这两个工具时，您可能会遇到以下几个问题：

无法实现表单项的动态校验。
无法监听表单项的 change 事件。
无法对表单项进行分组校验。

为了解决这些问题，本文将介绍两种控制 antdv 表单输入项校验的方式，分别是通过 a-form 组件自带的 v-decorator 指令和通过 getFieldDecorator 方法。在具体的应用场景中，您可以根据实际情况选择合适的校验方式。

通过 `a-form` 组件自带的 `v-decorator` 指令控制输入项校验

v-decorator 指令是 antdv 表单组件自带的一个指令，它可以用来对表单项进行校验。使用 v-decorator 指令可以非常方便地实现表单项的校验，以及 change 事件监听。

<a-form>
  <a-form-item label="用户名" required>
    <a-input v-decorator="['username', { rules: [{ required: true, message: '请输入用户名' }] }]"></a-input>
  </a-form-item>
  <a-form-item label="邮箱">
    <a-input v-decorator="['email', { rules: [{ type: 'email', message: '请输入正确的邮箱地址' }] }]"></a-input>
  </a-form-item>
  <a-button type="primary" @click="onSubmit">提交</a-button>
</a-form>

上面的代码中，我们使用 v-decorator 指令对 username 和 email 这两个表单项进行了校验。当用户提交表单时，如果 username 为空，则会提示 请输入用户名；如果 email 格式不正确，则会提示 请输入正确的邮箱地址。

通过 `getFieldDecorator` 方法控制输入项校验

getFieldDecorator 方法是 antdv 表单组件提供的一个方法，它也可以用来对表单项进行校验。使用 getFieldDecorator 方法可以实现更复杂的校验规则，还可以监听表单项的 change 事件。

import { Form, Input, Button } from 'antdv';
import { getFieldDecorator } from 'antdv/lib/form';

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      email: '',
    };
  }

  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 label="邮箱">
          {getFieldDecorator('email', {
            rules: [{ type: 'email', message: '请输入正确的邮箱地址' }],
          })(<Input />)}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">提交</Button>
        </Form.Item>
      </Form>
    );
  }
}

const WrappedMyForm = Form.create()(MyForm);