如何使用 js 过滤文本框表情符号

问题产生背景

在做某一后台管理项目时，由于发送请求时，若用户在文本框输入表情符号，提交的数据在插入数据库会报错，因此需要前后端对，用户输入的文本框的值进行校验；此篇文章只分享前端如何进行表单校验；
如下图所示：

解决办法

由于产品要求项目中的所有文本框都需要进行 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;
          }
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

以上函数接收一个文本框的值，若文本框有表情就返回 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>
1
2
3
4
5
6
7
8
9
10

至此便可以实现了前端文本框emoji 的校验~~

写在最后

以上提供的方法，便是解决校验文本框表情符号的方法，但是仍然存在部分表情不能校验的问题，如若有完全的表情校验方法，欢迎评论区留言交流；

🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞