基于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: /.+/ } ] }
前端菜鸟一枚,习惯记录平时遇到的一些问题和学习笔记,觉得有用的可以点个支持!有问题的也可以加QQ814878176交流哟 : )