实现elementUI表单的全局验证的方法步骤

2020-06-16 05:39:45易采站长站整理

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

验证规则

分析规则

一般验证规则,主要是是否必填,不为空,以及参数类型的验证。 基于这个条件,我们开始找找思路, 单个字段的验证是这样的:


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

循环实现

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

定义数据规则

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

验证的字段名 label
验证的值 value
验证的类型 type
是否必填 required
自定义规则 validator

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


fieldList: [
{label: '账号', value: 'account', type: 'input', required: true, validator: checkAccount},
{label: '密码', value: 'password', type: 'password', required: true, validator: checkPwd},
{label: '昵称', value: 'name', type: 'input', required: true},
{label: '性别', value: 'sex', type: 'select', list: 'sexList', required: true},
{label: '头像', value: 'avatar', type: 'slot', className: 'el-form-block'},
{label: '手机号码', value: 'phone', type: 'input', validator: checkPhone},
{label: '微信', value: 'wechat', type: 'input', validator: checkWechat},
{label: 'QQ', value: 'qq', type: 'input', validator: checkQQ},
{label: '邮箱', value: 'email', type: 'input', validator: checkEmail},
{label: '描述', value: 'desc', type: 'textarea', className: 'el-form-block'},
{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: '', // 邮箱
desc: '', // 描述
status: 1 // *状态: 0:停用,1:启用(默认为1)',
// create_user: '', // 创建人
// create_time: '', // 创建时间
// update_user: '', // 修改人