一、数字校验
数字校验在网上找了很多种办法,比如使用 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>
实用!没问题!而且维护起来更方便了。