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

235 阅读1分钟

今天遇到个神奇的现象,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>

在这里插入图片描述