element多个表单校验的实现


Posted in Javascript onMay 27, 2021

在项目中,经常会遇到表单检验,单个表单检验可查看element的官网文档,里面有详细的介绍。在这里我分享在实际项目中遇到多个表单同时进行校验以及我的解决方法,欢迎大家留言,一起探讨相关技术,请多多指教。

element多个表单校验的实现

这里主要用到 Promise 来解决。

关于Promise方法举个例子来抽象理解:

周末想吃火锅,打电话告诉小A,过来我这打火锅,菜都齐了,就差点海鲜,你来的时候带点。接着打电话找朋友小B,过来我这打火锅,有海鲜,肉少了点,你来的时候带点。在接着打电话找朋友小C:过来我这打火锅,啥菜都有了,差点酒,你来的时候整几瓶。还差一包火锅底料,拿手机打电话,小D啊,来打活个,咋几个都在,我这电炉不太行了,啥都准备好了,你把电炉带过来,顺便带包底料。

吃火锅这个事就成了,美滋滋。

但这个事吧。总不会一直顺利,总有人来不了对吧,来不了这火锅就吃不成了。

其实多个表单验证,就和这差不多,每个表单都询问一遍,如果大家都通过了,美滋滋,假如其中一个验证失败,那对不起,还得告诉用户,填对了再说。

通过Promise,对每个表单执行询问检测,无论结果如果,先进入Promise.all中,等待所有表单询问完毕,如果大家就可以,就触发then,美滋滋。反之,catch中执行失败响应就ok了。
 

const formName = ['tableForm1', 'tableForm2', 'tableForm3']
      const validates = (item) => {
        return new Promise((resolve, reject) => {
          if (!this.$refs[item]) {
            resolve()
            return false
          }
          this.$refs[item].validate((valid) => {
            if (valid) {
              resolve()
            } else {
              reject(new Error('验证不对'))
            }
          })
        })
      }
      Promise.all(formName.map(item => validates(item))).then(() => {
        console.log('成功')
      }).catch(() => {
        console.log('失败')
      })
    }
  }

最后,在这里贴上完整代码:

<div class="home">
    <el-form :model="tableForm1" ref="tableForm1" :rules="rules1" label-width="100px" >
      <el-form-item label="价格" prop="price">
        <el-input v-model.number="tableForm1.price" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>

    <el-form :model="tableForm2" ref="tableForm2" :rules="rules2" label-width="100px" >
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="tableForm2.age" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>

    <el-form :model="tableForm3" ref="tableForm3" :rules="rules3" label-width="100px" >
      <el-form-item label="姓名" prop="name">
        <el-input v-model.number="tableForm3.name" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="submitForm">提交</el-button>
    <el-button @click="resetForm">重置</el-button>
    
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      tableForm1: {
        price: ''
      },
      tableForm2: {
        age: ''
      },
      tableForm3: {
        name: ''
      },
      rules1: {
        price: [{ required: true, message: '价格不能为空', trigger: 'blur' }]
      },
      rules2: {
        age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }]
      },
      rules3: {
        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    resetForm () {
      this.$refs.tableForm1.resetFields()
      this.$refs.tableForm2.resetFields()
      this.$refs.tableForm3.resetFields()
    },
    submitForm () {
      const formName = ['tableForm1', 'tableForm2', 'tableForm3']
      const validates = (item) => {
        return new Promise((resolve, reject) => {
          if (!this.$refs[item]) {
            resolve()
            return false
          }
          this.$refs[item].validate((valid) => {
            if (valid) {
              resolve()
            } else {
              reject(new Error('验证不对'))
            }
          })
        })
      }
      Promise.all(formName.map(item => validates(item))).then(() => {
        console.log('成功')
      }).catch(() => {
        console.log('失败')
      })
    }
  }
}
</script>

到此这篇关于element多个表单校验的实现的文章就介绍到这了,更多相关element 表单校验内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
JavaScript手写数组的常用函数总结
Nov 22 Javascript
springboot+VUE实现登录注册
May 27 #Vue.js
vue+springboot实现登录验证码
vue+spring boot实现校验码功能
May 27 #Vue.js
vue-cropper组件实现图片切割上传
May 27 #Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 #Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
用React Native制作一个简单的游戏引擎
May 27 #Javascript
You might like
Zerg建筑一览
2020/03/14 星际争霸
层叠菜单的动态生成
2006/10/09 PHP
坏狼php学习 计数器实例代码
2008/06/15 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python根据出生日期获得年龄的方法
2015/03/31 Python
python内存管理分析
2015/04/08 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
Django权限机制实现代码详解
2018/02/05 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
python中使用while循环的实例
2019/08/05 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
pytorch标签转onehot形式实例
2020/01/02 Python
python Shapely使用指南详解
2020/02/18 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
django 装饰器 检测登录状态操作
2020/07/02 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
机关作风整顿个人整改措施2014
2014/09/17 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技