Vee-validate 父组件获取子组件表单校验结果的实例代码


Posted in Javascript onMay 20, 2019

vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息。它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开箱即用,还支持自定义正则表达式。而且支持 40 多种语言,对本地化、多语言支持非常友好。

国内饿了么团队开源项目 Element UI 就用到了 vee-validate

vee-validate官网:https://baianat.github.io/vee-validate/

使用方法

可查看官网文档(https://baianat.github.io/vee-validate/)或者查看这一篇文章(https://blog.givebest.cn/javascript/2019/04/20/vue.js-nuxt.js-use-vee-validate.html)。

组件内使用 Vee-validate

子组件

<template>
 <div>
 <input
  placeholder="请输入姓名"
  v-model="username"
  name="username"
  v-validate="'required'"
  :error-message="errors.first('username')"
 />
 </div>
</template>

<script>
export default {
 name: "Username",
 data() {
 return {
  username: ''
 }
 },
 methods: {
 // 表单校验
 validateForm() {
  return this.$validator.validateAll();
 },
 }
};
</script>

父组件

<template>
 <div>
 <Username ref="usernameComponent" />
 <Password ref="passwordComponent" />

 <div>
  <button @click="onSubmit">提交校验</button>
 </div>
 </div>
</template>

<script>
import Username from "~/components/username.vue"
import Password from "~/components/password.vue"

export default {
 components: {
 Username,
 Password
 },
 data() {
 return {}
 },
 methods: {
 onSubmit (e) {
  e.preventDefault() // 阻止默认事件

  // 父组件触发子组件校验,并通过 Promise 返回值
  let vf1 = this.$refs.usernameComponent.validateForm()
  let vf2 = this.$refs.passwordComponent.validateForm()

  // 提交表单前,校验所有子组件,全部通过才允许下面操作
  Promise.all([vf1, vf2]).then(result => {
  // 有一个组件未通过,就提示错误信息
  if (result.indexOf(false) > -1) {
   console.log("全部校验未通过")
   return
  }

  // 校验全部通过处理
  console.log("全部校验通过")
  })
 },
 }
};
</script>

总结

其实组件内使用 Vee-validate 校验很方便,主要问题可能是父组件怎么触发子组件内的校验,并获取校验结果。这里用到 Vue.js 里的 ref 特性,给子组件赋值一个 ID 引用,然后就可以使用 this.$refs.childComponent 获得子组件实例引用,再分别调起子组件写好的校验方法,如:

/**
父组件触发子组件校验,并通过 Promise 返回值
*/
let vf1 = this.$refs.usernameComponent.validateForm() // 父组件调用 usernameComponent 组件里的 validateForm 方法
let vf2 = this.$refs.passwordComponent.validateForm() // 父组件调用 passwordComponent 组件里的 validateForm 方法

然后通过 Promise.all 获取全部子组件校验结果后,再根据结果来判断,是否全部通过,分别做出不同处理。

// 提交表单前,校验所有子组件,全部通过才允许下面操作
Promise.all([vf1, vf2]).then(result => {
 // 有一个组件未通过,就提示错误信息
 if (result.indexOf(false) > -1) {
 console.log("全部校验未通过")
 return
 }

 // 校验全部通过处理
 console.log("全部校验通过")
})

总结

以上所述是小编给大家介绍的Vee-validate 父组件获取子组件表单校验结果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
告诉大家什么是JSON
Jun 10 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
实例分析javascript中的异步
Jun 02 Javascript
React如何实现浏览器打印部分内容详析
May 19 #Javascript
koa-router路由参数和前端路由的结合详解
May 19 #Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 #Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 #Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 #Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 #Javascript
vue+高德地图写地图选址组件的方法
May 18 #Javascript
You might like
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
php 特殊字符处理函数
2008/09/05 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
深入Python解释器理解Python中的字节码
2015/04/01 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
对pandas中to_dict的用法详解
2018/06/05 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
Python实现TCP通信的示例代码
2019/09/09 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
前台文员岗位职责及工作流程
2013/11/19 职场文书
医院标语大全
2014/06/23 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
少年犯观后感
2015/06/11 职场文书
军训通讯稿范文
2015/07/18 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers