input输入框粘贴unicode零宽字符,前端踩坑和解决方案
在前端表单中,如果用户输入时是直接从其他地方如 excel 里复制的,就有可能包含这类看不见的零宽字符;据说从 iphone 手机的通讯录里复制的电话号码粘贴进excel中就有可能包含零宽字符。
当用户提交时,前端在控制台打印或者network里看提交的接口参数里也是看不到这类字符的
如果 input 输入框有限制最大输入长度 max-length,零宽字符也是会占用输入框的长度的。
另外输入框校验也会被影响。
如下图所示
前端解决办法
过滤零宽字符串
str.replace(/[\u200b-\u200f\uFEFF\u202a-\u202e]/g, "");
正则表达式 /[\u200b-\u200f\uFEFF\u202a-\u202e]/g
的解释如下:
[\u200b-\u200f\uFEFF\u202a-\u202e]
表示 Unicode 范围,表示可能存在的多余空白字符的 Unicode 范围。\u200b-\u200f
表示 Unicode 范围,表示可能存在的零宽空格(Zero-width space)的 Unicode 范围。\uFEFF
表示 Unicode 字符,表示 U+FEFF 字符,表示字节顺序标记(byte order mark)的 Unicode 字符。\u202a-\u202e
表示 Unicode 范围,表示可能存在的格式化片段标记(format variant)的 Unicode 范围。/g
表示全局搜索,表示正则表达式会搜索字符串中所有符合条件的子串。
对于校验类影响-可在校验前过滤零宽字符串
以今天碰到的 react16 + antd V2. 为例
这里可以使用 getFieldDecorator 里的 getValueFromEvent
或者 normalize
参数
——>> antd官网
<FormItem label="公司税号:">
{getFieldDecorator('dutyParagraph', {
initialValue: '',
normalize: (value) => {
value = value.replace(/[\u200b-\u200f\uFEFF\u202a-\u202e]/gi, '')
return value;
},
rules: [
{
required: headEditFlag == '1',
message: '请输入公司税号',
},
{
pattern: new RegExp(/^[A-Za-z0-9]+$/, 'i'),
message: '公司税号只能是数字和字母!'
},
{
min: headEditFlag == '1' ? 6 : 0,
message: "最少必须输入6个字符",
},
{
max: 20,
message: "最多可输入20个字符",
},
],
})(<Input placeholder='请输入公司税号' />)}
</FormItem>
<FormItem label="公司税号:">
{getFieldDecorator('dutyParagraph', {
initialValue: '',
getValueFromEvent: (e) => {
let value = e.target.value || '';
value = value.replace(/[\u200b-\u200f\uFEFF\u202a-\u202e]/gi, '')
return value;
},
rules: [
{
required: headEditFlag == '1',
message: '请输入公司税号',
},
{
pattern: new RegExp(/^[A-Za-z0-9]+$/, 'i'),
message: '公司税号只能是数字和字母!'
},
{
min: headEditFlag == '1' ? 6 : 0,
message: "最少必须输入6个字符",
},
{
max: 20,
message: "最多可输入20个字符",
},
],
})(<Input placeholder='请输入公司税号' />)}
</FormItem>
常见的几种零宽字符有:
- 零宽空格:U+200B
- 零宽连接符:U+200D,常见的复杂Emoji表情即用到了该字符,用于表示多字符关系从而合成复杂新字符
- 零宽非连接符:U+200C
- 零宽非断空格符:U+FEFF
- 左至右符:U+200E
- 右至左符:U+200F
- 蒙古文元音分隔符:U+180E
怎么能看见零宽字符?
直接复制到开发工具如 vscode 里,是可以直接看到这类字符的 unicode 码的。 如下所示
在 windows 记事本中-右键,选择 “显示 Unicode 控制字符”,也可以看到这类特殊符号。
navicat 中查看mysql中的数据,也可以像记事本一样右键选择“显示 Unicode 控制字符”,光标聚焦的时候也可以看到有特殊符号显示出来。
还有复制粘贴进网页、记事本、输入框中,移动光标的时候,也可以发现,这类字符也是需要靠光标移动的。 参考文档
转载自:https://juejin.cn/post/7314921235925565490