正则表达式--限制input输入框的相爱相恨(建议收藏)

今天和大家一起研究一下,在工作中我们经常会遇到一些奇怪的input输入需求,比如输入数字输入中文等等,让小伙伴们很头痛。今天勇宝就来和大家一起整理一下工作中常用到的那些正则表达式

模版样例

下面我就干净利索一点,不拖泥带水。我就以element来进行演示

模版样例,下面我只给大家写正则表达式,用法都是一样的。

js 复制代码
<template>
    <el-input v-model="inputVal" @input="hanldeInputRules"></el-input>
</template>

<script setup>
import { ref } from 'vue';

const inputVal = ref('');

const hanldeInputRules = () => {
    const reg = /[^\w_]/g;
    inputVal.value = inputVal.value.replace(reg, '');
}
</script>

常用正则表达式

1. 只能输入大小写字母、数字、下划线

js 复制代码
const reg = /[^\w_]/g;

2. 只能输入小写字母、数字、下划线

js 复制代码
const reg = /[^a-z0-9_]/g;

3. 只能输入中文

js 复制代码
const reg = /[^\u4e00-\u9fa5]/g;

4. 只能输入数字

js 复制代码
const reg = /[^\D]/g;

5. 只能输入英文

js 复制代码
const reg = /[^a-zA-Z]/g;

6. 只能输入中文、数字、英文

js 复制代码
const reg = /[^\w\u4E00-\u9FA5]/g;

7. 只能输入数字和字母

js 复制代码
const reg = /[\W]/g;

8. 只能输入数字和点

js 复制代码
const reg = /[^\d.]/g;

9. 除了英文的标点符号以外,其他的都可以

js 复制代码
const reg = /[^[^!@#$%^&*()-=+]/g;

10. 只能输入英文字母和数字,不能输入中文

js 复制代码
const reg = /[^\w\.\/]/ig;

11. 只能输入数字和英文

js 复制代码
const reg = /[[^\d|chun]/g;

12. 不可输入中文

js 复制代码
const reg = /[\u4E00-\u9FA5]]/g;

13. 不可输入空格

js 复制代码
const reg = /[\s+]/g;

总结

写完正则表达式,搁置几天后,自己都不认识了,今天就先整理这么多把。

相关推荐
前端大卫18 分钟前
Vue3 + Element-Plus 自定义虚拟表格滚动实现方案【附源码】
前端
却尘33 分钟前
Next.js 请求最佳实践 - vercel 2026一月发布指南
前端·react.js·next.js
ccnocare34 分钟前
浅浅看一下设计模式
前端
Lee川38 分钟前
🎬 从标签到屏幕:揭秘现代网页构建与适配之道
前端·面试
Ticnix1 小时前
ECharts初始化、销毁、resize 适配组件封装(含完整封装代码)
前端·echarts
纯爱掌门人1 小时前
终焉轮回里,藏着 AI 与人类的答案
前端·人工智能·aigc
twl1 小时前
OpenClaw 深度技术解析
前端
崔庆才丨静觅1 小时前
比官方便宜一半以上!Grok API 申请及使用
前端
星光不问赶路人1 小时前
vue3使用jsx语法详解
前端·vue.js
天蓝色的鱼鱼1 小时前
shadcn/ui,给你一个真正可控的UI组件库
前端