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实现读取txt文档的脚本
Jul 20 Javascript
javascript 文档的编码问题解决
Mar 01 Javascript
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 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
什么是短波收听SWL
2021/03/01 无线电
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
php实现倒计时效果
2015/12/19 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Python手机号码归属地查询代码
2016/05/04 Python
Python的re模块正则表达式操作
2016/05/25 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
python实现文本界面网络聊天室
2018/12/12 Python
Python 函数返回值的示例代码
2019/03/11 Python
Python占用的内存优化教程
2019/07/28 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
Python页面加载的等待方式总结
2021/02/28 Python
人力资源主管的岗位职责
2014/03/15 职场文书
有趣的广告词
2014/03/18 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
单位委托书格式范本
2014/09/29 职场文书
2014年环保工作总结
2014/11/26 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
2019年大学推荐信
2019/06/24 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书