feat(家庭表单): 添加家庭名称和介绍的字数验证及错误提示

为家庭创建和编辑表单添加字数限制验证功能
- 家庭名称限制20字并显示错误提示
- 家庭介绍限制100字并显示错误提示
- 在表单提交时进行验证

 <!--
  * @Date: 2025-08-27 17:44:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-08-29 13:58:07
+ * @LastEditTime: 2025-08-29 15:49:47
  * @FilePath: /lls_program/src/pages/CreateFamily/index.vue
  * @Description: 文件描述
 -->
@@ -21,8 +21,11 @@
               type="text"
               v-model="familyName"
               class="w-full text-gray-600 focus:outline-none"
-              placeholder="请输入家庭名称"
+              placeholder="请输入家庭名称（最多20个字）"
+              @blur="validateFamilyName"
+              maxlength="20"
             />
+            <view v-if="familyNameError" class="text-red-500 text-sm mt-2">{{ familyNameError }}</view>
           </view>
         </view>
         <!-- Family Introduction -->
@@ -32,9 +35,12 @@
             <textarea
               v-model="familyIntro"
               class="w-full text-gray-600 focus:outline-none resize-none"
-              placeholder="请输入您家庭的特色、成员特点等家庭标签"
+              placeholder="请输入您家庭的特色、成员特点等家庭标签（最多100个字）"
               :rows="2"
+              @blur="validateFamilyIntro"
+              maxlength="100"
             />
+            <view v-if="familyIntroError" class="text-red-500 text-sm mt-2">{{ familyIntroError }}</view>
           </view>
         </view>
         <!-- District Selection -->
@@ -180,6 +186,10 @@ const selectedDistrictText = ref('');
 const familyMotto = ref(['', '', '', '']);
 const familyMottoPlaceholder = ref(['孝', '敬', '和', '睦']);
 
+// 字数验证错误信息
+const familyNameError = ref('');
+const familyIntroError = ref('');
+
 // 区域选择器相关
 const showDistrictPicker = ref(false);
 const districtValue = ref([]);
@@ -380,21 +390,63 @@ const closePreview = () => {
 };
 
 /**
+ * 验证家庭名称字数
+ */
+const validateFamilyName = () => {
+  familyNameError.value = '';
+  if (familyName.value.length > 20) {
+    familyNameError.value = '家庭名称不能超过20个字';
+  }
+};
+
+/**
+ * 验证家庭介绍字数
+ */
+const validateFamilyIntro = () => {
+  familyIntroError.value = '';
+  if (familyIntro.value.length > 100) {
+    familyIntroError.value = '家庭介绍不能超过100个字';
+  }
+};
+
+/**
  * 表单验证
  */
 const validateForm = () => {
+  // 先验证字数
+  validateFamilyName();
+  validateFamilyIntro();
+
   if (!familyName.value.trim()) {
     showToast('请输入家庭名称', 'error');
     return false;
   }
 
+  if (familyName.value.length > 20) {
+    Taro.showModal({
+      title: '提示',
+      content: '家庭名称不能超过20个字，请重新输入',
+      showCancel: false
+    });
+    return false;
+  }
+
   if (!familyIntro.value.trim()) {
     showToast('请输入家庭介绍', 'error');
     return false;
   }
 
-  if (!familySize.value) {
-    showToast('请选择家庭规模', 'error');
+  if (familyIntro.value.length > 100) {
+    Taro.showModal({
+      title: '提示',
+      content: '家庭介绍不能超过100个字，请重新输入',
+      showCancel: false
+    });
+    return false;
+  }
+
+  if (!selectedDistrict.value) {
+    showToast('请选择区域战队', 'error');
     return false;
   }
 
@@ -412,6 +464,10 @@ const validateForm = () => {
  * 创建家庭
  */
 const handleCreateFamily = () => {
+  if (!validateForm()) {
+    return;
+  }
+
   // 在实际应用中，这里会调用API创建家庭
   // 目前仅作为演示跳转到仪表盘页面
   showToast('家庭创建成功', 'success');

@@ -21,8 +21,11 @@
               type="text"
               v-model="familyName"
               class="w-full text-gray-600 focus:outline-none"
-              placeholder="请输入家庭名称"
+              placeholder="请输入家庭名称（最多20个字）"
+              @blur="validateFamilyName"
+              maxlength="20"
             />
+            <view v-if="familyNameError" class="text-red-500 text-sm mt-2">{{ familyNameError }}</view>
           </view>
         </view>
         <!-- Family Introduction -->
@@ -32,9 +35,12 @@
             <textarea
               v-model="familyIntro"
               class="w-full text-gray-600 focus:outline-none resize-none"
-              placeholder="请输入您家庭的特色、成员特点等家庭标签"
+              placeholder="请输入您家庭的特色、成员特点等家庭标签（最多100个字）"
               :rows="2"
+              @blur="validateFamilyIntro"
+              maxlength="100"
             />
+            <view v-if="familyIntroError" class="text-red-500 text-sm mt-2">{{ familyIntroError }}</view>
           </view>
         </view>
         <!-- District Selection -->
@@ -177,6 +183,10 @@ const selectedDistrictText = ref('');
 const familyMotto = ref(['', '', '', '']);
 const familyMottoPlaceholder = ref(['孝', '敬', '和', '睦']);
 
+// 字数验证错误信息
+const familyNameError = ref('');
+const familyIntroError = ref('');
+
 // 区域选择器相关
 const showDistrictPicker = ref(false);
 const districtValue = ref([]);
@@ -363,19 +373,61 @@ const closePreview = () => {
 };
 
 /**
+ * 验证家庭名称字数
+ */
+const validateFamilyName = () => {
+  familyNameError.value = '';
+  if (familyName.value.length > 20) {
+    familyNameError.value = '家庭名称不能超过20个字';
+  }
+};
+
+/**
+ * 验证家庭介绍字数
+ */
+const validateFamilyIntro = () => {
+  familyIntroError.value = '';
+  if (familyIntro.value.length > 100) {
+    familyIntroError.value = '家庭介绍不能超过100个字';
+  }
+};
+
+/**
  * 表单验证
  */
 const validateForm = () => {
+  // 先验证字数
+  validateFamilyName();
+  validateFamilyIntro();
+  
   if (!familyName.value.trim()) {
     showToast('请输入家庭名称', 'error');
     return false;
   }
 
+  if (familyName.value.length > 20) {
+    Taro.showModal({
+      title: '提示',
+      content: '家庭名称不能超过20个字，请重新输入',
+      showCancel: false
+    });
+    return false;
+  }
+
   if (!familyIntro.value.trim()) {
     showToast('请输入家庭介绍', 'error');
     return false;
   }
 
+  if (familyIntro.value.length > 100) {
+    Taro.showModal({
+      title: '提示',
+      content: '家庭介绍不能超过100个字，请重新输入',
+      showCancel: false
+    });
+    return false;
+  }
+
   if (!selectedDistrict.value) {
     showToast('请选择区域战队', 'error');
     return false;