uni微信小程序input框过滤中文字节以及规定以外的符号

T31659193322024-06-04 19:46

问题描述

需求是输入账号只能为手机号、邮箱、字母和数字组成的字符串，那么就是所有大小写字母、数字、以及符号 - _ @ . 四种。

条件限制

微信小程序无法直接通过type属性实现，type属性中没有专门为只允许英文字母的输入类型。详情见input | uni-app官网

微信小程序不支持直接操作dom，因为他没有传统意义上的DOM。

问题分析

使用正则过滤数据，但是如果是使用的动态绑定的话，直接把过滤后的值赋给input框动态绑定的值输入框还是可以出现中文。会出现我开始输入中文然后input框可以看见，然后输入英文，中文被删除了如下。

错误代码

HTML

html 复制代码

<input class="item_left account" placeholder="官方账号" :value="accountValue" maxlength=20  @input="inputAccount">

javascript 复制代码

<script>
	export default {
		data() {
			return {
				accountValue: '', //账号输入框
			}
		},
		methods: {
			// 输入账号
			inputAccount(e) {
				this.accountValue = e.detail.value.replace(/[^a-zA-Z0-9\-@_.]/g, '');
			},
		}
	}
</script>

解决方法

使用 @input 事件处理函数并从该函数中返回一个值。在微信小程序中，input 组件的 input 事件处理函数可以返回一个值，这个返回值将直接影响输入框的当前值。如果你在事件处理函数中返回一个经过处理（如过滤操作）的字符串，那么输入框的显示将被更新为这个返回的字符串。

如果不返回值会怎么样？

如果你的事件处理函数不返回任何值，或者返回的是 undefined，那么输入框的内容将不会被强制更改为你在函数中设置的过滤后的值。这种情况下：

用户输入的内容（包括中文或其他不被允许的字符）将显示在输入框中，因为没有返回值去覆盖用户的输入。
尽管你可能在事件处理函数中已经将动态绑定的值设置为过滤后的值，但因为没有返回这个值，输入框的显示内容不会同步更新，仍然显示用户原始输入的内容。

正确代码

html

html 复制代码

<input class="item_left account" placeholder="官方账号" :value="accountValue" maxlength=20  @input="inputAccount">

javascript 复制代码

<script>
	export default {
		data() {
			return {
				accountValue: '', //账号输入框
			}
		},
		methods: {
			// 输入账号
			inputAccount(e) {
                // 过滤掉所有双字节字符（包括汉字）和非法符号
				this.accountValue = e.detail.value.replace(/[^a-zA-Z0-9\-@_.]/g, '');
				return this.accountValue
			},
		}
	}
</script>