共计 2430 个字符，预计需要花费 7 分钟才能阅读完成。
使用 ElementUi 搭建框架的时候，大家应该都有考虑过怎么做全局验证，毕竟复制粘贴什么的是最烦了，这里分享下个人的解决方法。
验证规则
分析规则
一般验证规则，主要是是否必填，不为空，以及参数类型的验证。基于这个条件，我们开始找找思路, 单个字段的验证是这样的：
name: {
required: 是否必填,
validator: 自定义规则,
message: 失败提示消息 (非自定义时触发),
trigger: 触发方式
}
循环实现
固定的规则。当一个东西固定之后，那必然是可以重复使用的，并且可以快速生成，我们可以用循环来实现它。但是用循环来实现，我们则需要一个数据规则。
定义数据规则
分析下需要的字段，大概就是以下几种，其他的可以根据自身的需求去增加：
验证的字段名 label
验证的值 value
验证的类型 type
是否必填 required
自定义规则 rules
那最终我们得到的是这样一个字段配置列表:
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’
}
实现验证方法
循环字段列表，根据 type 判断是提示选择不能为空，还是输入不能为空
如果字段必填，则根据是否有自定义验证去生成验证规则
字段非必填，有自定义规则生成验证
// 初始化验证数据
_initRules (formInfo) {
const obj = {},
fieldList = formInfo.fieldList
// 循环字段列表
for (let item of fieldList) {
let type = item.type === ‘select’ ? ‘ 选择 ’ : ‘ 输入 ’
if (item.required) {
if (item.rules) {
obj[item.value] = {
required: item.required,
validator: item.rules,
trigger: ‘blur’
}
} else {
obj[item.value] = {
required: item.required,
message: ‘ 请 ’ + type + item.label,
trigger: ‘blur’
}
}
} else if (item.rules) {
obj[item.value] = {
validator: item.rules,
trigger: ‘blur’
}
}
}
formInfo.rules = obj
}
怎么配置到全局
通过 mixin 配置，然后在页面中使用 (个人使用的是 mixin)
配置为全局方法在页面中调用
挂在到 vue 实例上，通过 this 即可访问
最后
在项目的系统管理模块中可以看到示例代码：项目地址项目代码地址