提供一种嵌套表单的校验姿势
创始人
2025-05-31 18:19:29
0次

文章目录

      • 一、表单校验
        • 1. 代码演示

一、表单校验

表单校验，前端经常遇到的校验场景，可以说，只要有表单的地方基本都少不了。工作中有时还会遇到表单嵌套表单的场景，那这种场景下怎么去校验表单，使得用户拥有很好的体验。

  • 以前的方式：一层一层的校验，先校验最外面一层，然后再校验最里面的一层，不是不行，就是视觉体验上有点拉跨
  • 最近灵感：使用Promise.all的方式，将嵌套的表单，全部整成Promise对象，然后全部执行，返回结果，搭配数组的includes方法，判断是否含有false即可。

1. 代码演示

  • 封装成一个校验方法

    validateAll(){const project = new Promise((resolve) => {this.$refs['project-form'].validate((valid) => {resolve(valid)})})const build = new Promise((resolve) => {this.$refs['build-form'].validate((valid) => {resolve(valid)})})const invitation = new Promise((resolve) => {this.$refs['invitation-form'].validate((valid) => {resolve(valid)})})return Promise.all([project, build, invitation])
}

  • 业务逻辑方法中调用逻辑

    investmentSubmit() {this.validateAll().then(valid => {if (!valid.includes(false)) {// 处理业务逻辑}})
},
词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：go语言入门-一文带你掌握go语言函数

下一篇：javaweb实验室学生考勤签到系统

相关内容

热门资讯

奢侈品“教父”吴越的新任务：上... 本文来源：时代周报 作者：刘婷“中国奢侈品教父”吴越有了新头衔。12月10日，泡泡玛特（09992....
ST摩登：公司股票自11月11... 11月10日消息，ST摩登公告，公司于2024年5月10日收到广东证监局责令改正措施，要求公司在六个...
上海调整家电家居以旧换新政策，... 11月10日消息，从上海市商务委获悉，紧随进博会的步伐，上海家电家居以旧换新嘉年华也在以“展”促“消...
长飞光纤：拟收购El.En.附... 11月10日消息，长飞光纤公告，公司已与El.En. S.p.A.签署《股权收购框架协议》，拟以现金...
市场监管总局发布电热毯等5类产... 11月10日消息，“双十一”来临之际，市场监管总局发布近期受到广泛关注的电热毯、智能坐便器、定制家具...
以太坊突破3200美元，创8月... 11月10日消息，以太坊突破3200美元，创8月以来新高。
王中军被限消，所有股份已被冻结
交银国信总裁将换任 图片来源：摄图网全文共667字，阅读全文约需2分钟余桑将出任交银国信总裁一职，该任职资格尚待监管核准...
科技股低迷美股开启板块轮动，年... 随着本周甲骨文和博通业绩发布，市场对于人工智能成长性的质疑重现，估值风险带来的波动引发了新一轮板块轮...
蜜雪冰城要卖早餐了？雪王又跨界... 说起奶茶巨头，蜜雪冰城一定是绕不过去的名字，通过强大的市场网络和超级洗脑的各种营销，蜜雪冰城在中文互...