Antd文本框TextArea复制粘贴正确的文本却触发校验

Nyingchi-X

于 2025-01-13 09:30:00 发布

阅读量224

点赞数 2

分类专栏：前端问题及案例文章标签： antd

本文链接：https://blog.youkuaiyun.com/qq_48617322/article/details/145093566

版权

前端问题及案例专栏收录该内容

17 篇文章

订阅专栏

今天遇到个神奇的现象，Antd文本框，正常输入正确的文本没啥问题，但是当我从别处复制粘贴过来一段文本的时候就有问题了

在这里插入图片描述
原代码：

       <Form
          name="tmall-page"
          form={form}
          labelWrap
          autoComplete="off"
          labelCol={{ flex: '90px', offset: 0 }}
          scrollToFirstError>
          <div className="modal-form-container">
            <Form.Item
              name="tmallOrderNos"
              rules={[
                {
                  required: true,
                  message: '请输入订单号',
                },
                {
                  pattern: /^[(\r\n)(\r)(\n)A-Za-z0-9._;,-]+$/,
                  message: '只支持英文数字横杠下划线',
                },
              ]}>
              <Input.TextArea
                rows={6}
                placeholder="多个订单号请用英文逗号或换行隔开。示例：123456789,987654321"></Input.TextArea>
            </Form.Item>
          </div>
        </Form>

出现问题的原因：复制的时候，可能把零宽字符也复制上了
在这里插入图片描述
解决方法：正则加上\u200C

修复后代码：

       <Form
          name="tmall-page"
          form={form}
          labelWrap
          autoComplete="off"
          labelCol={{ flex: '90px', offset: 0 }}
          scrollToFirstError>
          <div className="modal-form-container">
            <Form.Item
              name="tmallOrderNos"
              rules={[
                {
                  required: true,
                  message: '请输入订单号',
                },
                {
                  pattern: /^[\u200C(\r\n)(\r)(\n)A-Za-z0-9._;,-]+$/,
                  message: '支持英文数字横杠下划线',
                },
              ]}>
              <Input.TextArea
                rows={6}
                placeholder="多个订单号请用英文逗号或换行隔开。示例：123456789,987654321"></Input.TextArea>
            </Form.Item>
          </div>
        </Form>

在这里插入图片描述