基于ViewUi的Input输入框通过v-on:on-keyup事件正则校验,限制输入中文和空格

131 阅读1分钟

需求:通过动态渲染出的输入框,限制输入汉字和空格。

根据自己的解决经验,举例:

<div v-for="item in itemList" :key="item.id"> <FormItem :label="item.name" v-else :prop="item.need !== 0 ? item.nameSql : ''"> <Input type="text" v-model="userInfo[item.nameSql]" clearable v-on:on-keyup="userInfo[item.nameSql] = userInfo[item.nameSql].replace(/[\u4e00-\u9fa5]|(^\s+)|(\s+$)/gi, '')" :value="userInfo[item.nameSql]" ></Input> </FormItem> <div>

image.png

需要绑定的事件:v-on:on-keyup

关键点:v-on:on-keyup="userInfo[item.nameSql] = userInfo[item.nameSql].replace(/[\u4e00-\u9fa5]|(^\s+)|(\s+$)/gi, '')"

通过正则表达式:/[\u4e00-\u9fa5]|(^\s+)|(\s+$)/gi 将输入的内容中文和空格替换为空。