Hell,本文主要阐述如何在input框上做输入信息限制,因为在移动开发中,很常见会遇见这样的功能:比如,输入手机号(只能数字),输入银行卡名称(限制中文)等,那么我们就需要进行一个处理。
两步操作实现:(只能输入中文)
一:Html代码
<view class="input-group">
<view class="input-row">
<text class="title" style="width: 119px;">银行卡名称:</text>
<input class="addre_input" type="text" focus clearable v-model="yhkName" placeholder="银行卡主名称" @input="onKeyYHKNameInput"></input>
</view>
</view>
二:JS代码
onKeyYHKNameInput: function(event){
this._timer = setTimeout(()=>{
clearTimeout(this._timer)
var value = event.target.value;
//匹配数字的正则表达式
var patt = /.*[0-9,a-z,A-Z]{1,}.*/i;
//匹配特殊字符的正则表达式
var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~!@#¥……&*()——|{}【】‘;:”“'。,、?]");
let _str=""
for(let i=0,len=value.length;i<len;i++){
_str+=value[i].replace(pattern,'').replace(patt,'')
}
this.yhkName = _str;
},3)
},
分析:var patt = /.[0-9,a-z,A-Z]{1,}./i;
解:此段代码主要描述限制0-9的数字,小写a-z,大写A-Z,根据需要而定,如果其中某项不需要作为限制,就移除就行。
分析:var pattern = new RegExp("[`!@#$^&*()=|{}’:;’,\[\].<>/?!@#¥……&*()——|{}【】‘;:”“’。,、?]");
解:此段代码主要是限制特殊符号,想怎么加都可以的。
改:
uniapp在输入的时候监听input数值与定时器打印的有所延时,因此,这个坑不妨可修改为:
异步更新:
onKeyYHKNameInput: function(event){
var value = event.detail.value;
if(!value || value == " "){
return '';
}
//匹配汉字的正则表达式
const rule = /[^\u4E00-\u9FA5]/g;//如果你们需要字母或者数字,就改这儿!
this.$nextTick(function () {
this.yhkName = value.replace(rule,'');
})
}
这样就不会出现上面有时候监听不到的情况,亲自苹果测试,无延时…
终结:
此文章描述很简单的,就如此几步,希望能够帮助到更多爱学习的IT者,谢谢您的阅读,下期…bay