Vue 父子组件表单同步校验
子组件代码
// 子组件
validateForm() {
return new Promise((resolve, reject) => {
this.$refs.contractBaseRef.validate((valid) => {
if (valid) {
resolve(this.getFormData())
} else {
this.$message.error('请完成必填项输入!')
resolve(false)
}
})
})
子组件代码
// 父组件
<template>
<contract-base-edit ref="outBaseInfoRef" />
</template>
<script>
// methods
this.$refs['outBaseInfoRef'].validateForm().then(res => {
console.info('res out', res)
})
</script>
Vue 父子组件表单同步校验的更多相关文章
- vue中的表单异步校验方法封装
在vue项目的开发中,表单的验证必不可少,在开发的过程中,用的是vue+iview的一套,我们知道iview的表单验证是基于async-validator,对于async-validator不熟悉的可 ...
- vue中form 表单常用校验封装(async-validator)
新建一个js校验文件validate.js export const regular = { // 验证自然数 naturalNumber: /^(([0-9]*[1-9][0-9]*)|(0+))$ ...
- vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
- vue父子组件状态同步的最佳方式续章(v-model篇)
大家好!我是木瓜太香!一名前端工程师,之前写过一篇<vue父子组件状态同步的最佳方式>,这篇文章描述了大多数情况下的父子组件同步的最佳方式,也是被开源中国官方推荐了,在这里表示感谢! 这次 ...
- vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象合并到总的对象,再提交
vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...
- vue父子组件通信高级用法
vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div ...
- 【VUE】3.表单操作
1. Form组件渲染 1. components -> 新增组件Form.vue <template> <div>表单验证</div> </templ ...
- elementui 多组件表单验证
最近在做管理后台,vue2.0基于elementui框架进行开发. elementui的api中表单验证都是单个vue文件的验证.而我的保存按钮放在了父组件了,验证对象为三个子组件我的灵机一动 想 ...
- 【Vue】强化表单的9个Vue输入库
一个设计不当的表单可能会使用户远离你的网站.幸运的是,对Vue开发者,有大量可用的Vue输入库让你轻松整理表单. 拥有直观而且对用户友好的表单有诸多好处,比如: 更高的转化率 更好的用户体验 更专业的 ...
随机推荐
- Python Ethical Hacking - VULNERABILITY SCANNER(4)
Extracting & Submitting Forms Automatically Target website:http://10.0.0.45/dvwa/vulnerabilities ...
- 线性dp 之 奶牛渡河
题目描述 Farmer John以及他的N(1 <= N <= 2,500)头奶牛打算过一条河,但他们所有的渡河工具,仅仅是一个木筏. 由于奶牛不会划船,在整个渡河过程中,FJ必须始终在木 ...
- Vue开发者必会的基础知识盘点
你会Vue吗,你看以下知识点你掌握了多少?实际工作中是否运用的得心应手?如果是,那么恭喜你! Vue中的数据和DOM已经被关联起来,所有的东西都是响应式的.注意我们不再和HTML直接交互.一个Vue应 ...
- 哈夫曼编码+python实现
关于哈夫曼树怎么构建的.哈夫曼编码怎么求,请参考 哈夫曼树及python实现 这些基础的东西就不在这里阐述了,本文直接上代码. 参考链接:哈夫曼树的 Python 实现 哈夫曼树的构建和编码 ''' ...
- python多进程之multiprocessing
什么是多进程? 简单的理解:单板上运行的一个程序就是一个进程.进程是操作系统分配资源的最小单位,不同的进程之间资源不共享,进程间通信需要使用特定的方式.python提供了自带的multiprocess ...
- Teambition如何使用二次验证码/虚拟MFA/两步验证/谷歌验证器?
一般点账户名——设置——安全设置中开通虚拟MFA两步验证 具体步骤见链接 Teambition如何使用二次验证码/虚拟MFA/两步验证/谷歌验证器? 二次验证码小程序于谷歌身份验证器APP的优势 1 ...
- .net core https 双向验证
文章来自:https://www.cnblogs.com/axzxs2001/p/10070562.html 关于https双向认证的知识可先行google,这时矸接代码. 为了双向认证,我们首先得准 ...
- 【Nginx】并发量太高,Nginx扛不住?这次我错怪Nginx了!!
写在前面 最近,在服务器上搭建了一套压测环境,不为别的,就为压测下Nginx的性能,到底有没有传说中的那么牛逼!具体环境为:11台虚拟机,全部安装CentOS 6.8 64位操作系统,1台安装部署Ng ...
- ES的集群原理
文章转载自:https://www.cnblogs.com/soft2018/p/10213266.html 一.ES集群原理 查看集群健康状况:URL+ /GET _cat/health (1).E ...
- Python灰帽子:黑客与逆向工程师的Python编程之道PDF高清完整版免费下载|百度云盘
百度云盘免费下载:Python灰帽子:黑客与逆向工程师的Python编程之道PDF高清完整版免费下载 提取码:8nki 目录 · · · · · · 第1章 搭建开发环境 11.1 操作系统要求 1 ...