基于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;
});

猜你喜欢

转载自www.cnblogs.com/stella1024/p/12176413.html