cl-form 支持动态字段验证，如：contacts[0].phone

pages/demo/form/form.uvue

@@ -24,13 +24,55 @@
 						></cl-input>
 					</cl-form-item>
 
-					<cl-form-item :label="t('邮箱')" prop="email" required>
+					<cl-form-item :label="t('邮箱')" prop="email">
 						<cl-input
 							v-model="formData.email"
 							:placeholder="t('请输入邮箱地址')"
 						></cl-input>
 					</cl-form-item>
 
+					<cl-form-item :label="t('动态验证')" required prop="contacts">
+						<view
+							class="contacts border border-solid border-surface-200 rounded-xl p-3 dark:!border-surface-700"
+						>
+							<cl-form-item
+								v-for="(item, index) in formData.contacts"
+								:key="index"
+								:label="t('联系人') + ` - ${index + 1}`"
+								:prop="`contacts[${index}].phone`"
+								:rules="
+									[
+										{
+											required: true,
+											message: t('手机号不能为空')
+										}
+									] as ClFormRule[]
+								"
+								required
+							>
+								<view class="flex flex-row items-center">
+									<cl-input
+										:pt="{
+											className: 'flex-1 mr-2'
+										}"
+										v-model="item.phone"
+										:placeholder="t('请输入手机号')"
+									></cl-input>
+
+									<cl-button
+										type="light"
+										icon="subtract-line"
+										@tap="removeContact(index)"
+									></cl-button>
+								</view>
+							</cl-form-item>
+
+							<cl-button icon="add-line" @tap="addContact">{{
+								t("添加联系人")
+							}}</cl-button>
+						</view>
+					</cl-form-item>
+
 					<cl-form-item :label="t('身高')" prop="height" required>
 						<cl-slider v-model="formData.height" :max="220" show-value>
 							<template #value="{ value }">
@@ -182,6 +224,10 @@ const tagsOptions = [
 // 地区选项
 const pcaOptions = useCascader(pca);
 
+type Contact = {
+	phone: string;
+};
+
 // 自定义表单数据类型
 type FormData = {
 	avatarUrl: string;
@@ -195,6 +241,7 @@ type FormData = {
 	tags: number[];
 	birthday: string;
 	isPublic: boolean;
+	contacts: Contact[];
 };
 
 // 表单数据
@@ -209,7 +256,8 @@ const formData = ref<FormData>({
 	pca: [],
 	tags: [1, 2],
 	birthday: "",
-	isPublic: false
+	isPublic: false,
+	contacts: []
 }) as Ref<FormData>;
 
 // 表单验证规则
@@ -265,6 +313,15 @@ const rules = new Map<string, ClFormRule[]>([
 				}
 			}
 		]
+	],
+	[
+		"contacts",
+		[
+			{
+				required: true,
+				message: t("联系人不能为空")
+			}
+		]
 	]
 ]);
 
@@ -284,6 +341,7 @@ function reset() {
 	formData.value.tags = [];
 	formData.value.birthday = "";
 	formData.value.isPublic = false;
+	formData.value.contacts = [];
 
 	clearValidate();
 }
@@ -310,4 +368,14 @@ function submit() {
 		}
 	});
 }
+
+function addContact() {
+	formData.value.contacts.push({
+		phone: ""
+	});
+}
+
+function removeContact(index: number) {
+	formData.value.contacts.splice(index, 1);
+}
 </script>