使用mixins实现elementUI表单全局验证的解决方法

使用ElementUi搭建框架的时候，大家应该都有考虑过怎么做全局验证，毕竟复制粘贴什么的是最烦了，这里分享下个人的解决方法。

验证规则
分析规则

一般验证规则，主要是是否必填，不为空，以及参数类型的验证。

基于这个条件，我们开始找找思路, 单个字段的验证是这样的：

name: { required: 是否必填, validator: 自定义规则, message: 失败提示消息(非自定义时触发), trigger: 触发方式}

循环实现

固定的规则。当一个东西固定之后，那必然是可以重复使用的，并且可以快速生成，我们可以用循环来实现它。

但是用循环来实现，我们则需要一个数据规则。

定义数据规则

分析下需要的字段，大概就是以下几种，其他的可以根据自身的需求去增加：

那最终我们得到的是这样一个字段配置列表:

fieldList: [   {label: '账号', value: 'account', type: 'input', required: true},   {label: '密码', value: 'password', type: 'password', required: true},   {label: '昵称', value: 'name', type: 'input', required: true},   {label: '性别', value: 'sex', type: 'select', list: 'sexList', required: true},   {label: '头像', value: 'avatar', type: 'input'},   {label: '手机号码', value: 'phone', type: 'input'},   {label: '微信', value: 'wechat', type: 'input'},   {label: 'QQ', value: 'qq', type: 'input'},   {label: '邮箱', value: 'email', type: 'input'},   {label: '状态', value: 'status', type: 'select', list: 'statusList', required: true}  ]

form完整的字段配置建议参考：

 // 表单相关  formInfo: {  ref: null,  data: {   id: '', // *唯一ID   account: '', // *用户账号   password: '', // *用户密码   name: '', // *用户昵称   type: 2, // *用户类型: 0: 手机注册 1: 论坛注册 2: 管理平台添加   sex: 0, // *性别: 0:男 1:女   avatar: '', // 头像   phone: '', // 手机号码   wechat: '', // 微信   qq: '', // qq   email: '', // 邮箱   status: 1 // *状态: 0：停用，1：启用(默认为1)',   // create_user: '', // 创建人   // create_time: '', // 创建时间   // update_user: '', // 修改人   // update_time: '' // 修改时间  },  fieldList: [   {label: '账号', value: 'account', type: 'input', required: true},   {label: '密码', value: 'password', type: 'password', required: true},   {label: '昵称', value: 'name', type: 'input', required: true},   {label: '性别', value: 'sex', type: 'select', list: 'sexList', required: true},   {label: '头像', value: 'avatar', type: 'input'},   {label: '手机号码', value: 'phone', type: 'input'},   {label: '微信', value: 'wechat', type: 'input'},   {label: 'QQ', value: 'qq', type: 'input'},   {label: '邮箱', value: 'email', type: 'input'},   {label: '状态', value: 'status', type: 'select', list: 'statusList', required: true}  ],  rules: {},  labelWidth: '120px'  }