vue3+element-ui+ts的input输入框限制

最新推荐文章于 2025-04-27 20:45:00 发布

wanzihuhu123

最新推荐文章于 2025-04-27 20:45:00 发布

阅读量689

点赞数 5

文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/liuwenliangjing/article/details/143403798

版权

1.限制input输入框只能输入数字的正则表达式：

oninput="value=value.replace(/[^0-9.]/g,'')"

示例为：

<el-form-item label="111">
  <el-input oninput="value=value.replace(/[^0-9.]/g,'')"   v-model="form.port" placeholder="请输入111" clearable/>
</el-form-item>

2.限制input输入框只能输入小写字母、数字、下划线的正则表达式：

oninput="this.value=this.value.replace(/[^a-z0-9_]/g,'');"

示例为：

<el-form-item label="222">
  <el-input oninput="this.value=this.value.replace(/[^a-z0-9_]/g,'');"> v-model="form.port" placeholder="222" clearable/>
</el-form-item>

3.限制input输入框只能输入数字和点的正则表达式：

oninput="value=value.replace(/[^\d.]/g,'')"

示例为：

<el-form-item label="333">
   <el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="form.ip" placeholder="请输入333" clearable/>
</el-form-item>

4.限制input输入框只能输入中文的正则表达式：

oninput="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')"

示例为：

<el-form-item label="4444">
   <el-input oninput="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')" v-model="form.ip" placeholder="请输入4444" clearable/>
</el-form-item>

5.限制input输入框只能输入大小写字母、数字、下划线的正则表达式：

oninput="this.value=this.value.replace(/[^\w_]/g,'');"

示例为：

<el-form-item label="555">
   <el-input oninput="this.value=this.value.replace(/[^\w_]/g,'');" v-model="form.ip" placeholder="请输入555" clearable/>
</el-form-item>

6.限制input输入框只能输入英文的正则表达式：

oninput="this.value=this.value.replace(/[^a-zA-Z]/g,'')"

7.不可输入空格

oninput="onkeyup="value = value.replace(/\s+/g, '')"

8.不可输入中文

oninput="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"