perf: adding the necessary validation to the forms (#701)

#### What type of PR is this?

/kind improvement
/milestone 2.0

#### What this PR does / why we need it:

完善 Console 中表单的验证规则。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/2733

#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-console 

#### Does this PR introduce a user-facing change?

```release-note
完善 Console 中表单的验证规则。
```

src/modules/contents/attachments/components/AttachmentGroupEditingModal.vue

@@ -127,7 +127,7 @@ watch(
         label="名称"
         type="text"
         name="displayName"
-        validation="required"
+        validation="required|length:0,50"
       ></FormKit>
     </FormKit>
     <template #footer>

src/modules/contents/attachments/components/AttachmentPolicyEditingModal.vue

@@ -224,7 +224,7 @@ const onVisibleChange = (visible: boolean) => {
         label="名称"
         type="text"
         name="displayName"
-        validation="required"
+        validation="required|length:0,50"
       ></FormKit>
       <FormKitSchema
         :schema="formSchema"

src/modules/contents/comments/components/ReplyCreationModal.vue

@@ -151,9 +151,9 @@ watchEffect(() => {
         :id="contentInputId"
         v-model="formState.raw"
         type="textarea"
-        validation="required"
         validation-label="内容"
         :rows="6"
+        validation="required|length:0,1024"
       ></FormKit>
     </FormKit>
     <div class="mt-2 flex justify-end">

src/modules/contents/pages/components/SinglePageSettingModal.vue

@@ -190,14 +190,14 @@ const { templates } = useThemeCustomTemplates("page");
             label="标题"
             type="text"
             name="title"
-            validation="required"
+            validation="required|length:0,100"
           ></FormKit>
           <FormKit
             v-model="formState.spec.slug"
             label="别名"
             name="slug"
             type="text"
-            validation="required"
+            validation="required|length:0,100"
           ></FormKit>
           <FormKit
             v-model="formState.spec.excerpt.autoGenerate"
@@ -216,6 +216,7 @@ const { templates } = useThemeCustomTemplates("page");
             name="raw"
             label="自定义摘要"
             type="textarea"
+            validation="length:0,1024"
             :rows="5"
           ></FormKit>
         </FormKit>
@@ -277,6 +278,7 @@ const { templates } = useThemeCustomTemplates("page");
             label="封面图"
             type="attachment"
             name="cover"
+            validation="length:0,1024"
           ></FormKit>
         </FormKit>
         <!--TODO: add SEO/Metas/Inject Code form-->

src/modules/contents/posts/categories/components/CategoryEditingModal.vue

@@ -140,7 +140,7 @@ const { templates } = useThemeCustomTemplates("category");
         name="displayName"
         label="名称"
         type="text"
-        validation="required"
+        validation="required|length:0,50"
       ></FormKit>
       <FormKit
         v-model="formState.spec.slug"
@@ -148,7 +148,7 @@ const { templates } = useThemeCustomTemplates("category");
         name="slug"
         label="别名"
         type="text"
-        validation="required"
+        validation="required|length:0,50"
       ></FormKit>
       <FormKit
         v-model="formState.spec.template"
@@ -163,7 +163,7 @@ const { templates } = useThemeCustomTemplates("category");
         name="cover"
         label="封面图"
         type="attachment"
-        validation="required"
+        validation="length:0,1024"
       ></FormKit>
       <FormKit
         v-model="formState.spec.description"
@@ -171,6 +171,7 @@ const { templates } = useThemeCustomTemplates("category");
         help="需要主题适配以支持"
         label="描述"
         type="textarea"
+        validation="length:0,200"
       ></FormKit>
     </FormKit>
     <template #footer>

src/modules/contents/posts/components/PostSettingModal.vue

@@ -180,14 +180,14 @@ const { templates } = useThemeCustomTemplates("post");
             label="标题"
             type="text"
             name="title"
-            validation="required"
+            validation="required|length:0,100"
           ></FormKit>
           <FormKit
             v-model="formState.spec.slug"
             label="别名"
             name="slug"
             type="text"
-            validation="required"
+            validation="required|length:0,100"
           ></FormKit>
           <FormKit
             v-model="formState.spec.categories"
@@ -219,6 +219,7 @@ const { templates } = useThemeCustomTemplates("post");
             name="raw"
             type="textarea"
             :rows="5"
+            validation="length:0,1024"
           ></FormKit>
         </FormKit>
       </VTabItem>
@@ -277,6 +278,7 @@ const { templates } = useThemeCustomTemplates("post");
             name="cover"
             label="封面图"
             type="attachment"
+            validation="length:0,1024"
           ></FormKit>
         </FormKit>
         <!--TODO: add SEO/Metas/Inject Code form-->

src/modules/contents/posts/tags/components/TagEditingModal.vue

@@ -148,7 +148,7 @@ watch(
         name="displayName"
         label="名称"
         type="text"
-        validation="required"
+        validation="required|length:0,50"
       ></FormKit>
       <FormKit
         v-model="formState.spec.slug"
@@ -156,7 +156,7 @@ watch(
         label="别名"
         name="slug"
         type="text"
-        validation="required"
+        validation="required|length:0,50"
       ></FormKit>
       <FormKit
         v-model="formState.spec.color"
@@ -164,6 +164,7 @@ watch(
         help="需要主题适配以支持"
         label="颜色"
         type="color"
+        validation="length:0,50"
       ></FormKit>
       <FormKit
         v-model="formState.spec.cover"
@@ -171,6 +172,7 @@ watch(
         help="需要主题适配以支持"
         label="封面图"
         type="attachment"
+        validation="length:0,1024"
       ></FormKit>
     </FormKit>
     <template #footer>

src/modules/interface/menus/components/MenuEditingModal.vue

@@ -121,7 +121,7 @@ watch(
         label="菜单名称"
         type="text"
         name="displayName"
-        validation="required"
+        validation="required|length:0,100"
       ></FormKit>
     </FormKit>
     <template #footer>

src/modules/interface/menus/components/MenuItemEditingModal.vue

@@ -266,7 +266,7 @@ const onMenuItemSourceChange = () => {
         label="名称"
         type="text"
         name="displayName"
-        validation="required"
+        validation="required|length:0,100"
       />
 
       <FormKit
@@ -275,7 +275,7 @@ const onMenuItemSourceChange = () => {
         label="链接地址"
         type="text"
         name="href"
-        validation="required"
+        validation="required|length:0,1024"
       />
 
       <FormKit

src/modules/system/roles/components/RoleEditingModal.vue

@@ -128,7 +128,7 @@ const handleResetForm = () => {
             "
             label="名称"
             type="text"
-            validation="required"
+            validation="required|length:0,50"
           ></FormKit>
         </FormKit>
       </VTabItem>

src/modules/system/users/components/UserEditingModal.vue

@@ -171,7 +171,7 @@ const handleRawModeChange = () => {
           label="用户名"
           type="text"
           name="name"
-          validation="required"
+          validation="required|alphanumeric|length:0,50"
         ></FormKit>
         <FormKit
           id="displayNameInput"
@@ -179,33 +179,35 @@ const handleRawModeChange = () => {
           label="显示名称"
           type="text"
           name="displayName"
-          validation="required"
+          validation="required|length:0,50"
         ></FormKit>
         <FormKit
           v-model="formState.spec.email"
           label="电子邮箱"
           type="email"
           name="email"
-          validation="required|email"
+          validation="required|email|length:0,100"
         ></FormKit>
         <FormKit
           v-model="formState.spec.phone"
           label="手机号"
           type="text"
           name="phone"
+          validation="length:0,20"
         ></FormKit>
         <FormKit
           v-model="formState.spec.avatar"
           label="头像"
           type="attachment"
           name="avatar"
-          validation="url"
+          validation="url|length:0,1024"
         ></FormKit>
         <FormKit
           v-model="formState.spec.bio"
           label="描述"
           type="textarea"
           name="bio"
+          validation="length:0,2048"
         ></FormKit>
       </FormKit>
     </div>

src/modules/system/users/components/UserPasswordChangeModal.vue

@@ -111,13 +111,13 @@ const handleChangePassword = async () => {
         label="新密码"
         name="password"
         type="password"
-        validation="required"
+        validation="required|length:0,100"
       ></FormKit>
       <FormKit
         label="确认密码"
         name="password_confirm"
         type="password"
-        validation="required|confirm"
+        validation="required|confirm|length:0,50"
       ></FormKit>
     </FormKit>
     <template #footer>

src/views/system/Setup.vue

@@ -121,7 +121,7 @@ onMounted(async () => {
           }"
           type="text"
           placeholder="站点名称"
-          validation="required"
+          validation="required|length:0,100"
         ></FormKit>
       </FormKit>
       <VButton