最近转岗去做了vue开发,然后使用的UI框架是iView,总体来说iView,elementUI都差不多,内容丰富使用方便,可是可是挖的坑也不少,尤其是有些功能的使用方法介绍不全,一笔带过,需要自己摸索,这不,最近遇到一个匪夷所思的问题。
大家都知道表单校验中最基本的一条就是是否为空的校验。这个官网给出了例子,我们来看下:
ruleValidate: {
name: [
{required: true, message: 'The name cannot be empty', trigger: 'blur'}
],
mail: [
{required: true, message: 'Mailbox cannot be empty', trigger: 'blur'},
{type: 'email', message: 'Incorrect email format', trigger: 'blur'}
],
city: [
{required: true, message: 'Please select the city', trigger: 'change'}
],
gender: [
{required: true, message: 'Please select gender', trigger: 'change'}
],
interest: [
{required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change'},
{type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change'}
],
date: [
{required: true, type: 'date', message: 'Please select the date', trigger: 'change'}
],
time: [
{required: true, type: 'string', message: 'Please select time', trigger: 'change'}
],
desc: [
{required: true, message: 'Please enter a personal introduction', trigger: 'blur'},
{type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur'}
]
}
还算挺清晰的哈,别着急,请听我的问题,如果input里面输入的是数字,而且校验类型type=number
,你猜input
的value
的类型是什么,如果说是number
,那你就太天真了,鬼知道经历了什么,iView
给出的结果是string
,所以当大家在校验数字是否为空的时候,即使输入了内容,也还是会报xxx不能为空
的错误,怎么解决呢,也简单,官方出错了,我自己写一套不就行了吗,嘿嘿,看代码。
const isEmpty = (rule, value, callback) => {
if (value == null || value == undefined || value == "") {
callback(new Error('价格不能为空!'))
} else {
callback();
}
};
ruleValidate: {
basePrice: [
{required: true, message: '基础价格不能为空!', trigger: 'blur', type: 'number', validator: isEmpty},
],
},
其他坑请看后续更新~