基于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: /.+/
        }
    ]
}     
原文地址:https://www.cnblogs.com/stella1024/p/12176413.html