问题产生背景
在做某一后台管理项目时,由于发送请求时,若用户在文本框输入表情符号,提交的数据在插入数据库会报错,因此需要前后端对,用户输入的文本框的值进行校验;此篇文章只分享前端如何进行表单校验;
如下图所示:
解决办法
由于产品要求项目中的所有文本框都需要进行 emoji 限制,因此我封装了一个工具函数,作为表单的自定义校验规则,封装的工具函数代码如下,大家可以直接使用:
// 判断文本中是否有表情
const isEmojiCharacter = (substring: any) => {
if(substring?.length > 0){
for ( var i = 0; i < substring.length; i++) {
var hs = substring.charCodeAt(i);
if (0xd800 <= hs && hs <= 0xdbff) {
if (substring.length > 1) {
var ls = substring.charCodeAt(i + 1);
var uc = ((hs - 0xd800) * 0x400) + (ls - 0xdc00) + 0x10000;
if (0x1d000 <= uc && uc <= 0x1f77f) {
return true;
}
}
} else if (substring.length > 1) {
var ls = substring.charCodeAt(i + 1);
if (ls == 0x20e3) {
return true;
}
} else {
if (0x2100 <= hs && hs <= 0x27ff) {
return true;
} else if (0x2B05 <= hs && hs <= 0x2b07) {
return true;
} else if (0x2934 <= hs && hs <= 0x2935) {
return true;
} else if (0x3297 <= hs && hs <= 0x3299) {
return true;
} else if (hs == 0xa9 || hs == 0xae || hs == 0x303d || hs == 0x3030
|| hs == 0x2b55 || hs == 0x2b1c || hs == 0x2b1b
|| hs == 0x2b50) {
return true;
}
}
}
}
}
以上函数接收一个文本框的值,若文本框有表情就返回 true , 在实际项目中我们可以根据 Form.Item 的 rules 属性自定义校验规则,代码如下:
<Form.Item rules={[{
validator: (_, value) => {
const isEmoji = isEmojiCharacter(value)
console.log('12123' , isEmoji)
return !isEmoji ? Promise.resolve() : Promise.reject(new Error('不允许输入表情符号'))
},
validateTrigger: 'onChange'
}]} label="接口名称" style={{ marginLeft: 20 }} name="interName">
<Input allowClear placeholder="请输入接口名称" />
</Form.Item>
至此便可以实现了前端文本框emoji 的校验~~
写在最后
以上提供的方法,便是解决校验文本框表情符号的方法,但是仍然存在部分表情不能校验的问题,如若有完全的表情校验方法,欢迎评论区留言交流;
🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞