uniapp 动态创建form并校验

效果图

点击新增

点击提交

css

<template>
	<view class="container">
		<uni-section :title="'新增数据' + index" 
		type="line" 
		v-for="(item, index) in dynamicLists" 
		:key="index"
		>
		    <uni-forms ref="baseForm" :modelValue='dynamicLists[index]' :rules="rules">
		    	<uni-forms-item label="姓名" name="name">
		    		<input v-model="item.name" placeholder="请输入姓名"/>
				</uni-forms-item>
				<uni-forms-item label="手机号" name="phone">
					<input v-model="item.phone" placeholder="请输入手机号"/>
				</uni-forms-item>
		    </uni-forms>
		</uni-section>
		<view class="button-group">
			<button type="primary" plain="true" class="button" size="mini" @click="add">新增</button>
			<button type="warn" plain="true" class="button" size="mini" @click="submit">提交</button>
		</view>
	</view>
</template>

js

<script>
	export default {
		data() {
			return {
				dynamicLists: [
					{    
		                id: Date.now(),
						name: '',
						phone: '',
					}
				],
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名必填'
						}]
					},
					phone: {
						rules: [
							{required: true, errorMessage: '手机号必填'},
							{required: true, validateFunction: (rule,value,data,callback)=>{
									let reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
									if(reg.test(value) == false){
										callback('请输入合法的手机号')
									}
									return true;
								}
							},
						]
					}
				}
			}
		},
		onReady(){
			// 需要在onReady中设置规则
			this.$nextTick(()=>{
				this.dynamicLists.map((item, index) => {
					this.$refs.baseForm[index].setRules(this.rules)
				})
			})
		},
		methods: {
			// 新增
			add(){
			    this.dynamicLists.push({
				    id: Date.now(),
					name: '',
					phone: '',
				})
				this.$nextTick(() => {
					this.dynamicLists.map((item,index) => {
						this.$refs.baseForm[index].setRules(this.rules)
					})
				})
			},
			// validate方法是针对对象来说的，数组时不能使用该方法的
			// 解决方法 
			async handleValidte() {
				const promises = this.dynamicLists.map((item, index) => {
					return new Promise(resolve => {
						this.$refs.baseForm[index].validate(err => {
							resolve(err)
						})
					})
				})
				return await Promise.all(promises)
			},
			
			// 提交
			async submit() {
				let validtateList = await this.handleValidte()
			    // 扁平化
				let flat = validtateList.flat(2)
				const isTrue = flat.every(item => {
					return item === null
				})
				if(isTrue) {
					uni.showToast({
						title: `提交成功`
					})
			        // 清数组
					this.dynamicLists = [{
						id: Date.now(),
						name: '',
						phone: '',
					}]
				}
			},

		}
	}
</script>

css

<style lang="less" scoped>
.container{
	padding: 20rpx 32rpx;
	/deep/.uni-forms{
		padding-left: 50rpx;
		.uni-forms-item{
			align-items: center;
			.uni-forms-item__label{
				font-size: 32rpx!important;
				font-weight: 400;
				color: #333333!important;
			}
			input{
				font-size: 32rpx;
			}
		}
	}
	.button-group{
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}
}
</style>