react form 正则表达式前后不能以空格结尾

下面是使用 react 3.* 版本实现一个在新建文件夹时针对文件夹名称的一个form表单的验证

1. 针对不同的验证规则显示不同的message

2. rule1: 表示不能什么都不输入， 即该字段为必须字段

  {
   		required: true,
      	message: 'Can\'t not input empty file name!',
  }

3. rule2: 表示不能以空格开始或结束

 {
 		pattern: new RegExp(/^(?!\s)(?!.*\s$)/),
     	message: 'A file name can\'t contain space before or after!',
 }

4. rule3: 表示不能输入 /\:\*?"<>| 特殊符号

 {
 		pattern: new RegExp(/^((?![\\\/:\*\?\"<>\|]).)*$/),
     	message: 'A file name can\'t contain any of the following characters: \\\/:*?"<>|',
 }

4. rule4: 自定义验证函数， 这里表示对输入内容去除空格后如果为空， 则显示错误信息’Invalid folder name’, 否则则直接callback出去。这里记得使用自定义校验函数一定要callback出去， 不管正确还是错误， 否则表单会一直处于校验状态。

{ validator: this.validateFolderName }

// 自定义验证函数
validateFolderName = (rule, value, callback) => {
      if (value) {
          const folderName = value.replace((/\s/g), '');
          if (folderName) {
              callback();
          } else {
              callback('Invalid folder name');
          }
      } else {
          callback();
      }
  };

5. 下面是完整的form表单实现

<Form>
  <Form.Item
    label="New FODE folder name"
  >
      {getFieldDecorator('newFodeFolderName', {
          rules: [
              {
                  required: true,
                  message: 'Can\'t not input empty file name!',
              },
              {
                  pattern: new RegExp(/^(?!\s)(?!.*\s$)/),
                  message: 'A file name can\'t contain space before or after!',
              },
              {
                  pattern: new RegExp(/^((?![\\\/:\*\?\"<>\|]).)*$/),
                  message: 'A file name can\'t contain any of the following characters: \\\/:*?"<>|',
              },
              { validator: this.validateFolderName }],
      })(<Input />)}
  </Form.Item>
</Form>