数据库与前端的字段长度差异

在一个网页中，[[前端]]与[[数据库]]都设置了相同的长度限制。

但在实际填写表单时，当我输入了大量回车符时，数据库往往会报错而前端不会拦截。

因此判断是字符超长导致的错误。

分析过程

研究了一下回车符在java前端和数据库各自所占的长度：

先确认数据库和页面的编码都是utf-8类型。

首先，我在viewNotice字段中输入“一二三四五六七八”这几个字符，此时在网页控制台里输入：

document.getElementsByName('viewNotice')[0].value.length

得到的值为8。

再进入数据库，输入以下查询语句

SELECT
	length( VIEW_NOTICE ) AS '字符串(字节)长度',
	CHARACTER_LENGTH( VIEW_NOTICE ) AS '字符长度' 
FROM
	`VR_LABORATORY_INFO` 
WHERE
	id = XXX

可以看到其字符长度也是8。

此时前端和数据库的字符长度都是一致的。

然后再往字符中加入一个回车，再重复执行上述两个命令，

得到的结果分别是9(前端)和10(数据库)。

结论

• 在前端中，一个回车符会被视为1个字符。
• 在数据库中，一个回车符占用了2个字符长度。
• 另外再记录一下数据库中的length()函数，这个函数计算的是字节长度。使用length()函数计算的结果：一个半角字符为1个字符，一个回车为2个字符，1个汉字为3个字符。

解决方案

由于前端和数据库对回车符的处理方式可能不同，导致字符长度计算出现偏差。为解决这个问题，我咨询了gpt，它给出了如下几种方案：

1. 前端预处理： 在前端，在将数据提交到数据库之前，对输入的文本进行预处理。使用JavaScript中的replace方法，将回车符转换为数据库中占用字符长度的等效字符（例如，将回车符\n替换为数据库中占用两个字符的空格等）。这样，在提交数据到数据库之前，就能确保字符长度计算一致。

2. 数据库存储： 考虑修改数据库字段的字符集为UTF-8，这样回车符只会占用一个字符的长度，与前端保持一致。你可以使用如下语句修改字段的字符集：

   ALTER TABLE your_table_name MODIFY your_column_name VARCHAR(255) CHARACTER SET utf8;
   

3. 限制输入： 在前端进行输入限制，不允许输入超过数据库字段长度的文本，包括回车符。这样可以确保用户输入的文本长度不会超过数据库字段的限制。

4. 显示逻辑： 考虑在前端或后端的显示逻辑中进行处理，将数据库中存储的换行符等特殊字符转换为实际的显示格式，以便在前端正确展示。

综合考虑你的应用场景和需求，可以选择一个或多个解决方案来解决回车符引起的字符长度计算问题。