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>

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

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

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

相关推荐
Mahut14 分钟前
从零构建神经影像可视化库：neuroviz 的架构设计与实现
前端·javascript·github
慧一居士18 分钟前
VueUse 功能介绍使用场景及完整使用示例
前端·vue.js
奇怪的猫18 分钟前
浏览器窗口最小化的时候，setInterval 执行变慢，解决方案
前端·javascript
多租户观察室19 分钟前
工作流新生态：2026年工作流与Coding的重新分工
前端·人工智能·后端·低代码
cmd20 分钟前
别再混淆了！JS类型转换底层：valueOf vs toString vs Symbol.toPrimitive 详解
前端·javascript
用户158159637437029 分钟前
AI Agent 说"完成了"，但其实没有——任务验收机制的工程实践
javascript
Carsene34 分钟前
开源项目文档架构设计：Git Submodule 实现文档与代码的优雅分离
前端·后端
Z思学38 分钟前
promise 有几种状态 async/await 和promise 有什么关系
前端
han_39 分钟前
JavaScript设计模式（四）：发布-订阅模式实现与应用
前端·javascript·设计模式
276695829241 分钟前
租车帮(悟空)订单查询算法分析
java·服务器·前端·悟空·悟空app·租车帮·租车帮逆向
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03围棋-html版本042026年3月AI领域大事件：DeepSeek引领开源风暴05班级宠物园部署指南06小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）07OpenClaw 使用和管理 MCP 完全指南08UV安装并设置国内源09“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）10OpenClaw Control UI安全上下文访问配置