JS Vue 禁止输入框输入特殊符号或emoji表情

禁止输入框输入特殊符号或emoji表情

// 判断是否含有特殊符号
let reg1 = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/im
// 判断是否含有emoji表情
let reg2 = /[\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/ig
// 如果为true，字符串含有emoji表情，false不含
console.log(reg2.test(info.personName))
// 如果为true，字符串含有特殊符号，false不含
console.log(reg1.test(info.personName))

使用：

onInput() {var reg = /[\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/igthis.input = this.input.replace(reg, '')
},

全局设置：

let findEle = (parent, type) => {return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)
}const trigger = (el, type) => {const e = document.createEvent('HTMLEvents')e.initEvent(type, true, true)el.dispatchEvent(e)
}const emoji = {bind: function (el, binding, vnode) {// 正则规则可根据需求自定义var regRule = /[\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/iglet $inp = findEle(el, 'input')el.$inp = $inp$inp.handle = function () {let val = $inp.value$inp.value = val.replace(regRule, '')trigger($inp, 'input')}$inp.addEventListener('keyup', $inp.handle)},unbind: function (el) {el.$inp.removeEventListener('keyup', el.$inp.handle)},
}export default emoji

使用：将需要校验的输入框加上 v-emoji 即可

<template><input type="text" v-model="text" v-emoji />
</template>

https://blog.csdn.net/rainbow8300/article/details/89848799
https://blog.csdn.net/qq_42004292/article/details/111355006

JS Vue 禁止输入框输入特殊符号或emoji表情相关推荐

js 正则表达式禁止输入框输入特殊字符遇到的坑以及解决方案
前言最近在项目中有一个需求是禁止输入特殊字符,一开始我是在网上找的正则表达式直接用的,后来发现这个表达式同时也禁止了v,x,y,z,所以后来就想了一个比较笨的方法,把所有的特殊字符全部罗列出来,然后 ...
mysql存储图片node_Node.js教程阿里云mysql如何支持存储emoji表情
本篇教程介绍了Node.js教程阿里云mysql如何支持存储emoji表情,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入. < 本篇主要记录nodejs项目阿里云m ...
特殊符号，emoji表情，四字节去除问题
最近遇到一个问题,公司的数据库是utf-8的字符集,而支持特殊符号,emoji表情,四字节等特殊符号的需要是utf-8mb4的字符集才可以,不然强行插入是会报错的,这时候就需要将获取到的包含特殊符号 ...
vue设置输入框输入长度_基于vue的限制输入框可输入字节数的解决方案
2018年07月11日基于vue的限制输入框可输入字节数的解决方案需求:input输入框输入上限4个字节.达到上限则不能继续输入,其中1个英文表示1个字节.1个中文表示2个字节. 看到这个需求,第 ...
解决js函数replace禁止输入框输入非法字符，光标回到文字最后问题(兼容ie、谷歌)
js代码: /*获取光标位置*/ function getCursorPos(obj) { var CaretPos = 0; // IE Support if (document.selection ...
vue设置输入框输入长度_Vue实现input宽度随文字长度自适应操作
业务需求,输入文字,后面的元要紧随其后,奈何input默认是有宽度,我想要达到,输入文字,动态改变input的宽度,试了很多方法,目前自己琢磨一种,有遇到问题的可以参考一下, 直接贴代码 type=& ...
vue设置输入框输入长度_vue输入框限制字符串长度和输入内容实时验证的实现方式...
一.最简单,通过maxlength和onkeyup ?:;'\\\$\%\^\&\*\-\|\[\]\{\}\{\}]/g,'');" /> 代码中正则是限制除中文外的 ...
禁止输入框输入空格 onkeyup
原生 <input type="text" onkeyup="this.value=this.value.replace(/\s+/g,'')">v ...
把用户输入的文本转义（主要针对特殊符号和emoji表情）
function userTextEncode($str){ if(!is_string($str))return $str;if(!$str || $str=='undefined')return ...

JS Vue 禁止输入框输入特殊符号或emoji表情

JS Vue 禁止输入框输入特殊符号或emoji表情相关推荐

最新文章

热门文章