基于iView的async-validator的表单验证输入框只能输入number类型无效

问题：直接添加type:'number',输入框输入数字，验证不通过（输入框的value为字符串，不是number，所以不通过）

<FormItem label="" :prop="'quantityQuotaList.' + index + '.planData'"
    :rules="{required: true, type: 'number', trigger: 'blur',pattern: /.+/}">
    <Input class="ivu-input-unit transparent w-80p-i" v-model="item.planData" placeholder="请输入"></Input>
</FormItem>

输入了数字，标识不通过

 

 

 

解决：验证前先转为数值型  transform:(value) => $options.filters.formValidateFun(value,'number')

<FormItem label="" :prop="'quantityQuotaList.' + index + '.planData'"
    :rules="{required: true, type: 'number', trigger: 'blur', transform:(value) => $options.filters.formValidateFun(value,'number'),pattern: /.+/}">
    <Input class="ivu-input-unit transparent w-80p-i" v-model="item.planData" placeholder="请输入"></Input>
</FormItem>

转换方法：

/**
 * 表单输入框返回值转换（如验证数值，需要将字符串转为数值，再用于表单规则验证）
 * this.$options.filters.formValidateFun(value,type);
 * @param value 原始值
 */
Vue.filter('formValidateFun', (value,type) => {
    value = (value+"").replace(/(^\s*)|(\s*$)/g, "");   // 先去除前后空格，排除都是空格的情况
    switch(type) {
        case "number":
            value = value || value===0 ? Number(value) : "";
            break;
    }
    return value;
});

 

因为上面的代码段是实际开发中抽取出来的，所以比较复杂乱，所以下面整理了个最基础版本：

<FormItem label="" prop="prjMoney">
     <Input class="ivu-input-unit transparent" v-model="formItem.prjMoney" placeholder="请输入"></Input>
</FormItem>


formItem: {
    prjMoney: ""
},
ruleValidate: {
    prjMoney: [
        { 
            required: true, 
            type: 'number', 
            trigger: 'blur', 
            transform:(value) => {
                value = (value+"").replace(/(^\s*)|(\s*$)/g, "");  // 先去除前后空格
                return  value || value===0 ? Number(value) : "";  // 转为数字
            },
            pattern: /.+/
        }
    ]
}