正则表达式，input循环情况下输入框只允许输入数字和小数点，其余的清空

最新推荐文章于 2024-07-31 09:38:11 发布

行走的茶白

最新推荐文章于 2024-07-31 09:38:11 发布

阅读量130

点赞数 1

分类专栏： TS + Vue2 正则表达式文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/chabaimgg/article/details/138152675

版权

TS + Vue2 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

正则表达式

1 篇文章 0 订阅

订阅专栏

该篇文章介绍了如何在Vue应用中使用el-checkbox和el-input组件创建一个动态的阈值输入框，用户可以设置上限警告和报警值，同时对输入进行数字格式验证。涉及到了v-model绑定、事件处理函数和数组操作。

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

 <el-checkbox-group id="checkbox-container" v-model="overLimitOption" @change="handleCheckedoverLimit">
                    <el-checkbox v-for="(item, index) in overLimitArr" :label="item.tagParamName" :key="item.tagParamId">
                      {{ item.tagParamName }}
                      <!-- <div style="display:flex">
                        <div class="alarmUpLow"> -->
                      <span v-if="overLimitOption.includes(item.tagParamName)">
                        <span style="margin-left:80px" class="alarmUpLow_text">上限警告:</span>
                        <el-input @input="changeMemberId1($event, index)" v-model="item.upperAlarm" placeholder="请输入"></el-input>

                        <span class="alarmUpLow_text">上限报警:</span>
                        <el-input @input="changeMemberId2($event, index)" v-model="item.upperWarn" placeholder="请输入"></el-input>

                        <span class="alarmUpLow_text">下限警告:</span>
                        <el-input @input="changeMemberId3($event, index)" v-model="item.lowerAlarm" placeholder="请输入"></el-input>

                        <span class="alarmUpLow_text">下限报警:</span>
                        <el-input @input="changeMemberId4($event, index)" v-model="item.lowerWarn" placeholder="请输入"></el-input>
                      </span>
                    </el-checkbox>
                  </el-checkbox-group>

private changeMemberId1(val, index) {
    this.overLimitArr[index].upperAlarm = val.replace(/[^0-9.]/g, '')

    console.log(val, index)
  }
  private changeMemberId2(val, index) {
    this.overLimitArr[index].upperWarn = val.replace(/[^0-9.]/g, '')

    console.log(val, index)
  }
  private changeMemberId3(val, index) {
    this.overLimitArr[index].lowerAlarm = val.replace(/[^0-9.]/g, '')

    console.log(val, index)
  }
  private changeMemberId4(val, index) {
    this.overLimitArr[index].lowerWarn = val.replace(/[^0-9.]/g, '')
    console.log(val, index)
  }