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: /.+/
            }
        ]
    }     
  • 相关阅读:
    iOS 2D绘图 (Quartz2D)之路径(点,直线,虚线,曲线,圆弧,椭圆,矩形)
    iOS 2D绘图 (Quartz 2D) 概述
    HTML 学习笔记 JavaScript(创建对象)
    iOS NSFileManager 使用详解
    iOS 中 const static extern 关键字总结
    Tornado WEB服务器框架 Epoll
    Windows 数据盘自动分区脚本
    跨域请求测试代码-图片视频自动播放
    mail如何在linux中发送邮件,使用163邮箱发信。
    Linux系统CPU频率调整工具使用
  • 原文地址:https://www.cnblogs.com/stella1024/p/12176413.html
Copyright © 2011-2022 走看看