feat: default form validation rules applicable to selector components (#4442)

* fix: hover border style same as antd style when validate error

* fix: hover border style same as antd style when validate error

* feat(@vben-core/form-ui): Default form validation rules applicable to selector components

---------

apps/web-antd/src/adapter/form.ts

@@ -103,6 +103,12 @@ setupVbenForm<FormComponentType>({
       }
       return true;
     },
+    selectRequired: (value, _params, ctx) => {
+      if (value === undefined || value === null) {
+        return $t('formRules.selectRequired', [ctx.label]);
+      }
+      return true;
+    },
   },
 });
 

apps/web-ele/src/adapter/form.ts

@@ -78,6 +78,12 @@ setupVbenForm<FormComponentType>({
       }
       return true;
     },
+    selectRequired: (value, _params, ctx) => {
+      if (value === undefined || value === null) {
+        return $t('formRules.selectRequired', [ctx.label]);
+      }
+      return true;
+    },
   },
 });
 

apps/web-naive/src/adapter/form.ts

@@ -87,6 +87,12 @@ setupVbenForm<FormComponentType>({
       }
       return true;
     },
+    selectRequired: (value, _params, ctx) => {
+      if (value === undefined || value === null) {
+        return $t('formRules.selectRequired', [ctx.label]);
+      }
+      return true;
+    },
   },
 });
 

packages/@core/ui-kit/form-ui/src/types.ts

@@ -58,6 +58,7 @@ export type CustomRenderType = (() => Component | string) | string;
 
 export type FormSchemaRuleType =
   | 'required'
+  | 'selectRequired'
   | null
   | (Record<never, never> & string)
   | ZodTypeAny;
@@ -323,5 +324,10 @@ export interface VbenFormAdapterOptions<
       params: any,
       ctx: Record<string, any>,
     ) => boolean | string;
+    selectRequired?: (
+      value: any,
+      params: any,
+      ctx: Record<string, any>,
+    ) => boolean | string;
   };
 }

packages/locales/src/langs/en-US.json

@@ -55,7 +55,8 @@
     }
   },
   "formRules": {
-    "required": "Please enter {0}"
+    "required": "Please enter {0}",
+    "selectRequired": "Please select {0}"
   },
   "widgets": {
     "document": "Document",

packages/locales/src/langs/zh-CN.json

@@ -55,7 +55,8 @@
     }
   },
   "formRules": {
-    "required": "请输入{0}"
+    "required": "请输入{0}",
+    "selectRequired": "请选择{0}"
   },
   "widgets": {
     "document": "文档",

playground/src/adapter/form.ts

@@ -103,6 +103,12 @@ setupVbenForm<FormComponentType>({
       }
       return true;
     },
+    selectRequired: (value, _params, ctx) => {
+      if (value === undefined || value === null) {
+        return $t('formRules.selectRequired', [ctx.label]);
+      }
+      return true;
+    },
   },
 });
 

playground/src/views/examples/form/rules.vue

@@ -102,7 +102,7 @@ const [Form, formApi] = useVbenForm({
       defaultValue: undefined,
       fieldName: 'options',
       label: '下拉选',
-      rules: 'required',
+      rules: 'selectRequired',
     },
     {
       component: 'RadioGroup',
@@ -120,7 +120,7 @@ const [Form, formApi] = useVbenForm({
       },
       fieldName: 'radioGroup',
       label: '单选组',
-      rules: 'required',
+      rules: 'selectRequired',
     },
     {
       component: 'CheckboxGroup',
@@ -139,7 +139,7 @@ const [Form, formApi] = useVbenForm({
       },
       fieldName: 'checkboxGroup',
       label: '多选组',
-      rules: 'required',
+      rules: 'selectRequired',
     },
     {
       component: 'Checkbox',
@@ -150,14 +150,21 @@ const [Form, formApi] = useVbenForm({
           default: () => ['我已阅读并同意'],
         };
       },
-      rules: 'required',
+      rules: 'selectRequired',
     },
     {
       component: 'DatePicker',
       defaultValue: undefined,
       fieldName: 'datePicker',
       label: '日期选择框',
-      rules: 'required',
+      rules: 'selectRequired',
+    },
+    {
+      component: 'RangePicker',
+      defaultValue: undefined,
+      fieldName: 'rangePicker',
+      label: '区间选择框',
+      rules: 'selectRequired',
     },
   ],
   // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个