react 文本框警示

要求：1、字符串前后空格，自动删除前后空格并提交

            2、字符串内全是空格或输入框为空时，红字弹出提示

效果：

 

 

 代码：

 <ProFormText
        rules={[
          {
            required: true,
            message: '请输入标签名称',
          },
          { min: 2, message: '不少于2字符' },
          { max: 20, message: '不超过20字符' },
          { pattern: /\s\S+|S+\s|\S\s*$/, message: '请输入标签名称' },
        ]}
        label="标签名称"
        width="md"
        name="name"
        initialValue={Done ? `请输入标签名称` : tagname}
      />

全为空格： { pattern: /\s\S+|S+\s|\S\s*$/, message: '请输入标签名称' },

自动删除字符串首尾空格

//trim():删除字符开始和末尾的空格、换行符、制表符，若这些字符存在于字符串中间时会被保留

let name = ‘    写文章      ’

     name = name.trim();

2、后面使用中又发现一个新办法

3、第二种方法有一个缺陷：输入一个空格时，满足两个规则，会弹出两个提示，如图：

方案改进：自定义规则

4、input 规则自定义现在使用Promise，callback会出现报错

 rules={[
          {
            validator: async (rule, val) => {
              if (val.match(/^[ ]*$/)) {
                return Promise.reject('请输入标签名称');
              } else if (val.length > 30) {
                return Promise.reject('不超过30字符');
              }
            },
          },
        ]}