ElementUI多个子组件表单的校验管理实现
背景
团风ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!
公司项目中所用到的前端框架是Vue.js + ElementUI,因为项目的业务场景中有很多的大表单,但是ElementUI的表单写法对于表单的拆分和校验其实并不是很友好。最初的项目为了方便,常常把多个表单写在一个.vue组件中,这导致单文件的代码量巨大,逻辑十分复杂。目前为了维护方便,表单的拆分就变得十分重要。
现在做了以下的Demo说明我们的业务场景,父组件是App.vue,该组件中包含了PersonForm.vue和AdsForm.vue这两个子组件(在实际的业务场景中,可能多达10+表单)。【提交】按钮在父组件App.vue中,当点击【提交】按钮后,应该分别校验各个子组件,如果每个子组件都校验成功后再进行提交。
Demo
PersonForm.vue文件
下面的代码是PersonForm.vue组件,该表单包括姓名、年龄、性别。我们使用了PersonForm这个类去实例化组件中的personForm的值。在PersonForm中有个static方法getRule去获取校验方法去获取校验对象,该校验对象是ElementUI要求的写法,会在
PersonForm.vue
男 女
AdsForm.vue文件
下面的代码是AdsForm.vue组件,该表单包括广告名和广告位置。我们使用了AdsForm这个类去实例化组件中的adsForm的值。在AdsForm中有个static方法getRule去获取校验方法去获取校验对象。
AdsForm.vue
validator.js文件
在PersonForm.vue 和 AdsForm.vue中我们导入了validator.js中的校验方法,这些校验方法中封装了对表单属性值的校验规则。该文件中的方法在实际项目中,应该使用策略模式再封装一下。Demo中只有4个方法,就没有再封装来干扰读者理解代码。
// 验证名字 var validateName = (rule, value, callback) => { if(!value) { callback(new Error('名字不能为空')); } else if(/[a-zA-Z]/.test(value)) { callback(new Error('请填写中文名字!')); } else { callback(); } }; // 验证年龄 var validateAge = (rule, value, callback) => { const toNumberVal = Number(value); if ((typeof value === 'string' && value === '') || (value === null)) { callback(new Error('年龄不允许为空')); } else if (isNaN(toNumberVal)) { callback(new Error('年龄为数值类型')); } else if(!(toNumberVal > 0 && toNumberVal <= 120)) { callback(new Error('年龄范围应该大于一岁且小于等于120岁')); } else { callback(); } } // 验证性别 var validateSex = (rule, value, callback) => { if (value === null) { callback(new Error('性别不允许为空')); } { callback(); } } // 验证不为空 var notEmpty = (rule, value, callback) => { if (value === '' || value === null || value === undefined) { callback(new Error('不允许为空')); } else { callback(); } } export { validateName, validateAge, validateSex, notEmpty, }
App.vue
App.vue是父组件,当点击【提交】按钮时,应该调用其ElmentUI的this.$refs[formName].validate方法去验证各个子组件中的表单。但是需要注意的是,该方法是一个异步方法。
所以这里封装了一个getFormPromise去生成Promise对象,并使用Promise.all去并行调用返回最终的校验结果数组。
App.vue
提交
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
当前文章:ElementUI多个子组件表单的校验管理实现
标题链接:http://pwwzsj.com/article/psoshs.html