element input表单验证数字类型方法大全

是不是常常头疼数字类型的校验，整数，小数，往往无法通过一个rules的type属性搞定，自定义校验又五花八门，是否有一套标准流程呢？

整数校验

整数校验简单，input使用.number修饰符，rules配置type属性即可。

<template>
  <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
    <el-form-item label="短信条数：" prop="sms_count">
          <el-input v-model.number="form.sms_count" placeholder="请输入套餐短信条数"></el-input>
        </el-form-item>
  </el-form>
</template>
<script>
export default {
  data(){
    return {
      form:{
        sms_count:"",
      },
      rules:{
        sms_count:[
          {
             required: true,
             type: "integer",
             message: "请输入短信数量",
             trigger: "blur",
          }
        ]
      }
    }
  }
}
</script>

这样写，有一个缺陷，就是因为声明了整数类型，当内容为空时，.number并不会把空字符转换为数字，他会原样返回，导致这个选项无形中成为了必填，因为在校验是否为整数时，无法通过整数类型校验。

所以，即便我们删除required，这个选项在提交表单时，如果内容为空，无法通过验证。

解决办法：

饿了么框架的表单验证用的async-validator，而async-validator支持一个转换方法，可以在验证前对校验的值做转换，而且这个转换并不会影响到表单绑定的源数据

{
   required: true,
   type: "integer",
   message: "请输入短信数量",
   trigger: "blur",
   transform(value) {
     return value ==="" ? 0 : Number(value);
   },
}

当然，其实还可以简化一下，Number转换空字符的时候，得到的结果是0，所以，如果没有最小值的要求，可以直接这样：

{
   required: true,
   type: "integer",
   message: "请输入短信数量",
   trigger: "blur",
   transform(value) {
     return Number(value);
   },
}

这样，关于整数校验我们就可以完事了，如果有最小值最大值需求，自行设置min和max

小数校验

小数校验我们就不能使用.number修饰符了，他会将小数转为整数，而使用type声明类型为float就可以表示他是一个小数类型校验，但是校验的数据类型还是string，所以我们需要手动转换。

<template>
  <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
    <el-form-item label="短信条数：" prop="sms_count">
          <el-input v-model="form.sms_count" placeholder="请输入套餐短信条数"></el-input>
        </el-form-item>
  </el-form>
</template>
<script>
export default {
  data(){
    return {
      form:{
        sms_count:"",
      },
      rules:{
        sms_count:[
          {
             required: true,
             type: "float",
             message: "请输入短信数量",
             trigger: "blur",
             transform(value) {
               return Number(value);
             },
          }
        ]
      }
    }
  }
}
</script>

配合transform转换成数字就行了，如果这不是一个必填项，去除required也无法通过，因为他需要浮点数，而空字符转为数字得到的是0，所以，如果不是一个必填项，我们还需要这样做：

transform(value) {
   return value === "" ? 0.1 : Number(value);
},

空的时候给0.1，让他蒙混过关即可。

价格验证

价格也是一个数字，但是他有两种情况，一种是整数，一种是浮点数，但是都不能小于0。

这里，我们就只能使用自定义校验了，因为有小数，所以.number不能使用

<template>
  <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
    <el-form-item label="短信条数：" prop="sms_count">
          <el-input v-model="form.sms_count" placeholder="请输入套餐短信条数"></el-input>
        </el-form-item>
  </el-form>
</template>
<script>
export default {
  data(){
    return {
      form:{
        sms_count:"",
      },
      rules:{
        sms_count:[
          { required: true, message: "请输入短信条数", trigger: "blur" },
          {
            transform(value) {
              return Number(value);
            },
            validator(rule, value, callback) {
              if (Number.isFinite(value) && value >= 0) {
                callback();
              } else {
                callback(new Error("请输入不小于0的数字"));
              }
            },
            trigger: "blur",
          }
        ]
      }
    }
  }
}
</script>

这里我自定义校验没有判断是否为空，所以必填校验required单独一条配置数据。

在自定义校验中，我们先transform转为数字，如果不是必填，同样可以通过他蒙混过关。

validator中，我们判断，这个数字如果是一个有限数字；并且不大于或等于0，我们就他通过，其他则报错。

Number.isFinite(value)有限数字是一个什么范围呢？

简单理解为正负值都在Infinity无限值以内，NaN和字符串这些都不算，而Infinity无限并不是真的无限，他实际是有边界的，他的边界已经是js能处理的数字极限了，所以，我们这样判断完全ok。