# AntD中数据校验方式分类整理

一 概述

这篇文章主要整理了我在近期工作中，所使用Form表单组件，并进行数据校验的心得。整理出来了三种主要的校验需求，分类梳理了开发思路和方法，以及部分Form表单使用的注意事项。

这三种分类为：

• 数据联动
• 单一数据校验
• 多数据联动校验

二 数据联动

有时候我们表单中的某一个控件的值可能会在别的控件中使用，或者，我们需要对输入值格式化。
举个例子，加入我们需要做一个新增档案的功能，某种事物的编码的组合需要前缀一个建档日期：

<Input
  addonBefore={
   addonBeforeValue}
  placeholder='请输入编号'
  maxLength={
   30}
/>

addonBefore属性会在输入框前面加上一个灰色的提示区域，这部分的值由建档日期这个输入项提供。因此，我需要在输入建档日期的时候，拦截这个值。

在Form表单中，有一个getFieldDecorator方法来实现双向绑定，这个方法接受两个参数，第一个是表单数据的名称，第二个参数是一个option对象，这个对象存在一个getValueFromEvent属性，值为函数。这个方法可以拦截输入时onChange的事件对象，并最终return一个值用于组件输入值的更新。

<FormItem {
   ...formItemLayout} label='事件日期'>
  {
   getFieldDecorator('createFileDate', {
   
    initialValue: detail && detail.createFileDate ?
      moment(detail && detail.createFileDate) : undefined,
    rules: [
      {
    required: true, message: '请选择事件日期' }
    ],
    getValueFromEvent: (e) => this.formatCode(e)
  })(
    <DatePicker placeholder='请选择事件日期'
      showTime
      format={
   'YYYY-MM-DD'}
      onChange={
   (date, dateString) => console.log(date, dateString)}
      style={
   {
    width: '100%' }} />
  )}
</FormItem>

// 修改编号前置的日期
formatCode = (e) => {
   
  const {
    dispatch } = this.props;
  dispatch({
   
    type: `${
     nameSpace}/updateStore`,
    payload: {
    addonBeforeValue: moment(e).format('MMDD') }
  });
  return e;
}

使用这种方式，我们不必去手动监听onChange事件，既然使用了AntD，就应该多去使用封装好的方法。

注意事项：

（1） getValueFromEvent方法接收到的参数因组件不同而不同，现在我验证过的参数如下：

Input: e.target.value,         // Input组件会返回一个对象，获得具体值找target.value
Select, InputNumber: value,    // 这两个组件直接拿到值
DatePicker: Moment,            // DatePicker 返回一个Moment对象

（2）在return的时候，日期需要返回moment对象，其他的组件直接返回格式化的值即可，这个返回值就是下一步的