业务场景:

1、有一个组别集合,每一个小组别对象里面有一个数据集合,需要循环去校验每个不同组里的数据(不同组合因为一些特殊属性不能合并到一个组里),全都符合就通过验证,去处理后续业务。
2、现在,在校验规则方法里对一个集合里的每一条数据进行强校验和弱校验,弱校验需要在提升框放入确定的操作按钮,允许通过,再循环到下一条数据的验证。

代码分析

1、涉及到组别集合的循环、组别内部数据的循环,循环套循环
2、this.$confirm的待处理问题,怎么让循环卡住,等待处理后再放行

存在问题:

循环调用校验方法,检验方法在弹出待确定按钮时,循环依旧在往下执行,没有等点击确定后再进行下一个循环,异步问题导致获取不到准确的校验结果。

代码处理:

关键处理:
async … await
for (… of …)
return new Promise((resolve, reject) => {})
const verifyFormData = async (index, fData) => {})

//提交数据
async submit() {
    //待验证数据为空直接通过
	if (this.setData.tData?.length > 0) {
	    //需要验证的组
		let rulesData = this.setData.ruleSetData.filter(t => t.state == '1');
		if (rulesData.length > 0) {
			let ok = true;
			let results= []; // 存储每个数据验证结果的数组
			for (let item of rulesData) {
			    //调用校验方法
				let result = await this.takeRulesVerify(item);
				results.push(result);
				if (results.length === rulesData.length) {
					// 最终判断
					if (results.every((result) => result)) {
						 //数据全都验证通过
						 //执行后续业务
					}
				}
			}
		}
	}else{
	   //无数据待验证直接通过
	   //执行后续业务
	}
},

//校验规则方法
async takeRulesVerify(setData) {
	// start 
	return new Promise((resolve, reject) => {
		// 使用本表单的校验
		let num = 0; // 初始化变量num,用于计数通过验证的表单数据
		const verifyFormData = async (index, fData) => {
			if (index < fData.length) {
				// 处理fData校验业务业务 start
				......
				let str="xxxxxxx = xxxxxx"
				// 处理校验业务业务 end
				if (!eval(str)) {
				    //验证通过
					num++; // 如果表达式为假,增加num计数
					// 继续下一个验证规则
					verifyFormData(index + 1, formData);
				} else {
				    //验证未通过,需要进入强弱验证机制
					// 如果表达式为真,显示确认对话框(验证规则 只有真的时候才会触发,比如a>b了)
					// strengthValue: 0强校验  1弱校验
					let remark = el.reminder ? el.reminder : '校验不通过'
					if (settingsData.strengthValue == '0') {
						this.$confirm(remark, '提示', {
							customClass: 'costomGenerated',
							showCancelButton: true,
							showConfirmButton: false,
							type: 'warning',
							confirmButtonClass: 'press_button',
							cancelButtonClass: 'border_buttom'
						});
					} else {
						this.$confirm(remark + ',是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							// 用户点击确定后,允许这条验证通过
							num++;
							// 继续下一个验证规则
							verifyFormData(index + 1,formData); 
						}).catch((err) => {
							// 用户点击取消后执行的逻辑
							// 可以根据需要处理
						});
					}
				}
			} else {
			   // 当所有循环验证处理完成
				// 如果num等于验证数据数组的长度,即所有的拦截都通过,执行后续业务
				if (num == fData.length) {
				   //验证通过,执行后续业务
					resolve(true)
				} else {
				  //验证未通过
					resolve(true)
				}
			}
		};
		verifyFormData(0, setData.fData);
	});
},
GitHub 加速计划 / vu / vue
100
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:17 天前 )
9e887079 [skip ci] 11 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐