火狐浏览器只能输入数字不生效（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表单验证错误提示语太长无法全部展示的问题