uniapp uview循环子表单验证组件实现

<template>
	<view class="container container15550">
		<u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24">
			<u-form-item class="diygw-col-24" :required="true" label="姓名" prop="input">
				<u-input :focus="formData.inputFocus" class="" placeholder="请输入提示信息" v-model="form.input" type="text"></u-input>
			</u-form-item>
			<view class="flex flex-wrap diygw-col-24 flex-direction-column">
				<view class="diygw-col-24" v-for="(subformItem, subformIndex) in form.subform" :key="subformIndex">
					<u-form :model="form.subform[subformIndex]" :errorType="['message', 'toast']" ref="subformRef" :rules="subformItemRules">
						<u-form-item class="diygw-col-24" :required="true" label="公司名" prop="input1">
							<u-input :focus="subformItemData.input1Focus" class="" placeholder="请输入提示信息" v-model="subformItem.input1" type="text"></u-input>
						</u-form-item>
						<u-form-item class="diygw-col-24" label="单选" prop="radio">
							<u-radio-group class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between" activeColor="#39b54a" v-model="subformItem.radio" @change="changeSubformItemRadio($event, subformIndex, subformItem)">
								<u-radio shape="circle" v-for="(radioitem, radioindex) in subformItemData.radioDatas" :key="radioindex" :name="radioitem.value">
									{{ radioitem.label }}
								</u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item class="diygw-col-24" label="复选" prop="checkbox">
							<u-checkbox-group class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between" activeColor="#39b54a" v-model="subformItem.checkbox" @change="changeSubformItemCheckbox">
								<u-checkbox v-model="checkboxitem.checked" v-for="(checkboxitem, checkboxindex) in subformItemData.checkboxDatas" :key="checkboxindex" :name="checkboxitem.value">
									{{ checkboxitem.label }}
								</u-checkbox>
							</u-checkbox-group>
						</u-form-item>
					</u-form>
					<view class="padding-xs flex justify-end">
						<button @tap="upSubformItem" :data-index="subformIndex" class="diygw-btn green radius margin-xs">上移</button>
						<button @tap="downSubformItem" :data-index="subformIndex" class="diygw-btn green radius margin-xs">下移</button>
						<button @tap="delSubformItem" :data-index="subformIndex" class="diygw-btn red radius margin-xs">删除</button>
					</view>
				</view>
				<view class="padding-xs">
					<button @tap="addSubformItem" class="diygw-btn diygw-col-24 radius" style="background: #07c160; color: #fff">新增</button>
				</view>
			</view>
			<view class="flex diygw-col-24">
				<button @click="submitForm" class="diygw-btn green radius-xs flex-sub margin-xs button-button-clz">按钮</button>
			</view>
		</u-form>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//用户全局信息
				userInfo: {},
				//页面传参
				globalOption: {},
				//自定义全局变量
				globalData: {},
				dta: {
					code: 200,
					msg: '获取数据成功',
					data: [
						{
							title: '标题1',
							remark: '描述1',
							id: 1,
							attr: {
								title: '标题1'
							},
							img: 'https://libs.diygw.com/upload/xcx.jpg'
						},
						{
							title: '标题2',
							remark: '描述2',
							id: 2,
							attr: {
								title: '标题2'
							},
							img: 'https://libs.diygw.com/upload/xcx.jpg'
						},
						{
							title: '标题3',
							remark: '描述3',
							id: 3,
							attr: {
								title: '标题3'
							},
							img: 'https://libs.diygw.com/upload/xcx.jpg'
						},
						{
							title: '标题4',
							remark: '描述4',
							id: 4,
							attr: {
								title: '标题4'
							},
							img: 'https://libs.diygw.com/upload/xcx.jpg'
						},
						{
							title: '标题5',
							remark: '描述5',
							id: 5,
							attr: {
								title: '标题5'
							},
							img: 'https://libs.diygw.com/upload/xcx.jpg'
						}
					]
				},
				subformItemData: {
					input1Focus: false,
					radioDatas: [
						{ value: '1', label: '选项一', checked: true },
						{ value: '2', label: '选项二', checked: false },
						{ value: '3', label: '选项三', checked: false }
					],
					checkboxDatas: [
						{ value: '1', label: '选项一', checked: true },
						{ value: '2', label: '选项二', checked: true },
						{ value: '3', label: '选项三', checked: false }
					]
				},
				subformItem: {
					input1: '',
					radio: '1',
					checkbox: ['1', '2']
				},
				formRules: {
					input: [
						{
							trigger: ['change', 'blur'],
							required: true,
							message: '姓名不能为空'
						}
					]
				},
				form: {
					input: '',
					subform: []
				},
				subformItemRules: {
					input1: [
						{
							trigger: ['change', 'blur'],
							required: true,
							message: '公司名不能空'
						}
					]
				},
				formData: {
					inputFocus: false
				}
			};
		},
		onShow() {
			this.setCurrentPage(this);
		},
		onLoad(option) {
			this.setCurrentPage(this);
			if (option) {
				this.setData({
					globalOption: this.getOption(option)
				});
			}

			this.init();
		},
		onReady() {
			this.$refs.formRef?.setRules(this.formRules);
			this.initSubformData();
		},
		methods: {
			async init() {},
			// 新增接口 API请求方法
			async dtaApi(param) {
				let thiz = this;
				param = param || {};
				//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
				let http_url = '/article.php';
				let http_data = {};
				let http_header = {
					'Content-type': 'application/json'
				};

				let dta = await this.$http.post(http_url, http_data, http_header, 'json');

				this.dta = dta;
			},
			//初始化显示子表单数据条数
			initSubformData() {
				if (this.subformItem) {
					for (let i = 0; i < 1; i++) {
						this.form.subform.push(JSON.parse(JSON.stringify(this.subformItem)));
					}
					this.initSubformValid();
				} else {
					this.navigateTo({
						type: 'tip',
						tip: '请先设计子表单哟'
					});
				}
			},
			//子表单验证
			initSubformValid() {
				//如果没找到子表单验证规，不用验证
				if (this.subformItemRules) {
					this.$nextTick(() => {
						this.$refs['subformRef']?.forEach((subform) => {
							subform.setRules(this.subformItemRules);
						});
					});
				}
			},
			//上移子表单
			upSubformItem(evt) {
				let { index } = evt.currentTarget.dataset;
				if (index == 0) {
					this.navigateTo({
						type: 'tip',
						tip: '已经是第一个'
					});
					return false;
				}
				this.form.subform[index] = this.form.subform.splice(index - 1, 1, this.form.subform[index])[0];

				this.initSubformValid();
			},
			//下移子表单
			downSubformItem(evt) {
				let { index } = evt.currentTarget.dataset;
				if (index == this.form.subform.length - 1) {
					this.navigateTo({
						type: 'tip',
						tip: '已经是最后一个'
					});
					return false;
				}
				this.form.subform[index] = this.form.subform.splice(index + 1, 1, this.form.subform[index])[0];
				this.initSubformValid();
			},
			//删除子表单
			delSubformItem(evt) {
				let { index } = evt.currentTarget.dataset;
				this.form.subform.splice(index, 1);
				this.initSubformValid();
			},
			//增加子表单
			addSubformItem() {
				this.form.subform.push(JSON.parse(JSON.stringify(this.subformItem)));
				this.initSubformValid();
			},
			//验证所有的子表单
			checkSubformValid() {
				let formFlag = true;
				return new Promise((resolve, reject) => {
					let list = [];
					this.$refs['subformRef'].forEach((subform) => {
						const p = new Promise((reso, rej) => {
							subform.validate((valid) => {
								if (!valid) {
									formFlag = false;
								}
								reso(); //单个接口执行完毕
							});
						});
						list.push(p);
					});
					Promise.all(list).then((result) => {
						resolve(formFlag); //所有接口都执行完毕
					});
				});
			},
			changeSubformItemRadio(evt, subformIndex, subformItem) {},
			changeSubformItemCheckbox(evt, subformIndex, subformItem) {},
			async submitForm(e) {
				let valid = await this.$refs.formRef.validate();

				let subformvalid = await this.checkSubformValid();
				if (valid && subformvalid) {
					//保存数据
					let param = this.form;
					let header = {
						'Content-type': 'application/json'
					};
					let url = '/sys/form/add';

					let res = await this.$http.post(url, param, header, 'json');

					if (res.code == 200) {
						this.showToast(res.msg, 'success');
					} else {
						this.showModal(res.msg, '提示', false);
					}
				} else {
					console.log('验证失败');
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.button-button-clz {
		margin: 3px !important;
	}
	.container15550 {
		padding-left: 0px;
		padding-right: 0px;

		font-size: 12px;
	}
	.container15550 {
	}
</style>

uniapp uview循环子表单验证组件实现,比如果我们最常见的简历功能实现，一个人会多个工作经验。