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拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
javascript实现标签切换代码示例
May 22 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
Vue混入mixins滚动触底的方法
Nov 22 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
一个简易需要注册的留言版程序
2006/10/09 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
PHP基本语法总结
2014/09/06 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
js截取函数(indexOf,join等)
2010/09/01 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
原生js实现放大镜
2017/02/20 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
pytyon 带有重复的全排列
2013/08/13 Python
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
Python创建数字列表的示例
2019/11/28 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
广告业务员岗位职责
2014/02/06 职场文书
《新型玻璃》教学反思
2014/04/13 职场文书
品德评语大全
2014/05/05 职场文书
启动仪式策划方案
2014/06/14 职场文书
关于爱国的标语
2014/06/24 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
升学宴祝酒词
2015/08/11 职场文书
Python经常使用的一些内置函数
2022/04/11 Python