zoukankan      html  css  js  c++  java
  • 基于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: /.+/
            }
        ]
    }     
  • 相关阅读:
    java如何导入Excel文件
    C/S框架设计经验小结
    WebClient以POST方式发送Web请求
    如何自动拼接 Update语句,仅Update已修改的字段
    DataGridView如何快速导出Excel
    【转】基于STM32F103内部AD测量电池电压
    【转】stm8 rtc时钟
    【转】NiOS II从EPCQ256的自启动设置
    【转】验收代码寄存器和验收屏蔽寄存器
    【转】eclipse : Type Symbol 'xxx' could not be resolved 解决办法
  • 原文地址:https://www.cnblogs.com/stella1024/p/12176413.html
Copyright © 2011-2022 走看看