当前位置： 首页 > article >正文

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

article 2025/1/18 1:23:39

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

  • 说明
  • 工具类
  • 测试使用正则表达式限制文本框输入

说明

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

工具类

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

validateRule.js代码：

// 使用正则校检输入框输入值

/**
 * 只允许输入数字
 * @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测试代码如下：

<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>

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

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


http://www.kler.cn/a/507170.html

相关文章：

  • AAPM：基于大型语言模型代理的资产定价模型，夏普比率提高9.6%
  • 网络科技有限公司网络设计
  • 梁山派入门指南4——定时器使用详解，包括定时器中断、PWM产生、输入捕获测量频率
  • SQL Prompt 插件
  • PyTorch使用教程(1)—PyTorch简介
  • 浅谈云计算16 | 存储虚拟化技术
  • G1原理—6.G1垃圾回收过程之Full GC
  • 面试反馈流程及模版
  • 【算法】枚举
  • Hive SQL必刷练习题：留存率问题
  • ffmpeg硬件编码
  • HTTP：Nagle算法与TCP_NODELAY
  • 蛋糕商城 SpringBoot3.4.0，JPA
  • OpenCV机器视觉：主色提取的奇妙之旅
  • Pytorch|YOLO
  • python中元类相关的问答题
  • UML系列之Rational Rose笔记六：部署图
  • 代理模式实现
  • Java爬虫获取淘宝item_search_suggest API接口的搜索词推荐
  • MySQL入门学习四(数据表基本操作)
  • 操作系统 期末重点复习
  • PyTorch DAY1: 基础语法
  • QT开发技术 【基于TinyXml2的对类进行序列化和反序列化】一
  • apidoc thinkphp likeadmin 遇到解析报错
  • element 日期时间组件默认显示当前时间
  • 2023 Google开发者大会：你了解机器学习的新动向吗？