我们在使用elementIUI实现表单验证,内容比较多的时候,提示内容会被遮挡,这时候用户不清楚什么情况,还会连续点击提交按钮。这个时候需求来啦:我们需要在表单验证不通过的时候,页面滚动到对应的位置。 了解来需求,那我们来看看如何实现 其实比较简单,下面说一下大致思路: 在表单验证方法validate中,提供了两个参数:是否校验成功,和未通过校验的字段规则。 在需要验证的位置加上ref,需要注意, ...
2021-01-08 14:28 0 715 推荐指数:
最近项目有个下单的过程,需要输入很多信息,每次提交都要往下滑,还要去验证,测试后发现体验也不好,element框架也没提供这种滚动方法, 不过提供了一个验证的方法 validate (两个参数:是否校验成功和未通过校验的字段),于是做了一个验证错误时的位置滚动 ...
1 多个表单的情况 scrollView(object,formname) { for (const i in object) { let dom = this.$refs[formname] // 这里是针对遍历的情况(多个输入框),取值为数组 ...
如上面的代码 1、 标签绑定内容必须通过 :model='form' 绑定,不能使用v-model="form"。(:model是v-bind:model的缩写,本身是属性绑定;v-model是用于表单标签元素相关的数据的双向绑定, v-model 和 :model 的区别 ...
需求:提交表单时,页面定位到第一个校验失败的位置 代码示例: 关键: // 滚动条定位到第一个校验失败的div的位置 locateToErr() { setTimeout(() => { const errorDiv ...
1、警告: 2、原因: 校验必填的值不是form表单的数据(form表单的数据如: ), 导致表单在验证时找不到userName这个值所以一直警告‘userName is required', 所以导致表单验证不通过 ; 提交验证form表单 ...
遇到的问题:表单提交的时候,写了rules,明明验证不通过依然执行了点击事件里面的代码。 这个验证有什么用? 后来 我看elementUI组件才发现,我漏写了几行代码。 methods里面这样写 完美解决遇到的问题,elementui组件库考虑得还是很全面 ...
表单校验失败之后都会有一个class属性.is-error的类名,可以查找到目前第一个错误元素所对应的视图区域,进行定位,验证未通过的表单提示 scrollIntoView介绍https://docs.microsoft.com/zh-cn/office/vba/api ...