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_12_执行模型浅析
Oct 18 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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
使用swoole扩展php websocket示例
2014/02/13 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
Vue3为什么这么快
2020/09/23 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
如何用python整理附件
2018/05/13 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
深入浅析Python代码规范性检测
2020/07/31 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
几款好用的python工具库(小结)
2020/10/20 Python
为数据库创建索引都需要注意些什么
2012/07/17 面试题
毕业生多媒体设计求职信
2013/10/12 职场文书
法定授权委托证明书
2014/09/27 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
体育个人工作总结
2015/02/09 职场文书
医院志愿者活动总结
2015/05/06 职场文书
英语演讲开场白
2015/05/29 职场文书
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python