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' }
]
}