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: /.+/
            }
        ]
    }     
  • 相关阅读:
    利用CSS3中的clac()实现按照屏幕分辨率自适应宽度
    没有被广泛采用的box-sizing属性
    HTML5学习笔记(四):关于表格
    HTML5学习笔记(三):标识文本的语义元素
    浏览器内核及相关
    oracle,如何查看视图结构,获得视图中的字段名称、字段类型、字段长度等。
    存一个工作中常用的类
    将字符串序列化Object格式
    让你的博客不再单调 --博客园设置随机背景图片教程
    新的模板新的开始
  • 原文地址:https://www.cnblogs.com/stella1024/p/12176413.html
Copyright © 2011-2022 走看看