vue限制input框输入特殊字符和汉字
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
vue限制input框输入特殊字符和汉字
问题描述:
在设计vue输入框时,限制input框输入特殊字符和汉字。 一开始参考此博客:https://blog.csdn.net/ks8380/article/details/96478522 进行特殊字符的限制, 代码如下: <el-form-item label="VIN" prop="vin" label-width="80px">
<el-input
v-model="queryParams.vin"
placeholder="请输入VIN"
clearable
@keyup.native="btKeyUp"
@keydown.native="btKeyDown"
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
// methods内
// 只能输入汉字、英文、数字
btKeyDown(e) {
e.target.value = e.target.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,"");
},
//限制输入特殊字符
btKeyUp(e) {
e.target.value = e.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/g,"");
}
此方法可以实现对特殊字符的限制,但当微软自带输入法输入中文时却会自动识别字母,此字母搜索框并未获取且无法正常搜索(词汇匮乏,不知描述的是否准确,总之就是输入中文搜索时还是存在问题)。
解决方案:
最后用以下代码解决问题(代码包含特殊字符限制与中文限制,可根据需要自行取舍):
<el-form-item label="VIN" prop="vin" label-width="80px">
<el-input
v-model="queryParams.vin"
placeholder="请输入VIN"
clearable
@keyup.native="btKeyUp"
size="small"
/>
</el-form-item>
// methods内
//限制输入特殊字符和中文
btKeyUp() {
// 不允许输入中文
this.queryParams.vin= this.queryParams.vin.replace(/[\u4e00-\u9fa5]/ig,'')
// 不允许输入特殊符号
this.queryParams.vin= this.queryParams.vin.replace(/[^\w\u4E00-\u9FA5]/g, '')
},
新手上路,如有不足之处还请各位大佬多多指教
此博客参考:https://blog.csdn.net/Yugoup/article/details/95975737
https://blog.csdn.net/ks8380/article/details/96478522
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)