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 相关文章推荐
使用javascript实现Iframe自适应高度
Dec 24 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
详解webpack 入门与解析
Apr 09 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 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
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
JQuery节点元素属性操作方法
2015/06/11 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
Python的Django框架安装全攻略
2015/07/15 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
python通过zabbix api获取主机
2018/09/17 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
人力资源管理专业应届生求职信
2014/04/24 职场文书
英语故事演讲稿
2014/04/29 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
严以律己学习心得体会
2016/01/13 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python