elementui 按钮 表单_ElementUI多个子组件表单的校验管理实现

背景

公司项目中所用到的前端框架是Vue.js + ElementUI，因为项目的业务场景中有很多的大表单，但是ElementUI的表单写法对于表单的拆分和校验其实并不是很友好。最初的项目为了方便，常常把多个表单写在一个.vue组件中，这导致单文件的代码量巨大，逻辑十分复杂。目前为了维护方便，表单的拆分就变得十分重要。

现在做了以下的Demo说明我们的业务场景，父组件是App.vue，该组件中包含了PersonForm.vue和AdsForm.vue这两个子组件(在实际的业务场景中，可能多达10+表单)。【提交】按钮在父组件App.vue中，当点击【提交】按钮后，应该分别校验各个子组件，如果每个子组件都校验成功后再进行提交。

Demo

PersonForm.vue文件

下面的代码是PersonForm.vue组件，该表单包括姓名、年龄、性别。我们使用了PersonForm这个类去实例化组件中的personForm的值。在PersonForm中有个static方法getRule去获取校验方法去获取校验对象，该校验对象是ElementUI要求的写法，会在的rules中定义。

PersonForm.vue

男

女

import {validateName, validateAge, validateSex } from '@/lib/validator.js';

// PersonForm的类

class PersonForm {

constructor() {

this.name = '';

this.age = null;

this.sex = null;

}

static getRule() {

return {

name: [{ validator: validateName, trigger: 'blur' }],

age: [{ validator: validateAge, trigger: 'blur' }],

sex: [{valida