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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。