ElementUI多个子组件表单的校验管理实现

2023-08-09 17:28:04 203

背景

公司项目中所用到的前端框架是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要求的写法，会在的rules中定义。

AdsForm.vue文件

下面的代码是AdsForm.vue组件，该表单包括广告名和广告位置。我们使用了AdsForm这个类去实例化组件中的adsForm的值。在AdsForm中有个static方法getRule去获取校验方法去获取校验对象。

validator.js文件

在PersonForm.vue和AdsForm.vue中我们导入了validator.js中的校验方法，这些校验方法中封装了对表单属性值的校验规则。该文件中的方法在实际项目中，应该使用策略模式再封装一下。Demo中只有4个方法，就没有再封装来干扰读者理解代码。

//验证名字
varvalidateName=(rule,value,callback)=>{
if(!value){
callback(newError('名字不能为空'));
}elseif(/[a-zA-Z]/.test(value)){
callback(newError('请填写中文名字！'));
}else{
callback();
}
};

//验证年龄
varvalidateAge=(rule,value,callback)=>{
consttoNumberVal=Number(value);
if((typeofvalue==='string'&&value==='')||(value===null)){
callback(newError('年龄不允许为空'));
}elseif(isNaN(toNumberVal)){
callback(newError('年龄为数值类型'));
}elseif(!(toNumberVal>0&&toNumberVal<=120)){
callback(newError('年龄范围应该大于一岁且小于等于120岁'));
}else{
callback();
}
}

//验证性别
varvalidateSex=(rule,value,callback)=>{
if(value===null){
callback(newError('性别不允许为空'));
}{
callback();
}
}

//验证不为空
varnotEmpty=(rule,value,callback)=>{
if(value===''||value===null||value===undefined){
callback(newError('不允许为空'));
}else{
callback();
}
}

export{
validateName,
validateAge,
validateSex,
notEmpty,
}

App.vue

App.vue是父组件，当点击【提交】按钮时，应该调用其ElmentUI的this.$refs[formName].validate方法去验证各个子组件中的表单。但是需要注意的是，该方法是一个异步方法。

所以这里封装了一个getFormPromise去生成Promise对象，并使用Promise.all去并行调用返回最终的校验结果数组。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

ElementUI多个子组件表单的校验管理实现

PersonForm.vue

AdsForm.vue

App.vue

热门推荐

随机推荐