表单提交换行文本的问题

作者:frank 发表日期:2018-03-28 21:08:43 更新日期:2018-03-28 21:11:55 分类:猿文色

摘要

表单提交换行文本的问题

正文

测试同学在测试一个 textarea 文本框时, 遇到了一个问题. 我们的文本框限制最大字符 maxlenght 为 500, 测试同学在输入了 500 个字符后, 其中包换一些换行符, 提交到后台, 后台提示字符超长.


看了后台日志, 发现是换行符的格式化出现了问题. 当时前端提交的字符是 'aaa\naaa\naaa\n...' 传到后台却成了 'aaa\r\naaa\r\naaa\r\n...', 也就是说所有的 '\n' 被替换成了 '\r\n'. 


随之查看了 NGINX 日志, 发现 NGINX 打印的结果也是 '...\r\n...'.


之后使用了编辑接口 (put) 提交数据, 发现编辑的时候提交的数据是正确的. 最后怀疑因为新建时要上传文件, 所以使用的是 form 表单提交的方式, 应该是 form 表单搞的鬼.


随后搜索到了 [html-spec] 中的解释: 

​---------------------------

The form-urlencoded Media Type

The default encoding for all forms is 'application/x-www-form-urlencoded'. A form data set is represented in this media type as follows: 

The form field names and values are escaped: space characters are replaced by '+', and then reserved characters are escaped as per [URL]; that is, non-alphanumeric characters are replaced by '%HH', a percent sign and two hexadecimal digits representing the ASCII code of the character. Line breaks, as in multi-line text field values, are represented as CR LF pairs, i.e. '%0D%0A'.

The fields are listed in the order they appear in the document with the name separated from the value by '=' and the pairs separated from each other by '&'. Fields with null values may be omitted. In particular, unselected radio buttons and checkboxes should not appear in the encoded data, but hidden fields with VALUE attributes present should. (26)

​---------------------------


即在 form 表单提交中, 多行文本中的换行符会被替换为 CR LF, 而 

\r = CR (Carriage Return) Linux 换行符 

\n = LF (Line Feed) MacOS 换行符

\r\n = CR + LF Windows 换行符


解决方案也很简单, 前端处理一下换行符就可以了.