[JavaScript知识库]EditableProTable 正则校验

项目开发中，antd为我们提供了好多组件，很大方便了项目开发，其中可编辑Table就可以很好的让我们对列表数据轻松处理。但在对Table数据进行编辑处理的时候，如果根据选择信息对后面的输入框的输入数据添加正则校验就相对比较麻烦了。下面我贴出我的处理。

项目开发遇到的问题

图中可编辑Table表格是双层嵌套的，且接口返回数据是脱敏后展示的如上图。在添加时我们需要明文展示，要根据用户选择的证件类型与相对应添加的证件号码及联系电话添加正则校验。并且在编辑当前某条数据时只针对当前有编辑的输入框进行正则校验。

解决方案

1、定义需要的正则列表

// 证件类型正则
export const CERTIFICATE_TYPE_REG = {
  '15': /^810000\w+$/, // 港澳台居民居住证（香港）
  '16': /^820000\w+$/, // 港澳台居民居住证（澳门）
  '17': /^830000\w+$/, // 台湾居民居住证
  '01': /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/, // 身份证限制为18位数字或17位数字+X；
};
// 证件类型正则（全。包含个人和单位）
export const CERTIFICATE_TYPE_REG_ALL = {
  '08': /(^(?:(?![IOZSV])[dA-Z]){2}d{6}(?:(?![IOZSV])[dA-Z]){10}$)|(^d{15}$)/, // 营业执照副本
  '01': CERTIFICATE_TYPE_REG['01'], // 身份证
  '02': /^[\u4E00-\u9FA5](字第)([0-9a-zA-Z]{4,8})(号?)$/, // 军官证
  '03': /^[a-zA-Z0-9]{3,21}$/, // 护照
  '04': /^[A-Z]{3}\d{6}(?:0[1-9]|1[021])(?:0[1-9]|[21]\d|3[10])\d{2}$/, // 外国人永久居住证
  '05': /^[HM]\d{10}$/, // 港澳居民来往内地通行证
  '06': /^\d{8}|^[a-zA-Z0-9]{10}|^\d{18}$/, // 台湾居民来往大陆通行证
  '15': CERTIFICATE_TYPE_REG['15'], // 港澳台居民居住证(香港)
  '16': CERTIFICATE_TYPE_REG['16'], // 港澳台居民居住证(澳门)
  '17': CERTIFICATE_TYPE_REG['17'], // 台湾居民居住证
  '99': null, // 其他
};

2、columns[]中定义展列表

   {
        title: '证件类型',
        dataIndex: 'zjlx',
        valueType: 'select',
        fieldProps: {
          options: zjlxAll,
        },
        formItemProps: {
          rules: [
            {
              required: true,
              message: '请选择证件类型',
            },
          ],
        },
      },
      {
        title: '证件号码',
        dataIndex: 'zjhmfy',
        ...
      },
      {
        title: '联系电话',
        dataIndex: 'lxdhfy',
        ...
      },

3、以联系电话为例：判断某一行的当前列是否被编辑

isRequired 如果为true，说明被编辑了，如果为false,则没有被编辑

const isRequired =
            owners.length <= config.rowIndex
              ? true
              : form.getFieldValue(config.rowKey)?.lxdhfy &&
                form.getFieldValue(config.rowKey)?.lxdhfy != owners[config.rowIndex].lxdhfy;

4、联系电话判断是否需要正则校验完整案例如下

      {
        title: '联系电话',
        dataIndex: 'lxdhfy',
        formItemProps: (form, config) => {
          const isRequired =
            owners.length <= config.rowIndex
              ? true
              : form.getFieldValue(config.rowKey)?.lxdhfy &&
                form.getFieldValue(config.rowKey)?.lxdhfy != owners[config.rowIndex].lxdhfy;
          if (!isRequired) {
            return { rules: [{ required: true, message: '请输入证件号码' }] };
          } else {
            return {
              rules: [
                {
                  required: true,
                  message: '请输入联系电话',
                  pattern: phoneNumberReg,
                },
              ],
            };
          }
        },
      },

5、证件号码添加校验时需要首先获取证件类型

证件号码列获取当前行的证件类型如下：

form.getFieldValue(config.rowKey)?.zjlx

其他和联系电话的处理一致，代码如下：

      {
        title: '证件号码',
        dataIndex: 'zjhmfy',
        formItemProps: (form, config) => {
          const isRequired =
            owners.length <= config.rowIndex
              ? true
              : form.getFieldValue(config.rowKey)?.zjhmfy &&
                form.getFieldValue(config.rowKey)?.zjhmfy != owners[config.rowIndex]?.zjhmfy;
          if (!isRequired) {
            return { rules: [{ required: true, message: '请输入证件号码' }] };
          } else
            return {
              rules: [
                { required: true, message: '请输入证件号码' },
                {
                  pattern:
                    CERTIFICATE_TYPE_REG_ALL[form.getFieldValue(config.rowKey)?.zjlx] || /[\s\S]*/,
                  message: '证件号有误',
                },
              ],
            };
        },
      },

总结：该处理主要是获取当前列的数据与用户触摸时获取的数据是否一致，如果是一致，则默认用户没有做处理，从而不进行校验。如果不一致，则增加了不同类型的正则校验。