### 需求原有的多个模块的表单在**同一个页面**里面一次性输入。现在需求将同一个页面改成**多步多页面**来做展示以及交互。这里主要记录的多步骤校验功能的逻辑。。 #### 改造前的页面结构 ![原功能-1.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1f95e90f37fd4c039129a2f1fd35262f~tplv-k3u1fbpfcp-watermark.image) #### 改造后的页面结构 ![新需求的功能实现.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b5e68a45a6c4cf59906b69c26f5aa15~tplv-k3u1fbpfcp-watermark.image) ### 代码实现分析 #### 将原有的页面页面结构切分成多个form封装成组件 ```

``` #### 各个步骤进行组件封装，并且对组件内部`el-form`的`validate`方法进行二次封装 ``` ``` > 当前以第一步作为例子 #### 每个步骤的方法封装 ``` async checkFirstStep() { try { if (!(await this.$refs.firstForm.validate())) await this.checkFail('第一步填错了！') } catch (e) { return Promise.reject(1) } }, // 以下第二步第三步与第一步类似 async checkSecondStep() { try { if (!(await this.$refs.secondForm.validate())) await this.checkFail('第二步填错了！') } catch (e) { return Promise.reject(2) } } async checkThirdStep() { try { if (!(await this.$refs.thirdForm.validate())) await this.checkFail('第三步填错了！') } catch (e) { return Promise.reject(3) } } // 校验错误走的公共方法 async checkFail(message) { if (message) this.$message.error(message) return Promise.reject() } ``` > const p = Promise.reject(3); > // 等同于 > const p = new Promise((resolve, reject) => reject(3)) > https://es6.ruanyifeng.com/#docs/promise#Promise-reject #### 【下一步】按钮点击校验逻辑 ``` async nextStep() { try { switch (this.step) { case 1: await this.checkFirstStep() break case 2: await this.checkSecondStep() break case 3: await this.checkThirdStep() // 将页面数据带到下一个页面 await this.setNextPageData() break } this.step++ } catch (e) { console.error(e) } }, ``` #### 【创建】按钮功能实现 ``` async confirmTap() { try { // 各个步骤开始校验 await this.checkFirstStep() await this.checkSecondStep() await this.checkThirdStep() // 前几步校验都过了跳到下单页 await this.setOrderDetail() this.step = this.stepList.length } catch (e) { if (typeof e !== 'number') return // 定位到错误页面的相关选项 this.step = e } }, ``` - checkXxxxStep方法中校验验没有通过中封装了一个 reject，同时 reject抛出当前具体步骤 - 在该方法内部 await 来判定校验是否正确 - 如果错误 catch来做具体跳转