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