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

谁不想飞舞青春2025-01-17 10:19

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-input
          v-model="ruleForm.test1"
          @input="validateNumber($event,'test1',ruleForm)"></el-input>
      </el-form-item>
      <el-form-item label="只允许输入负整数和正整数" prop="test2">
        <el-input
            v-model="ruleForm.test2"
            @input="validateNegativeNumber($event,'test2',ruleForm)"></el-input>
      </el-form-item>
      <el-form-item label="只允许输入大小写字母" prop="test3">
        <el-input
            v-model="ruleForm.test3"
            @input="validateAlphabet($event,'test3',ruleForm)"></el-input>
      </el-form-item>
      <el-form-item label="只允许输入中文" prop="test4">
        <el-input
            v-model="ruleForm.test4"
            @input="validateChinese($event,'test4',ruleForm)"></el-input>
      </el-form-item>
      <el-form-item label="只允许输入数字和字母" prop="test5">
        <el-input
            v-model="ruleForm.test5"
            @input="validateNumberAndAlphabet($event,'test5',ruleForm)"></el-input>
      </el-form-item>
      <el-form-item label="只允许输入数字和字母和中文" prop="test6">
        <el-input
            v-model="ruleForm.test6"
            @input="validateNumberAndAlphabetAndChinese($event,'test6',ruleForm)"></el-input>
      </el-form-item>
      <el-form-item label="只允许输入小数,最多保留2位小数" prop="test7">
        <el-input
            v-model="ruleForm.test7"
            @input="validateKeepTwoFloat($event,'test7',ruleForm)"></el-input>
      </el-form-item>
      <el-form-item label="只允许输入小数,保留3位小数" prop="test8">
        <el-input
            v-model="ruleForm.test8"
            @input="validateKeepThreeFloat($event,'test8',ruleForm)"></el-input>
      </el-form-item>
      <el-form-item label="只允许输入小数,最大允许输入8位整数和2位小数" prop="test9">
        <el-input
            v-model="ruleForm.test9"
            @input="validateMaxDigitFloat($event,'test9',ruleForm)"></el-input>
      </el-form-item>
      <el-form-item label="能输入正负位小数,最大允许输入8位整数和2位小数" prop="test10">
        <el-input
            v-model="ruleForm.test10"
            @input="validateNumberMaxDigitFloat($event,'test10',ruleForm)"></el-input>
      </el-form-item>
      <el-form-item label="文本框字符串全部转为大写" prop="test11">
        <el-input
            v-model="ruleForm.test11"
            @input="valToUpperCase($event,'test11',ruleForm)"></el-input>
      </el-form-item>
      <el-form-item label="只允许输入数字和字母且文本框字符串全部转为大写" prop="test12">
        <el-input
            v-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>

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

默认进入首页测试，浏览器结果如下：

到这里使用正则表达式限制文本框输入就到这里了。如果以后在工作中有扩增的话再加上即可。

相关推荐
abigale0315 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者34 分钟前
构建淘宝评论监控系统：API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile38 分钟前
Chrome安装老版本、不同版本，自制便携版本用于前端调试
前端·chrome
weixin_4166399740 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器（chrome系列通杀））扩展损坏？一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合（0/7）
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战：减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
热门推荐
012024年 最新 iPhone手机 历代机型、屏幕尺寸、纵横比、分辨率 整理02Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面03Coze扣子平台完整体验和实践（附国内和国际版对比）04MIUI显示/隐藏5G开关的方法，信号弱时开启手机Wifi通话方法05手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07Word粘贴时出现“运行时错误53,文件未找到：MathPage.WLL“的解决方案08华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南09DeepSeek各版本说明与优缺点分析10微软账户和本地账户有什么区别？如何切换登录账户？