iview同时验证多个表单问题总结
更新时间：2018年09月29日 14:58:01 作者：Amanda_wmy
这篇文章主要介绍了iview同时验证多个表单问题总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
iview验证一个表单问题：
在上一篇文章中总结了iview表单验证的问题。其实有两种写法：在点击验证时，这样写时，注意在前面的方法中将要验证的form表单加进去。
<Form ref="addAreaForm" :model="addAreaForm" :rules="ruleValidate" :label-width="120"></Form>
//点击确认按钮
<Button type='primary' @click='addAreaOK("addAreaForm")'>确定</Button>
addAreaOK(name){
this.$refs[name].validate((valid)=>{
if (valid){
alert('验证成功')
}
})
}
还有一种写法：保存按钮不传form表单，在验证时直接this.$refs.addpurchaseForm.validate
<Button type="primary" @click="handleSubmit">保存</Button>
this.$refs.addpurchaseForm.validate((valid) => {
// console.log(valid)
if (valid) {
alert('验证成功')
}
}）
iview验证多个表单问题：在多表单验证时，让页面中的两个form都通过校验才能保存。解决方法就是:先验证第一个，在第一个验证通过得里面，验证第二个。
this.$refs.addpurchaseForm.validate((valid) => {
// console.log(valid) //第一层验证第一个表单
if (valid) {
this.$refs.gasDataForm.validate((valid) => {
// console.log(valid)//第二层验证第二个表单
if(valid){
alert('验证成功')
}
})
}
})
补充：iview 表单number验证
将原来的number转为string来处理，并且在验证中判断是否是整数。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
Vant中List组件immediate-check=false无效的解决
这篇文章主要介绍了Vant中List组件immediate-check=false无效的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
在本篇文章里小编给大家整理的是关于Vue路由前后端设计的知识点总结内容，需要的朋友们参考下。2019-08-08
今天小编就为大家分享一篇Vue修改项目启动端口号方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了Vue-ANTD表单输入中自定义校验一些正则表达式规则介绍,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了vue数据操作之点击事件实现num加减功能,结合实例形式分析了vue.js事件响应及数值运算相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了Vue组件复用和扩展，对vue感兴趣的同学，可以参考下2021-05-05
这篇文章主要给大家介绍了关于vue使用i18n如何实现国际化的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
这篇文章主要介绍了vue 路由守卫(导航守卫)及其具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
我们平时经常做的是上传文件,下面这篇文章主要给大家介绍了关于vue项目中实现多文件上传功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
Vue-router结合transition实现app前进后退动画切换效果的实例
下面小编就为大家带来一篇Vue-router结合transition实现app前进后退动画切换效果的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
最新评论