iview 实现数字验证

1。直接使用number类型或者是在验证的时候给个type=’number’不能实现页面对0的验证

   <FormItem label="Age" prop="age">
            <Input  v-model="formCustom.age" number></Input>
        </FormItem>

         const validateAge = (rule, value, callback) => {
            // 模拟异步验证效果
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字'));
                } else {        
                        callback();
                }
        };

                    age: [
                      { required: true,type:'number',message:'年龄不能为空',trigger: 'blur'},
                      { validator: validateAge,trigger: 'blur' }
                    ]

直接这样不能校验空 ，空的时候是可以成功提交的
所以参考https://www.jianshu.com/p/5f9300437038

  <FormItem label="Age" prop="age">
            <Input type="text"  v-model="formCustom.age"></Input>
        </FormItem>

首先将类型转换为text 这样可以直接验证必输项
age: [
{ required: true,message:’年龄不能为空’,trigger: ‘blur’}
]
然后将通过数字整数验证的方法实现是否是数字的验证
1、字符串转化为数字

2、Number.isInteger()es6写法判断是否为整数
const validateAge = (rule, value, callback) => {
// 模拟异步验证效果 这里value有可能是字符串 添加一个+号将字符串转化为数字这样
if (!Number.isInteger(+value)) {
callback(new Error(‘请输入数字’));
} else {
callback();
}
};终结果

  <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
 <FormItem label="Age" prop="age">
            <Input type="text"  v-model="formCustom.age"></Input>
        </FormItem>
   </Form>

//这不一般写到data里面或者是需要用到这个常量的地方

  const validateAge = (rule, value, callback) => {
                    if (!Number.isInteger(+value)) {
                        callback(new Error('请输入数字'));
                    } else {        
                            callback();
                    }
            };

   ruleCustom: {
                age: [
                  { required: true,message:'年龄不能为空',trigger: 'blur'},
                  { validator: validateAge,trigger: 'blur' }
                ]
            }