关于el-table中使用的el-input添加正数正则校验的方法(ts-typeScript/js也可用)

这是我应该是第二次遇到这样的问题，第一次遇到是去年的时候，但是那个时候我没有做任何记录，所以，我想我这次要做个记录，不然又忘记了~~

第一步，梳理需求：

需求是希望可以对用户输入的内容添加正则校验，

只能输入正数，普及一下：正数即正整数和浮点数，不包括0 和负数

第二步，捋思路：

首先要添加正则要知道正则表达式怎么写，那么，根据这个需求的话，我们要写一个正数的正则表达式/^(?!(0[\d]{0,}$))[\d]{1,}[.]{0,}[\d]{0,}$/

其次，我们想要在用户输入的时候，就实时校验，那么我们需要用到@input方法

再其次~~ 就是我们并没有用到el-form，所以我们在校验的时候，是没有自动提示的，那么我们自己需要加一个，如果在校验不通过的情况下，去给用户一个提示:

<span>请输入内容</span>

写到方法的时候，我们就可以想到，当用户输入的时候不能满足我们的正则条件的时候，会让这个提示信息显示，若满足就将提示信息隐藏，那么我们在调用方法的时候需要获取到提示内容，给他取一个className 或者 id，我个人用的事className

提示信息默认是display:none

这两篇文章对你们有帮助喔，记得看

juejin.cn/post/705742… 和juejin.cn/post/705742…

第三步，看代码：

<template> 
    <el-table :data="tableData" style="width: 100%"> 
        <el-table-column prop="date" label="日期" width="180"> </el-table-column> 
        <el-table-column prop="name" label="姓名" width="180">
            <template slot-scope="scope">
                <div style="display:flex">
                    <el-input 
                        v-model="scope.row.name"
                        placeholder="请输入内容"
                        @input="handlerInput(scope.row.name)"
                    ></el-input>
                    <span class="InputNum">请输入内容</span>
                </div>
            </template>
        </el-table-column> 
        <el-table-column prop="address" label="地址"> </el-table-column> 
     </el-table> 
</template>

<script>
    private handlerInput(val){
    //写到这一步，不要嫌弃我啰嗦，如果你遇到了问题那么请看我上面发的这两篇文章，
    //不出意外肯定能帮到你
    const InputNum:any = getElementClassName('InputNum');
        if(!/^(?!(0[\d]{0,}$))[\d]{1,}[.]{0,}[\d]{0,}$/){
            InputNum.style.display = 'block'
        }else{
            InputNum.style.display = 'none'
        }
    }
<script>
//我个人因为需求，所以给提示信息和输入框的布局添加了样式，你们根据需要，

//自己考虑（外面嵌套了一层div）
<style>
    .InputNum{
        color:#F56C6;
        font-size:12px;
        line-height:1;
        position:absolute;
        top:47px;
        left:10px;
        display:none
    }
</style>

写到这里为止，这个需求差不多就完事了，但是我也遇到了一些不同的问题，已经解决， 如果大家入到了什么问题，可以在评论区里说一下，我们可以探讨一下

一起加油吧~~fitting