表单中＜el-input＞加自定义校验，只允许输入数字，小数的情况下需要精确到后三位

灵木木

于 2023-10-19 15:05:56 发布

阅读量701

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44125739/article/details/133926275

版权

文章目录

概要

表单中加入自定义校验，数量且只允许输入数字，小数的情况下需要精确到后三位
在这里插入图片描述

思想流程

1.加入自定义校验

2.自定义校验只允许输入数字和小数点

在这里插入图片描述

3.小数点不允许在第一位和最后一位，且不允许出现两次

在这里插入图片描述

4.小数点后保留三位数字

在这里插入图片描述

代码

                   <el-col :span="12" class="search_colAdd">
                        <el-form-item label="数量（吨）：" prop="quantity">
                            <el-input
                                placeholder="请输入数量"
                                v-model="formDataDailog.quantity"
                                style="width: 100%"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>
                     //弹窗输入数量自定义校验

```rules中
           quantity: [
                    {required: true,validator:this.validate_num_plan,  trigger: 'blur'}
              ],

js中
validate_num_plan(rule, value, callback) {// 数字和小数点
               let capital = /^[\d.]+$/;
               if (!capital.test(value)) {
                   callback(new Error(`请输入数量`));
               } else {
                   let data = this.formDataDailog.quantity
                   let arr = data.split('')
                   let mix = data.indexOf('.')
                   console.log(arr[arr.length-1],mix,'arr')
                   if(mix != -1){ // 有小数点
                       // 不能在第一位
                       if(mix == 0 || mix == arr.length-1){
                           callback(new Error(`小数点不能在第一位或最后一位`));
                           return
                       }
                       let dianNum = arr.filter(x=> x == ".");
                       // 有多个小数点
                       if(dianNum.length>1){
                           callback(new Error(`小数点只能有一个`));
                           return
                       }
                       // 小数点后只能有三位
                       let three = data.split('.') [1].split('')//因为已经判断过小数点不在第一个也只有一个所以直接转数组拿后面的数据
                       if(three.length>3){
                           callback(new Error(`数量最多精确到小数点后三位`));
                           return
                       }
                       callback();
                   }else{
                       // 整数判断
                       callback();
                   }
               }
           },