IView的Form表单自定义验证需注意事项

写自定义验证时，除需要Form中的ref、rules、model和FormItem中的prop数据结构的高度对应外，还要注意，在绑定model中的对应prop之前，还需要清理ref中的fields。否则通过validator校验的第二个参数value是不会更新的。

validator写法：

{ validator: (rule, value, callback)=>{console.info(value);if(value.info && value.info.isOverflow){return callback(new Error('内存溢出'));}callback();
}, trigger: 'change' },

全局清理表单

this.$refs.propertiesForm.fields.forEach( (e) =>{e.resetField();
});

或

this.$refs['propertiesForm'].resetFields(); //手动校验前须重置下表单状态。

如果只清理一个表单字段的校验，可如此写：

let isOverflowValidField = this.$refs.propertiesForm.fields.find( (e) =>{return e.prop == 'isOverflow';
});
isOverflowValidField.resetField();

IView的Form表单自定义验证需注意事项相关推荐

layui单选框verify_layui lay-verify form表单自定义验证规则详解
虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪. html: 提交 js: form.verify({ //数组 ...
VUE element-ui之form表单自定义验证11位手机号码（封装验证规则）
步骤: 封装验证规则: export function isvalidPhone(phone) {const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2 ...
element UI 表单自定义验证，css水平且垂直居中方法
element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证首先是element UI 提供的基础 ...
iview form 表单自定义参数验证 validate
需求,使用的是iview框架的Form组件,一般简单input类型数据,使用简单的验证配置就可以达到效果.如官方的写法. iview 表单验证地址 https://www.iviewui.com/c ...
layui的表单——自定义验证规则
最近layui的表单用的比较多,所以整理来一下自定义的验证如下(下面是自己写的例子): layui的官网引入layui之后 html <form action="" cla ...
a链接易混淆与form表单简易验证用法详解
链接可以说遍布互联网,比如你想提供一个可以跳转到百度首页的链接给网友,那么代码如下: <a href="http://www.baidu.com">百度一下,你就知道& ...
ElementUI form表单左侧label对齐注意事项
通过 label-position 属性来改变表单域或标签的位置,可选的值有 top/left/right ,默认的是 right ,lable-position 必须要和 label-width(表 ...
关于element form表单的验证错误提示信息位置没有出现在文本框下的问题
今天带我的大佬碰到一个有意思的坑,现象如图,错误提示没有在文本框下,而是出现在最左边的文字下. 原因:el-form 没有加上 label-width,默认宽度为0,导致验证错误的提示信息直接出现在了 ...
UI组件库Form表单_数字类型验证之坑实现数字框
目录 Input 输入框实现数字框封装使用项目需求 : 使用的饿了么组件库的 input 框 , 但是想要实现用户只能输入数字的功能 , So 看到了数字类型的验证 (缺点 :不能阻止用户输 ...

IView的Form表单自定义验证需注意事项

IView的Form表单自定义验证需注意事项相关推荐

最新文章

热门文章