基於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: /.+/
        }
    ]
}