Vue2中使用正则表达式限制输入框输入

embedded/2025/1/18 2:26:52/

Vue2中使用正则表达式限制输入框输入

说明

这里记录下自己在Vue2的项目通过文本输入框的@input方法使用正则表达式来限制文本框的输入。这里将自己目前项目里面所用到的正则表达式全部写到一个js里面当做一个工具类使用。这里承接自己的博客Vue2搭建基础架构（10）— 菜单栏功能和Tab页功能联动实现这篇博客，在该博客项目的基础上增加该工具类的使用。

工具类

在src目录下的utils文件夹创建一个validateRule.js文件。
在这里插入图片描述

validateRule.js代码：

javascript">// 使用正则校检输入框输入值/*** 只允许输入数字* @val 为input框的$event值* @key 为obj对象中的某个属性名* @obj 对象*/
export function validateNumber(val, key, obj) {// 只允许输入数字obj[key] = val.replace(/[^\d]/g, '')
}/*** 只允许输入负整数和正整数* @val 为input框的$event值* @key 为obj对象中的某个属性名* @obj 对象*/
export function validateNegativeNumber(val, key, obj) {// 只允许输入负整数和正整数obj[key] = val.replace(/[^0-9-]|(?<=\..*)\.|(?<!\d)\.|(?!^)-/g, '')
}/*** 只允许输入大小写字母* @val 为input框的$event值* @key 为obj对象中的某个属性名* @obj 对象*/
export function validateAlphabet(val, key, obj) {// 只允许输入大小写字母obj[key] = val.replace(/[^a-zA-Z]/g, '')
}/*** 只允许输入中文* @val 为input框的$event值* @key 为obj对象中的某个属性名* @obj 对象*/
export function validateChinese(val, key, obj) {// 只允许输入中文obj[key] = val.replace(/[^\u4E00-\u9FA5]/g, '')
}/*** 只允许输入数字和字母* @val 为input框的$event值* @key 为obj对象中的某个属性名* @obj 对象*/
export function validateNumberAndAlphabet(val, key, obj) {// 只允许输入数字和字母obj[key] = val.replace(/[^\da-zA-Z]/g, '')
}/*** 只允许输入数字和字母和中文* @val 为input框的$event值* @key 为obj对象中的某个属性名* @obj 对象*/
export function validateNumberAndAlphabetAndChinese(val, key, obj) {// 只允许输入数字和字母和中文obj[key] = val.replace(/[^\da-zA-Z\u4E00-\u9FA5]/g, '')
}/*** 只允许输入小数,最多保留2位小数* @val 为input框的$event值* @key 为obj对象中的某个属性名* @obj 对象*/
export function validateKeepTwoFloat(val, key, obj) {// 只允许输入小数,最多保留2位小数obj[key] = val.replace(/[^\d.]/g, '') // 只允许输入正整数和小数点.replace(/^\./g, '0.') // 如果开头第一个输入为小数点,则替换为0.开头.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.') // 这3个正则在一起才行,为只允许有一个小数点.replace(/(\.\d{2})\d*/, '$1') // 最多保留2位小数
}/*** 只允许输入小数,保留3位小数* @val 为input框的$event值* @key 为obj对象中的某个属性名* @obj 对象*/
export function validateKeepThreeFloat(val, key, obj) {// 只允许输入小数,保留3位小数obj[key] = val.replace(/[^\d.]/g, '') // 只允许输入正整数和小数点.replace(/^\./g, '0.') // 如果开头第一个输入为小数点,则替换为0.开头.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.') // 这3个正则在一起才行,为只允许有一个小数点.replace(/(\.\d{3})\d*/, '$1') // 最多保留3位小数
}/*** 只允许输入小数,最大允许输入8位整数和2位小数* @val 为input框的$event值* @key 为obj对象中的某个属性名* @obj 对象*/
export function validateMaxDigitFloat(val, key, obj) {// 只允许输入小数,最大允许输入8位整数和2位小数obj[key] = val.replace(/[^\d.]/g, '') // 只允许输入正整数和小数点.replace(/^\./g, '0.') // 如果开头第一个输入为小数点,则替换为0.开头.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.') // 这3个正则在一起才行,为只允许有一个小数点.replace(/(\d{8})\d*/, '$1') // 无小数点时,最多允许输入8位整数.replace(/(\.\d{2})\d*/, '$1') // 最多保留2位小数
}/*** 能输入正负位小数,最大允许输入8位整数和2位小数* @val 为input框的$event值* @key 为obj对象中的某个属性名* @obj 对象*/
export function validateNumberMaxDigitFloat(val, key, obj) {// 能输入正负位小数,最大允许输入11位整数和2位小数obj[key] = val.replace("-.","%$%").replace(/\\-\./g,"").replace("%$%","-").replace(".-","$#$").replace(/\.\\-/g,"").replace("$#$",".").replace(/[^-\d.]/g,"") // 只允许输入-和正整数和小数点.replace(/^\./g,"0.") // 如果开头第一个输入为小数点,则替换为0.开头.replace(/^(0[0-9])/,"") // 验证首位出现类似于01,02的金额.replace(/^-(0[0-9])/,"") // 验证首位出现类似于-01,-02的金额.replace(".","$#$").replace(/\./g,"").replace("$#$",".") // 只保留第一个. 清除多余的.replace("-","$%$").replace(/\\-/g,"").replace("$%$","-") // 只保留第一个- 清除多余的.replace(/\d{1,}-|\d{1,}\.\d{1,2}-/,"") // 不能在数字后面输入-.replace(/(\d{8})\d*/, '$1') // 无小数点时,最多允许输入8位整数.replace(/(\.\d{2})\d*/, '$1') // 最多保留2位小数
}/*** 文本框字符串全部转为大写* @val 为input框的$event值* @key 为obj对象中的某个属性名* @obj 对象*/
export function valToUpperCase(val, key, obj) {// 将字符串转大写let newVal = val.toUpperCase()if (val !== newVal) {obj[key] = newVal}
}/*** 只允许输入数字和字母且文本框字符串全部转为大写* @val 为input框的$event值* @key 为obj对象中的某个属性名* @obj 对象*/
export function limitValToUpperCase(val, key, obj) {// 只允许输入数字和字母validateNumberAndAlphabet(val, key, obj)// 将字符串转大写let newVal = val.toUpperCase()if (val !== newVal) {obj[key] = newVal}
}/*** 只允许输入数字,针对数组* @val 为input框的$event值* @key 为obj对象中的某个属性名* @obj 对象* @index 数组的索引* @field 数组中对象里面的某个属性名*/
export function validateNumberList(val, key , obj, index, field){// 只允许输入数字obj[key][index][field] = val.replace(/[^\d]/g, '')
}/*** 只允许输入字母,针对数组* @val 为input框的$event值* @key 为obj对象中的某个属性名* @obj 对象* @index 数组的索引* @field 数组中对象里面的某个属性名*/
export function validateAlphabetList(val, key, obj, index, field) {// 只允许输入字母obj[key][index][field] = val.replace(/[^a-zA-Z]/g, '')
}/*** 只允许输入数字和字母,针对数组* @val 为input框的$event值* @key 为obj对象中的某个属性名* @obj 对象* @index 数组的索引* @field 数组中对象里面的某个属性名*/
export function validateNumberAndAlphabetList(val, key , obj, index, field){// 只允许输入数字和字母obj[key][index][field] = val.replace(/[^\da-zA-Z]/g, '')
}

在src/views/home首页里面的index.vue测试代码如下：

javascript"><template><div><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="400px" class="demo-ruleForm"><el-form-item label="只允许输入数字" prop="test1"><el-inputv-model="ruleForm.test1"@input="validateNumber($event,'test1',ruleForm)"></el-input></el-form-item><el-form-item label="只允许输入负整数和正整数" prop="test2"><el-inputv-model="ruleForm.test2"@input="validateNegativeNumber($event,'test2',ruleForm)"></el-input></el-form-item><el-form-item label="只允许输入大小写字母" prop="test3"><el-inputv-model="ruleForm.test3"@input="validateAlphabet($event,'test3',ruleForm)"></el-input></el-form-item><el-form-item label="只允许输入中文" prop="test4"><el-inputv-model="ruleForm.test4"@input="validateChinese($event,'test4',ruleForm)"></el-input></el-form-item><el-form-item label="只允许输入数字和字母" prop="test5"><el-inputv-model="ruleForm.test5"@input="validateNumberAndAlphabet($event,'test5',ruleForm)"></el-input></el-form-item><el-form-item label="只允许输入数字和字母和中文" prop="test6"><el-inputv-model="ruleForm.test6"@input="validateNumberAndAlphabetAndChinese($event,'test6',ruleForm)"></el-input></el-form-item><el-form-item label="只允许输入小数,最多保留2位小数" prop="test7"><el-inputv-model="ruleForm.test7"@input="validateKeepTwoFloat($event,'test7',ruleForm)"></el-input></el-form-item><el-form-item label="只允许输入小数,保留3位小数" prop="test8"><el-inputv-model="ruleForm.test8"@input="validateKeepThreeFloat($event,'test8',ruleForm)"></el-input></el-form-item><el-form-item label="只允许输入小数,最大允许输入8位整数和2位小数" prop="test9"><el-inputv-model="ruleForm.test9"@input="validateMaxDigitFloat($event,'test9',ruleForm)"></el-input></el-form-item><el-form-item label="能输入正负位小数,最大允许输入8位整数和2位小数" prop="test10"><el-inputv-model="ruleForm.test10"@input="validateNumberMaxDigitFloat($event,'test10',ruleForm)"></el-input></el-form-item><el-form-item label="文本框字符串全部转为大写" prop="test11"><el-inputv-model="ruleForm.test11"@input="valToUpperCase($event,'test11',ruleForm)"></el-input></el-form-item><el-form-item label="只允许输入数字和字母且文本框字符串全部转为大写" prop="test12"><el-inputv-model="ruleForm.test12"@input="limitValToUpperCase($event,'test12',ruleForm)"></el-input></el-form-item><!--动态数组校检对象--><el-row v-for="(item,index) in ruleForm.testObj" :key="index"><el-col :span="6"><!--必须要加:rules="rules.test13",不然rules校检不生效--><el-form-item :label="`测试动态添加只允许输入数字${index + 1}`" label-width="220px" :prop="`testObj.${index}.test13`" :rules="rules.test13"><el-input style="width: 100%;" v-model="item.test13"@input="validateNumberList($event, 'testObj', ruleForm, index, 'test13')" /></el-form-item></el-col><el-col :span="6"><el-form-item :label="`测试动态添加只允许输入字母${index + 1}`" label-width="210px" :prop="`testObj.${index}.test14`"><el-input style="width: 100%;" v-model="item.test14"@input="validateAlphabetList($event, 'testObj', ruleForm, index, 'test14')" /></el-form-item></el-col><el-col :span="6"><el-form-item :label="`测试动态添加只允许输入数字和字母${index + 1}`" label-width="250px" :prop="`testObj.${index}.test15`"><el-input style="width: 100%;" v-model="item.test15"@input="validateNumberAndAlphabetList($event, 'testObj', ruleForm, index, 'test15')" /></el-form-item></el-col><el-col :span="6"><el-form-item label-width="10px"><i class="el-icon-circle-plus-outline" v-if="ruleForm.testObj.length && index === 0" @click="add"></i><i class="el-icon-remove-outline" v-else @click="remove(item)"></i></el-form-item></el-col></el-row></el-form></div>
</template><script>import {validateNumber,validateNegativeNumber,validateAlphabet,validateChinese,validateNumberAndAlphabet,validateNumberAndAlphabetAndChinese,validateKeepTwoFloat,validateKeepThreeFloat,validateMaxDigitFloat,validateNumberMaxDigitFloat,valToUpperCase,limitValToUpperCase,validateNumberList,validateAlphabetList,validateNumberAndAlphabetList} from '@/utils/validateRule'export default {name: "home-index",data() {return {ruleForm: {test1: '',test2: '',test3: '',test4: '',test5: '',test6: '',test7: '',test8: '',test9: '',test10: '',test11: '',test12: '',testObj: [{test13: '',test14: '',test15: ''}]},rules: {test1: [{ required: true, message: '请输入', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],test13: [{ required: true, message: '请输入', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }]}}},methods:{validateNumber,validateNegativeNumber,validateAlphabet,validateChinese,validateNumberAndAlphabet,validateNumberAndAlphabetAndChinese,validateKeepTwoFloat,validateKeepThreeFloat,validateMaxDigitFloat,validateNumberMaxDigitFloat,valToUpperCase,limitValToUpperCase,validateNumberList,validateAlphabetList,validateNumberAndAlphabetList,// 添加一行add(){this.ruleForm.testObj.push({test13: '',test14: '',test15: ''})},// 移除一行remove(item){let index = this.ruleForm.testObj.indexOf(item)if (index !== -1) {this.ruleForm.testObj.splice(index, 1)}}}}
</script><style lang="less" scoped></style>

测试使用正则表达式限制文本框输入

默认进入首页测试，浏览器结果如下：
在这里插入图片描述
到这里使用正则表达式限制文本框输入就到这里了。如果以后在工作中有扩增的话再加上即可。


http://www.ppmy.cn/embedded/154822.html

相关文章

vue3封装el-tour漫游式引导

vue3封装el-tour漫游式引导

vue3使用el-tour漫游式引导组件封装 我们这里先看下运行效果&#xff1a; 预览效果 引入的第三方库方法我这里就不写了&#xff0c;可以自行去官网查找。 我们看一下组件封装的部分。 tourPage.vue <el-tour v-model"open" :show-close"false" change…
阅读更多...
单片机实物成品-012 酒精监测

单片机实物成品-012 酒精监测

项目介绍 本项目以软硬件结合的方式&#xff0c;选择 C 语言作为程序硬件编码语言&#xff0c; 以 STM32 单片机作为核心控制板&#xff0c;在数据传输节点上连接酒精传感器对酒精浓度进行 实时检测&#xff0c;且对高浓度酒精采取强制干预和紧急预警&#xff0c;并将数据通过…
阅读更多...
RV1126+FFMPEG推流项目(4)VENC模块视频编码流程

RV1126+FFMPEG推流项目(4)VENC模块视频编码流程

在RV1126FFMPEG推流项目(3)VI模块视频编码流程-CSDN博客&#xff0c;说了vi的编码流程&#xff0c;这篇说VENC的初始化(硬件编码)。 上一篇提到了几个重要的数据结构体&#xff0c;这节说这个RV1126_VENC_CONFIG。继续认识一下。 /*** brief RV1126_VENC_CONFIG 结构体定义* *…
阅读更多...
ElasticSearch-Nested 类型与 Object 类型的区别

ElasticSearch-Nested 类型与 Object 类型的区别

在 Elasticsearch 中&#xff0c;nested 类型和 object 类型都用于处理嵌套的 JSON 数据&#xff0c;但它们在存储和查询方面有着显著的区别。本文将详细解释这两种类型的区别&#xff0c;并提供具体的示例。 一、基本概念 1. object 类型 定义&#xff1a;object 类型是 Elas…
阅读更多...
论文阅读：Structure-Driven Representation Learning for Deep Clustering

论文阅读：Structure-Driven Representation Learning for Deep Clustering

Xiang Wang, Liping Jing, Huafeng Liu, and Jian Yu. 2023. Structure-Driven Representation Learning for Deep Clustering. ACM Trans. Knowl. Discov. Data 18, 1, Article 31 (January 2024), 25 pages. https://doi.org/10.1145/3623400 论文地址&#xff1a;Structure…
阅读更多...
css 原子化

css 原子化

CSS 原子化&#xff08;Atomic CSS&#xff09;是一种设计思路&#xff0c;旨在通过定义小而简洁的类来实现高效的样式应用&#xff0c;每个类负责一个单独的样式属性。这样&#xff0c;通过组合多个原子类&#xff0c;可以快速、灵活地为元素应用样式&#xff0c;而不需要编写…
阅读更多...
Spring Boot中的自动配置原理是什么

Spring Boot中的自动配置原理是什么

Spring Boot 自动配置原理 Spring Boot 的自动配置机制基于 条件化配置&#xff0c;通过 EnableAutoConfiguration 注解来启用。自动配置的核心原理是 基于类路径和环境条件来推断所需要的配置&#xff0c;Spring Boot 会根据项目中引入的依赖和当前环境来自动装配相关的配置项…
阅读更多...
如何用 AI 打造孩子的专属学习助手？

如何用 AI 打造孩子的专属学习助手？

目录 一、创建智能体 二、填写提示词 三、验证效果 四、发布到豆包 如何用 AI 打造孩子的专属学习助手&#xff1f; 如何用 AI 打造孩子的专属学习助手&#xff1f; 今天给大家分享个超实用滴干货&#xff0c;能让家里的娃在学习路上如虎添翼&#xff01;　 前几天&#…
阅读更多...
最新文章

Copyright @ 2022~2023