vue3项目对所有输入框进行校验、输入限制

一、数字校验

数字校验在网上找了很多种办法，比如使用 element 里面 el-input 输入框 type属性设置为number，这个可以满足数字的校验，但是如果输入 e 的话是可以输入的，因为 e 在数学中代表一个特殊的实数，所以输入 e 不能代表他是一个bug。

但追求完美的我们肯定不允许这样的存在

二、解决办法

在网上看的很多这种例子，直接加在标签上，这样也可以，但是如果说很多输入框的话，重复代码带多了，最重要的是不好维护。

// 除了数字都不能输入 
 <el-input v-model="form.feeId" @input="form.feeId = String(form.feeId).replace(/[^\d]/g, '')" />

三、最终方案

1.我这里是对金额类输入框和重量类输入框做了校验

  temp = temp.replace(/^(\-)*(\d+)\.(\d{0,2}).*$/, "$1$2.$3");  // 保留两位小数

  temp = temp.replace(/^(\-)*(\d+)\.(\d{0,3}).*$/, "$1$2.$3");  // 保留三位小数

/**
 * @description: 监听所有输入框操作   // 在main.ts下
 * @param {*} input
 * @param {*} function
 * @return {*}
 */
document.addEventListener('input', function (e: any) {
    // 检查输入框是否有 data-type 属性
    const inputType = e.target.getAttribute('data-type');
    let temp = e.target.value.toString();
    temp = temp.replace(/。/g, "."); // 将中文全角句号替换为英文半角句号
    temp = temp.replace(/[^\d.]/g, ""); // 清除"数字"和"."以外的字符
    temp = temp.replace(/^\./g, ""); // 验证第一个字符是数字
    temp = temp.replace(/\.{2,}/g, ""); // 只保留第一个, 清除多余的
    temp = temp.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); // 只保留第一个小数点
    if (inputType === 'money') {
        temp = temp.replace(/^(\-)*(\d+)\.(\d{0,2}).*$/, "$1$2.$3"); //
        e.target.value = temp
    } else if(inputType === 'weight') {
        temp = temp.replace(/^(\-)*(\d+)\.(\d{0,3}).*$/, "$1$2.$3"); //
        e.target.value = temp
    }
    // 对没有最大长度的进行限制，这个根据后端定义，看自己需求要不要加
    if (e.target.getAttribute('maxlength') === null) {
        e.target.setAttribute('maxlength', '100')  // 限制最长输入100个字符
    }
});

 这里面正则可以根据自己需求进行调整。

2.在组件中通过设置 data-type 属性，进行判断

<el-form-item label="数量（吨）：">
   <el-input v-model="info.quantity" data-type="weight"></el-input>
</el-form-item>
  
<el-form-item label="金额（元）：">
    <el-input v-model="info.amount"  data-type="money"></el-input>
</el-form-item>

实用！没问题！而且维护起来更方便了。