Browse Source

feat(core): 添加表单验证功能并优化咨询页面

- 在 common.ts 中添加 validate 函数,用于表单验证
- 在咨询页面中集成表单验证功能
- 优化咨询页面的表单提交逻辑
EvilDragon 2 months ago
parent
commit
0e9a1c5bc7

+ 27 - 0
packages/app/src/core/utils/common.ts

@@ -148,3 +148,30 @@ export const qrCodeString2Object = (str: string): Record<string, any> => {
   }
   return { type, options: obj }
 }
+export const validate = (form, rules) => {
+  for (const field in rules) {
+    for (const rule of rules[field]) {
+      if (rule.required && !form[field]) {
+        uni
+          .showToast({
+            title: rule.message,
+            icon: 'none',
+            duration: 2000,
+          })
+          .then()
+        return false
+      }
+      if (rule.pattern && !rule.pattern.test(form[field])) {
+        uni
+          .showToast({
+            title: rule.message,
+            icon: 'none',
+            duration: 2000,
+          })
+          .then()
+        return false
+      }
+    }
+  }
+  return true
+}

+ 12 - 2
packages/app/src/pages/mine/homepage/consult/index.vue

@@ -13,7 +13,7 @@ import { NetImages } from '../../../../core/libs/net-images'
 import BottomAppBar from '@/components/bottom-app-bar.vue'
 import { useRouter } from '../../../../core/utils/router'
 import NavbarEvo from '@/components/navbar-evo.vue'
-import { requestToast } from '../../../../core/utils/common'
+import {requestToast, validate} from '../../../../core/utils/common'
 
 const router = useRouter()
 const userStore = useUserStore()
@@ -53,6 +53,16 @@ onLoad(async (query: { id: string }) => {
   console.log(circleTypes.value)
 })
 const handleSubmit = async () => {
+  const rules = {
+    appointmentName: [{ required: true, message: '请输入姓名' }],
+    appointmentPhone: [
+      { required: true, message: '请输入手机号' },
+      // { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确' },
+    ],
+  }
+
+  if (!validate(form.value, rules)) return
+
   const { code } = await requestToast(
     () =>
       reserveDesigner({
@@ -64,7 +74,7 @@ const handleSubmit = async () => {
   )
   if (code === 0) {
     form.value = { appointmentName: '', appointmentPhone: '' }
-    router.replace(`/pages/mine/homepage/consult/success/index?name=${''}`)
+    await router.replace(`/pages/mine/homepage/consult/success/index?name=${''}`)
   }
 }
 onShareAppMessage(() => ({ title: `${userInfo.value.nickname}` }))