vue 输入框限制中英文及数字

最新推荐文章于 2024-08-26 17:20:42 发布

原创最新推荐文章于 2024-08-26 17:20:42 发布 · 3.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #正则表达式

vue 专栏收录该内容

1 篇文章

订阅专栏

在Vue项目中，利用input事件配合正则表达式，可以有效地限制用户在输入框中只能输入中文、英文和数字，提高了用户体验。

vue 项目，通过 input 事件结合正则表达式实现输入框限制输入中英文及数字

<el-input
	v-model.trim="value"
	@input="inputLimit"
/>

//...
methods: {
	//...
	inputLimit(val) {
		// 正则匹配非中英文及数字的字符
		let reg = /[^\u4e00-\u9fa5a-zA-Z0-9]/;
		// 查找是否有非中英文及数字的字符
		// 没有则返回-1，有则返回对应位置
		let n = val.search(reg);
		if ( n !== -1 ) {
		    // 由于每次触发，通常只有最后一个字符是有可能异常的
		    // 所以这里是直接截取异常字符前面的部分
			this.value = val.slice(0, n);
		}
	}
}

//...