vue当中的$refs[formName].validate详解

在el-form中，少不了的一步就是表单校验首先通过ref绑定好这个表单

//绑定好组件
<el-form ref="form" :rules="rules" ...>...<el-form-item ref="name" label="名称:" prop="name"><el-input  v-model="form.name"  placeholder="请输入名称"/></el-form-item>
<el-form/>

接下来调用这个方法

this.$refs[form].validate(valid,object()=>{// 这个valid 表示的是验证是否通过输出回是一个布尔类型的值//object 表示的是验证未通过的数据,返回值是一个对象见图1这里就可以做一些回滚啊一些操做,例如回滚 if (valid) {alert('submit!')} else {for (let i in object) {let dom = this.$refs[i];            // if (Object.prototype.toString.call(dom) !== '[object Object]') {　　//这里是针对遍历的情况（多个输入框），取值为数组//   console.log(dom);// }　　　　　　//第一种方法（包含动画效果）dom.$el.scrollIntoView({　　//滚动到指定节点block: 'end',　　　　　//值有start,center,end，nearest，当前显示在视图区域中间behavior: 'smooth'　　　　//值有auto、instant,smooth，缓动动画（当前是慢速的）})}}
})

图1

以上观点仅代表个人观点，如果错误欢迎指正

vue当中的$refs[formName].validate详解相关推荐

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
微信h5登录php,vue实现微信授权登录步骤详解
这次给大家带来vue实现微信授权登录步骤详解,vue实现微信授权登录的注意事项有哪些,下面就是实战案例,一起来看一下. 背景 vue前后端分离开发微信授权场景 app将商品分享到微信朋友圈或者分享给 ...
【Vue路由（router）进一步详解】
Vue路由(router)进一步详解 query属性具体实例代码如下: params属性具体实例代码如下: props属性 replace属性编程式路由导航路由缓存具体代码: 总结本篇文章 ...
数据列表多选 html,Vue多选列表组件深入详解
这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行 ...
vue动画过渡 javascript钩子函数详解
vue动画过渡js钩子函数详解前言 js钩子函数运行时间 js钩子函数的过渡或动画总结结语前言转载请注明出处并附上链接. 本文中,enter(leave)过程指的是beforeEnter.e ...
Vue 深度选择器:deep()与::v-deep详解
Vue 深度选择器:deep()与::v-deep详解在Vue中,::v-deep 和 :deep() 都用于修改CSS选择器的作用域. 区别在于: :deep() 是一个伪类选择器,可以用于将CS ...
【Vue.js 知识量化】vue-router 详解
vue-router 详解认识路由后端路由(了解) 前端路由 URL 的 hash HTML5 的 history 模式(5 种) vue-router 安装和使用 vue-router 路由的默 ...
vue输入框输入触发事件_详解.vue文件中监听input输入事件（oninput）
详解.vue文件中监听input输入事件(oninput) .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变 ...
【Vue.js 知识量化】Vuex 详解
Vuex 详解 Vuex 是什么单界面的状态管理多界面状态管理 Vuex 基本使用 State 单一状态树 Getters Getters 作为参数和传递参数 Mutation Mutation ...

vue当中的$refs[formName].validate详解

vue当中的$refs[formName].validate详解相关推荐

最新文章

热门文章