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

本文详细介绍了在Vue项目中如何使用正则表达式来限制input输入,包括各种场景如只能输入字母、数字、中文等,提供多种正则表达式模板供开发者参考。
摘要由CSDN通过智能技术生成

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

模版样例

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

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

<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. 只能输入大小写字母、数字、下划线

const reg = /[^\w_]/g;

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

const reg = /[^a-z0-9_]/g;

3. 只能输入中文

const reg = /[^\u4e00-\u9fa5]/g;

4. 只能输入数字

const reg = /[^\D]/g;

5. 只能输入英文

const reg = /[^a-zA-Z]/g;

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

const reg = /[^\w\u4E00-\u9FA5]/g;

7. 只能输入数字和字母

const reg = /[\W]/g;

8. 只能输入数字和点

const reg = /[^\d.]/g;

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

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

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

const reg = /[^\w\.\/]/ig;

11. 只能输入数字和英文

const reg = /[[^\d|chun]/g;

12. 不可输入中文

const reg = /[\u4E00-\u9FA5]]/g;

13. 不可输入空格

const reg = /[\s+]/g;

总结

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

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值