vue2表单自定义校验规则判断输入值是否为大于零的数字
2023-12-28 17:38:12
应用场景
? ? ? ? 我自己是用于表单验证,验证用户输入的办公面积是否合法。所以我对于输入数据的要求就是:数字、大于零。
思路历程
? ? ? ? 因为element-ui没有现成的验证规则可用,所以我准备自己定义一个验证规则函数。然后对输入的值用typeof来判断,结果发现无论输入什么,全为string!!究其原因,是因为vue中表单中读入的值默认为string(不管你输入的是不是number,全部转化为string)。
//自定义验证函数
const ValidFirmArea = (rule, value, callback) => {
console.log(typeof value);//string
};
rules:{
firmArea: [//办公面积
{
validator: ValidFirmArea,
trigger: "blur",
},
}
? ? ? ? 好吧,既然是这样的,我就把传过来的值转化为Number
//自定义验证函数
const ValidFirmArea = (rule, value, callback) => {
value=Number(value)//如果value是数字类型的字符(例如:'12'),那么转化过后是number,如果是非数字为NaN
console.log(typeof value);
};
看似仿佛解决了问题,可以区分number和非number,但是?!!让我们看看下面的例子
console.log(typeof 12)//number
console.log(typeof NaN)//number
NaN用typeof检测出来也是number,那就区分不出了
好的我又采用isNaN来区分NaN和number
根据上图来看,他是可以区分的,所以问题解决!
完整代码
<!-- 办公面积(单位:平方米)-->
<el-descriptions-item span="2">
<template slot="label">
<div class="text-center">办公面积</div>
</template>
<el-form-item prop="firmArea">
<el-input
style="width: 20%"
v-model="basicInfo.firmArea"
></el-input
>平方米
</el-form-item>
</el-descriptions-item>
data() {
const ValidFirmArea = (rule, value, callback) => {
// console.log(typeof value);
if (value == 0) {
callback(new Error("办公面积不能为空或0"));
} else if (value < 0) {
callback(new Error("输入不能为负数"));
} else {
value = Number(value);
if (isNaN(value)) {
callback(new Error("输入必须为纯数字"));
}
callback();
}
};
return {
rules:{
firmArea: [
{
validator: ValidFirmArea,
trigger: "blur",
},
],
}
}
文章来源:https://blog.csdn.net/qq_69223185/article/details/135205128
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!