feat: 封装手机号校验，mobile 非必填校验，mobileRequired 必填校验

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

@@ -8,6 +8,9 @@ import type { ComponentType } from './component';
 import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
+/** 手机号正则表达式（中国） */
+const MOBILE_REGEX = /(?:0|86|\+86)?1[3-9]\d{9}/;
+
 setupVbenForm<ComponentType>({
   config: {
     // ant design vue组件库默认都是 v-model:value
@@ -37,6 +40,25 @@ setupVbenForm<ComponentType>({
       }
       return true;
     },
+    // 手机号非必填
+    mobile: (value, _params, ctx) => {
+      if (value === undefined || value === null || value.length === 0) {
+        return true;
+      } else if (!MOBILE_REGEX.test(value)) {
+        return $t('ui.formRules.phone', [ctx.label]);
+      }
+      return true;
+    },
+    // 手机号必填
+    mobileRequired: (value, _params, ctx) => {
+      if (value === undefined || value === null || value.length === 0) {
+        return $t('ui.formRules.required', [ctx.label]);
+      }
+      if (!MOBILE_REGEX.test(value)) {
+        return $t('ui.formRules.phone', [ctx.label]);
+      }
+      return true;
+    },
   },
 });
 

apps/web-antd/src/views/system/dept/data.ts

@@ -92,11 +92,7 @@ export function useFormSchema(): VbenFormSchema[] {
         maxLength: 11,
         placeholder: '请输入联系电话',
       },
-      rules: z
-        .string()
-        // TODO @芋艿：未来怎么拓展一个手机的
-        .regex(/^1[3-9|]\d{9}$/, '请输入正确的手机号码')
-        .optional(),
+      rules: 'mobileRequired',
     },
     {
       fieldName: 'email',

packages/@core/ui-kit/form-ui/src/form-render/form-field.vue

@@ -110,7 +110,9 @@ const shouldRequired = computed(() => {
   }
 
   if (isString(currentRules.value)) {
-    return ['required', 'selectRequired'].includes(currentRules.value);
+    return ['mobileRequired', 'required', 'selectRequired'].includes(
+      currentRules.value,
+    );
   }
 
   let isOptional = currentRules?.value?.isOptional?.();

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

@@ -68,6 +68,8 @@ export type FormActions = FormContext<GenericObject>;
 export type CustomRenderType = (() => Component | string) | string;
 
 export type FormSchemaRuleType =
+  | 'mobile'
+  | 'mobileRequired'
   | 'required'
   | 'selectRequired'
   | null
@@ -428,6 +430,16 @@ export interface VbenFormAdapterOptions<
     modelPropNameMap?: Partial<Record<T, string>>;
   };
   defineRules?: {
+    mobile?: (
+      value: any,
+      params: any,
+      ctx: Record<string, any>,
+    ) => boolean | string;
+    mobileRequired?: (
+      value: any,
+      params: any,
+      ctx: Record<string, any>,
+    ) => boolean | string;
     required?: (
       value: any,
       params: any,

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

@@ -7,7 +7,8 @@
     "length": "{0} must be {1} characters long",
     "alreadyExists": "{0} `{1}` already exists",
     "startWith": "{0} must start with `{1}`",
-    "invalidURL": "Please input a valid URL"
+    "invalidURL": "Please input a valid URL",
+    "mobile": "Please input a valid {0}"
   },
   "actionTitle": {
     "edit": "Modify {0}",

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

@@ -7,7 +7,8 @@
     "length": "{0}长度必须为{1}个字符",
     "alreadyExists": "{0} `{1}` 已存在",
     "startWith": "{0}必须以 {1} 开头",
-    "invalidURL": "请输入有效的链接"
+    "invalidURL": "请输入有效的链接",
+    "mobile": "请输入正确的{0}"
   },
   "actionTitle": {
     "edit": "修改{0}",