vue项目中遇到需要输入两位小数时校验通过,并且后面多余的0是可以输入的情况如何处理?
一、需求分析
1.首先要知道需求具体是什么,简单讲就是我们在一个输入框中输入数字,但是这个数字有可能是6位、7位等;输入后需要对数字进行校验并且在输入错误时输入框要有对应的提示。
2.既然要有提示,那么就成了一个表单校验。校验不通过就要callback对应的错误提示;
3.处理方式可以有正则、JS逻辑,本文介绍JS逻辑;
二、相关代码讲解
html
<template>
<el-form :model="showInfo" :rules="rules" ref="showInfo">
<el-form-item prop="money">
<el-input type="text" placeholder v-model="money" maxlength="6"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data(){
var numberRuleAllowPoint = (rule, value, callback) => {
value = value + "";
if (value.replace(/\s/g, "") == "") {
callback();
}
if (typeof (value * 1) != "number" || isNaN(value)) {
callback(new Error("请输入正确的数字"));
}
if (value < 0) {
callback(new Error("请输入正确的数字"));
}
if (value.indexOf(".") != -1) {
if (value.split(".")[1].indexOf(".") != -1) {
callback(new Error("请输入正确的数字"));
} else if (value.split(".")[1] * 1 >= 0) {
if ((value.split(".")[1] + "").length > 2) {
if ((value.split(".")[1]+"").substring(2) * 1 > 0) {
callback(new Error("只允许输入两位小数以内的数字"));
}
}
} else {
callback(new Error("请输入正确的数字"));
}
}
callback();
};
return {
showInfo:{
money:""
},
rules:{
money: [{ validator: numberRuleAllowPoint, trigger: 'blur' }, { required: true, message: "请输入金额", trigger: "blur" }],
}
}
}
};
</script>
三、简单讲解
1.首先绑定就不说了,应该看得懂;主要讲一下自定义校验,也就是自己定义一个方法来返回校验结果;也就是JS中的callback()方法。
2.讲一下判断逻辑,主要运用split()和substring()方法;原理很简单,就是判断小数点后的数字是否是两位数如果是,就直接不管,如果不是那么从第三位开始往后的数字乘以1如果大于0证明小数点后面的是三位小数,反之用户两位小数后的数字都为0;有一个小细节就是要注意用户输入两个以上包括两个的小数点。
3.基本就是这样,一个小知识点。