• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

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);
   },
}

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

小数校验

小数校验我们就不能使用.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。

0
  • 本文分类:vue 项目实战
  • 本文标签:vueelement浮点数整数input表单校验价格
  • 流行热度:已超过 161 人围观了本文
  • 最后更新:2021年04月26日 - 17时31分24秒
  • 发布日期:2021年04月26日 - 17时31分24秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码