微信小程序JS校验Input输入框为非emoji表情

最近小程序支付的时候遇到了一个bug 原因大概就是用户的名称中含有emoji表情,导致后端接口掉不起来 。于是就加了需求在输入姓名时不允许输入表情符号。

刚开始想的是在Input输入框的bindInput方法中使用正则校验每次输入的值(正则具体规则就不说了,给大家放在下面),如果为true则直接return,不进行赋值操作,若为false则继续正常赋值


这样子逻辑上是没什么问题,但是小程序大家都知道,坑太多了


虽然是按照我们预计流程中进行了提示并且没有进行赋值操作,这时候打印我们所赋值的变量是为空的,但是输入框中却显示了我们所输入的符号,这样我们的产品大大肯定是不同意的,想了想可以这样解决,上面的代码不变,我们首先在bingInput方法中获取到已经输入的绑定对象的值,这时候对正在输入的值进行正则校验,如果该输入的值为emoji表情,则把我们开头拿到的值setData进行重新赋值,这样就我们在输入框里的数据就是输入表情之前的数据了,就解决了输入框中没有进行赋值却显示表情的问题。

不过唯一美中不足的就是输入框进行了重新赋值会闪烁一下,不过这并无大碍,对我们产品大大来说也是可以接受的!

好了 今天的分享就到此结束了 大家如果有什么别的好的方法也可以评论探讨一下

正则:

/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容