使用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: '', // 修改人
// update_time: '' // 修改时间
},
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}
],
rules: {},
labelWidth: '120px'
}
复制代码
实现验证方法
- 一: 循环字段列表,根据type判断是提示选择不能为空,还是输入不能为空
- 二:如果字段必填,则根据是否有自定义验证去生成验证规则
- 三: 字段非必填,有自定义规则生成验证
export default (fieldList) => {
const obj = {}
// 循环字段列表
for (const item of fieldList) {
const type = item.type === 'select' ? '选择' : '输入'
if (item.required) {
if (item.validator) {
obj[item.value] = {
required: item.required,
validator: item.validator,
trigger: 'blur'
}
} else {
obj[item.value] = {
required: item.required,
message: '请' + type + item.label,
trigger: 'blur'
}
}
} else if (item.validator) {
obj[item.value] = {
validator: item.validator,
trigger: 'blur'
}
}
}
// formInfo.rules = obj
return obj
}
复制代码
使用
结合上面的字段设计,我在页面上的使用是这样的,大家可以根据自己的字段设计去修改,大致实现过程是这样的, 将初始化规则挂在了全局,Vue.prototype.$initRules
// 初始化验证
initRules () {
const formInfo = this.formInfo
formInfo.rules = this.$initRules(formInfo.fieldList)
}
复制代码
怎么配置到全局
- 通过mixin配置,然后在页面中使用
- 配置为全局方法在页面中调用
- 挂在到vue实例上,通过this即可访问(之前使用的是mixin, 现在将方法挂在了this上)
最后
在项目的系统管理模块中可以看到示例代码:
如果没有自己的验证函数,这个或许可以帮到你: