uni-app input判断只允许输入中文、数字，字母

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