vue中对el-input输入的内容进行正则判断，两个字符中间有分隔符验证，楼层输入格式修改正则转换，判断前后字符之间，使用的是否为、：|/-如果不是则会取消

最新推荐文章于 2023-10-10 11:13:11 发布

吃月亮的猩猩

最新推荐文章于 2023-10-10 11:13:11 发布

阅读量901

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41180882/article/details/129260255

版权

本文介绍如何在Vue项目中利用正则表达式对el-input组件的输入内容进行校验，确保楼层输入符合特定格式，如允许数字间使用、：|/-作为分隔符，但不允许出现2-3这样的组合。同时，内容还涉及对总楼层等条件的判断。在实际应用中，发现输入框存在中文状态符号转为英文状态的问题，对于搜狗输入法和其他键盘的处理方式不一致，文章期待读者提供解决方案。

摘要由CSDN通过智能技术生成

在vue中将输入的内容进行正则格式转换，这里主要是用来做楼层转换，传给后端的必须是某些格式，其中存数字，中间带、：|/-都可以，其他不行比如2-3这样，还会对总楼层等进行判断

//直接在需要的地方加入这个方法，可以使用el-inpu的change事件
 houseDataLc(value){
   
      // "(^(([1-9]+|-[1-9]+)(-|:|：|([\|]{1,})|、|/)([[1-9]*|-[1-9]+))$)" //这是和下面差不多正则，但是就是有一点点的问题，没有改好
      if(!this.houseData.zlc){
   
        this.$set(this.houseData,'lc','')
       return this.$message('请先输入总楼层');
      }
      // var reg = new RegExp("^-?(([1-9]\d* (:|：|([\|]{1,})|-|、|/)-?[1-9]\d*)|([1-9]\d*))$"); //正则这样的时候基本可以用，但是这样使用出现了正则不能正确判断的情况，改为的下面那种，有大佬看了可以告诉下为什么吗
      //下面一行判断是因为正则多个转义符或显示有问题，就取消了下面一行的检验
      //  eslint-disable-next-line  
      var reg = /^-?(([1-9]\d*(\:|\：|\||\-|\、|\/)-?[1-9]\d*)|([1-9]\d*))$/;
      if(value%1 === 0){
   
        +this.houseData.zlc >= value? this.$set(this.houseData,'lc',value):this.$set(this.houseData,'lc','') //这里是用来判断是否是存数字的
        return false
        //下面是对各种情况做判断，因为-可能为负楼层，可能为中间的分隔符，所以判断比较多，放最后
      }else if(reg.test(value) &&this.houseData.zlc){
   
        if(value.split(':').length === 2){
   
         +value.split(':')[0] < +value.split(':'