火狐浏览器只能输入数字不生效(replace(/[^\d]/g,‘‘))

问题描述

有时候使用el-table列表来进行编辑,需要校验el-input框只能输入数字,但是使用replace(/[^\d]/g,'')却无法进行拦截。


解决方案:

可以自己写提示语来解决。
代码如下:

        <el-table-column prop="inventory" label="库存">
          <template slot-scope="scope">
            <el-input
              :id="scope.row.specificationCode"
              class="stock-input"
              :class="isNaN(scope.row.specificationNumber) ? 'inventory-input-err' : ''"
              placeholder="请输入数值"
              oninput="value=value.replace(/[^\d]/g,'')"
              v-model="scope.row.specificationNumber"
              maxlength="8"
              @blur="getStockNum(scope.row.specificationCode)"
            ></el-input>
            <div v-show="isNaN(scope.row.specificationNumber)" class="inventory-err-style">只能输入数字</div>
          </template>
        </el-table-column>
    getStockNum(specificationCode) {
      if (document.getElementById(specificationCode).value) {
        this.stockConfigOption.push({
          specificationCode: specificationCode,
          stockValue: Number(document.getElementById(specificationCode).value),
        });
      }
    },
.stock-input {
  width: 200px;
}
.inventory-input-err /deep/ .el-input__inner {
  border-color: #f56c6c !important;
}
.inventory-err-style {
  color: #f56c6c;
  font-size: 12px;
}

其中oninput="value=value.replace(/[^\d]/g,'')"将非数字直接换为空。v-show="isNaN(scope.row.specificationNumber)"展示错误提示。:class="isNaN(scope.row.specificationNumber) ? 'inventory-input-err' : ''"当不是数字时el-input输入框为红色。

另一种提示写法请看文章:
form表单验证错误提示语太长无法全部展示的问题

你可能感兴趣的:(javascript,vue.js,前端)