vue.js + iview 数字验证

vue.js + iview 数字验证

<Form ref="from" :model="query" :rules="rules" :label-width="128">
	<FormItem label="数值" prop="expectHours">
          <Input placeholder="请输入数值" v-model.number="query.expectHours" type="number">
          </Input>
     </FormItem>
</Form>

关键：v-model要加上修饰符：v-model.number

rules: {
	expectHours: [
          {
              required: true,
              // 此处一定要加type: "number"，type表示验证类型，否则无效
              type: "number", 
              message: "数值不能为空",
              trigger: "blur",
          },
           // 校验该值的最小值不能小于0.5  
          {
            type: "number",
            min: 0.5,
            message: "数值不能少于0.5小时",  
            trigger: "blur",
          },
          // 校验该值的最大值不能大于24
          {
            type: "number",
            max: 24,
            message: "加班时间不能大于24小时",
            trigger: "blur",
          },
          // rule为校验规则，value为用户所输入的值，cb回调函数，cb(new Error('写入校验需要显示的文字'))
          {
            validator: (rule, value, cb) => {
              if (value) {
                if (value % 0.5 !== 0) {
                  return cb(new Error('数值必须为0.5的倍数'))
                }
              }
              // 此处一定要加cb()
              cb()
            },
            trigger: "blur",
          }
        ]
}