Posted in Javascript onApril 29, 2019
使用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判断是提示选择不能为空,还是输入不能为空
二:如果字段必填,则根据是否有自定义验证去生成验证规则
三: 字段非必填,有自定义规则生成验证
// 初始化验证数据 _initValidate (formInfo) { const obj = {}, fieldList = formInfo.fieldList // 循环字段列表 for (let item of fieldList) { let 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 }
使用
结合上面的字段设计,我在页面上的使用是这样的,大家可以根据自己的字段设计去修改,大致实现过程是这样的
// mixin中的方法, 初始化字段验证规则 this._initValidate(this.formInfo)
怎么配置到全局
- 通过mixin配置,然后在页面中使用(个人使用的是mixin)
- 配置为全局方法在页面中调用
- 挂在到vue实例上,通过this即可访问
mixins例子
export default { data () { /** * 页面上的可复用的验证规则 */ // 验证号码格式 const CHECK_PHONE = (rule, value, callback) => { let check = this.$validate({label: '号码', value, rules: ['phone']}) if (!check.result) { callback(new Error(check.message)) } else { callback() } } // 验证号码格式以及不能为空 const CHECK_PHONE_NOTNULL = (rule, value, callback) => { let check = this.$validate({label: '号码', value, rules: ['notnull', 'phone']}) if (!check.result) { callback(new Error(check.message)) } else { callback() } } // 检测邮箱格式 const CHECK_EMAIL = (rule, value, callback) => { let check = this.$validate({label: '邮箱', value, rules: ['email']}) if (!check.result) { callback(new Error(check.message)) } else { callback() } } // 检测邮箱格式以及不能为空 const CHECK_EMAIL_NOTNULL = (rule, value, callback) => { let check = this.$validate({label: '邮箱', value, rules: ['notnull', 'email']}) if (!check.result) { callback(new Error(check.message)) } else { callback() } } return { CHECK_PHONE, CHECK_PHONE_NOTNULL, CHECK_EMAIL, CHECK_EMAIL_NOTNULL } }, methods: { // 初始化验证数据 _initValidate (formInfo) { const obj = {}, fieldList = formInfo.fieldList // 循环字段列表 for (let item of fieldList) { let 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 } } }
最后
在项目的系统管理模块中可以看到示例代码:
项目地址
项目代码地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
实现elementUI表单的全局验证的方法步骤
- Author -
zx声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@