uniapp开发微信小程序input框限制输入

input框输入手机号的约束

<input  @input="onlyNum" class="inp" v-model="phone" name="phone" type="number" maxlength="11" placeholder="请输入您的联系电话"  placeholder-class="pl-style" @blur="replaceInput" />
onlyNum(){
    if(!(event.keyCode==46)&&!(event.keyCode==8)&&!(event.keyCode==37)&&!(event.keyCode==39))
    if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
    event.returnValue=false;  //执行至该语句时,阻止输入;可类比阻止冒泡原理或者禁止右键功能;
},
replaceInput(event){
	var phone = event.target.value;
	let regs = /^1[3|4|5|7|8][0-9]{9}$/;
	if(!regs.test(phone)){ 
		this.$tools.toast('填入的电话号码有误,请重填');
		this.phone = null;
		return false; 
	} 
}

input框对于输入特殊字符的约束

<input class="inp" v-model="toBaADistributor.trueName" name="trueName" placeholder="请输入您的姓名" @input="replaceInput" placeholder-class="pl-style" />
// 当姓名输入框为数字或符号时,替换为没有非法字符的
replaceInput(event){
	this._timer=setTimeout(()=>{
		clearTimeout(this._timer)
		var value = event.target.value;
		//匹配数字的正则表达式
		var patt = /.*[0-9]{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.toBaADistributor.trueName = _str;
	},1)
},
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
回答: 在微信小程序中,可以使用以下代码来创建一个输入邮箱的input: ``` <input class='int' name="email" bindchange="inputemail"></input> ``` 其中,`class='int'`用于设置输入框的样式,`name="email"`用于标识该输入框的名称,`bindchange="inputemail"`用于绑定输入框的change事件,当输入框的值发生改变时,会触发`inputemail`函数。你可以在该函数中处理输入的邮箱地址。 #### 引用[.reference_title] - *1* [uniapp开发微信小程序input限制输入](https://blog.csdn.net/mmwanwen/article/details/108341246)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [微信小程序 --- 表单输入验证(手机号、邮箱验证、输入非空)](https://blog.csdn.net/Thea12138/article/details/80507133)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [微信小程序登录功能实现](https://blog.csdn.net/aliyun3/article/details/124265817)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值