vue2表单自定义校验规则判断输入值是否为大于零的数字

应用场景

        我自己是用于表单验证，验证用户输入的办公面积是否合法。所以我对于输入数据的要求就是：数字、大于零。

思路历程

        因为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",
                  },
                ],
            }
    
    }