如何通过mixins实现elementUI表单的全局验证功能？

本文共计1206个文字，预计阅读时间需要5分钟。

使用ElementUi搭建框架时，全家应考虑如何进行全局验收，避免重复粘贴的繁琐。以下分享个人解决方案：

1. 验收规则： - 功能性测试：确保每个功能按预期工作。 - 性能测试：验证系统在高负载下的表现。 - 安全性测试：检查潜在的安全漏洞。

2. 分析规则： - 确定测试范围：识别所有需要测试的功能点。 - 制定测试计划：安排测试顺序和资源。

3. 一般验收规则： - 是否必填：确认哪些字段是必填的。 - 输入验证：确保输入符合预期格式。

总结：确保全局验收的效率和准确性，关键在于制定合理的测试规则和分析方法。

使用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即可访问

最后

在项目的系统管理模块中可以看到示例代码：

项目地址

项目代码地址

总结

以上所述是小编给大家介绍的使用mixins实现elementUI表单的全局验证的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对自由互联网站的支持！