vue之 input框只能输入数字的效验

最新推荐文章于 2024-05-08 16:53:06 发布

wh20141212

最新推荐文章于 2024-05-08 16:53:06 发布

阅读量2.1k

点赞数 2

分类专栏： vue使用文章标签： vue.js javascript

本文链接：https://blog.csdn.net/wh20141212/article/details/109033761

版权

vue使用专栏收录该内容

17 篇文章 0 订阅

订阅专栏

记录一下踩坑过程

一个input框在单独使用不适用form表单的情况下如何使input框只输入数字

这里我做了双重判断用哪一种方法都可以

在这里插入图片描述

<el-table-column property="autcal_num" label="实际发仓量" align="center">
      <template slot-scope="scope">
            <div class="Input">
                  <!-- {{scope.row.autcal_num}} -->
                  <el-input v-model.number="scope.row.autcal_num"
                        placeholder="默认计划发仓量" :disabled="storeDis"
                        @keyup.native="scope.row.autcal_num = oninput(scope.row.autcal_num)"
                        @change="InputValue(scope.$index,scope.row,scope.row.autcal_num)">
                  </el-input>
            </div>
      </template>
</el-table-column>

在这里插入图片描述

InputValue(index, row, value) {
                        console.log(value, "下标", index)
                        console.log("实际发仓数据组", this.smallArr)
                        var reg = /^[0-9]+.?[0-9]*/; //判断字符串是否为数字//判断正整数/[1−9]+[0−9]∗]∗/ 
                        if (!reg.test(value)) {
                              this.$message({
                                    message: "请输入数字！",
                                    type: 'error'
                              });
                              console.log("数据填写错误！")
                              return
                        }

                        // console.log(value)
                        if (value.length == 0) {
                              console.log("数据不能为空！")
                              return
                        }

                        // console.log(row)
                        let son = {
                              fba_send_point_list_id: row.fba_send_point_list_id, // 分仓表的id
                              fba_send_point_table_id: row.fba_send_point_table_id, //数据id
                              send_num: row.mount, // 计划发货
                              autcal_num: value * 1 // 实际发货
                        }
                        this.smallArr.push(son)
                        this.InfoID = row.fba_send_storehouse_id
                        console.log(this.smallArr)
                        // return

                  },

在这里插入图片描述

oninput(num) {
                        console.log(num)
                        //      debugger
                        //正则替换   
                        //后来调试发现这个函数只能用于字符串，当是数字的时候就会报此错误
                        var str = num.toString();
                        str = str.replace(/[^\d]/g, '') // 保留数字
                        console.log("input值", str)
                        return str


                  },