表单添加格式校验

yfyc/src/utils/index.js

@@ -1,6 +1,32 @@
 import { getCodeAPI, } from "@/api/interact.js";
 
 /**
+ * 返回一个自带节流效果的函数，用res表示。
+ * 
+ * fn：需要被节流的函数
+ * interval：最短多长时间允许执行一次fn
+ * 
+ * 功能要点：
+ * 1.fn代码里如有this，res被执行时，this会指向res的调用者；
+ * 2.res被执行时的实参会映射到fn的形参；
+ * 3.第一次调用res时，会立即执行fn。
+ */
+ export function throttle(fn, interval = 250) {
+  let lastRunTime = 0
+
+  return function (...args) {
+    let elapsedTime = Date.now() - lastRunTime
+    if (elapsedTime < interval) {
+      return null
+    }
+
+    let context = this
+    lastRunTime = Date.now()
+    return fn.apply(context, args)
+  }
+}
+
+/**
  * 返回一个自带消抖效果的函数，下文用fnDebounced表示。
  *
  * fn: 需要被消抖的函数
@@ -139,10 +165,43 @@ export function dateToWeekday(dateStr = '2022-11-29') {
   return number2String[date.getDay()]
 }
 
+/* 手机号校验 */
+export function validatePhoneNumber(str) {
+  const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
+  return reg.test(str)
+}
+
+/* 电子邮箱校验 */
+export function validateEmail(str) {
+  const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
+  return reg.test(str)
+ }
+
+ /** 身份证号校验规则
+地址码规则： 地址码长6位 以数字1-9开头 后5位为0-9的数字 根据以上规则，写出地址码的正则表达式： /^[1-9]\d{5}/
+年份码规则： 年份码长4位 以数字18，19或20,30开头 剩余两位为0-9的数字 根据以上规则，写出年份码的正则表达式： /(18|19|20|(3\d))\d{2}/。如果想扩展可以自己添加
+月份码规则： 月份码长2位 第一位数字为0，第二位数字为1-9 或者第一位数字为1，第二位数字为0-2 根据以上规则，写出月份码的正则表达式： /((0[1-9])|(1[0-2]))/。
+日期码规则： 日期码长2位 第一位数字为0-2，第二位数字为1-9 或者是10，20，30，31 根据以上规则，写出日期码的正则表达式 ：/(([0-2][1-9])|10|20|30|31)/。
+顺序码规则： 顺序码长3位 顺序码是数字 根据以上规则，写出顺序码的正则表达式 ：/\d{3}/。
+校验码规则： 校验码长1位 可以是数字，字母x或字母X 根据以上规则，写出校验码的正则表达式 ：/[0-9Xx]/。
+综上，总体正则：/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
+*/
+export function isValidIdCardNumber(id) {
+  if (typeof (id) !== 'string') {
+    return false
+  }
+  const reg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
+  return reg.test(id)
+}
+
 export default {
+  throttle,
   debounce,
   getUserCode,
   checkLoginStatus,
   loginOnNeed,
   dateToWeekday,
+  validatePhoneNumber,
+  validateEmail,
+  isValidIdCardNumber,
 }

yfyc/src/views/My/Feedback.vue

@@ -155,11 +155,25 @@ export default {
         },
       });
     },
-    onSubmit() {
-      Toast.success("提交成功!");
-      setTimeout(() => {
-        this.$router.go(-1)
-      }, 1500);
+    onSubmit: globalUtils.throttle(function() {
+      if(this.validateForm()) {
+        Toast.success("提交成功!");
+        setTimeout(() => {
+          this.$router.go(-1)
+        }, 1500);
+      }
+    }),
+    // 此函数不检查必填项是否为空。那个已经通过canSubmit来保证了。
+    validateForm() {
+      if (this.desc.length < 10) {
+        Toast.fail('请填写10个字以上的描述')
+        return false
+      }
+      if (!globalUtils.validatePhoneNumber(this.contact) && !globalUtils.validateEmail(this.contact)) {
+        Toast.fail('请正确填写联系方式')
+        return false
+      }
+      return true
     }
   }
 }

yfyc/src/views/Serve/Booking.vue

@@ -204,7 +204,7 @@ export default {
     handleClickTime(index) {
       this.timeIdx = index
     },
-    onClickSubmit() {
+    onClickSubmit: globalUtils.throttle(function() {
       submitBooking({
         "buildId": this.attractionId,
         "day": `${this.year}-${this.month}-${this.day}`,
@@ -217,7 +217,24 @@ export default {
         this.bookingRes = res.data
         this.isShowSuccess = true
       })
-    },
+    }),
+    // 此函数不检查必填项是否为空。那个已经通过canSubmit来保证了。
+    validateForm() {
+      if (!globalUtils.isValidIdCardNumber(this.idCard)) {
+        Toast.fail('请正确填写身份证号')
+        return false
+      }
+      if (!globalUtils.validatePhoneNumber(this.idCard)) {
+        Toast.fail('请正确填写手机号码')
+      }
+      if (!Number.isInteger(this.number) || this.number < 1) {
+        Toast.fail('请正确填写人数')
+      }
+      if (this.number > 100) {
+        Toast.fail('人数不可大于100')
+      }
+      return true
+    }
   }
 }
 </script>