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>

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

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

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

相关推荐
拾光拾趣录几秒前
for..in 和 Object.keys 的区别：从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区11 分钟前
把 SearchBox 塞进项目，搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠40 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞44 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门（九）Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案，优雅实现记住表单历史搜索记录！
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计：从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件，集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02扣子开源本地部署教程 丨Coze智能体小白喂饭级指南03Coze 开源了，送上保姆级私有化部署方案【建议收藏】04全球最强模型Grok4，国内已可免费使用！（附教程）05vue数据变化但页面不变06KGG转MP3工具|非KGM文件|解密音频07干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！0801-开源版COZE-字节 Coze Studio 重磅开源！保姆级本地安装教程，手把手带你体验09腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）10【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致