fix: 华贵表单验证完善

src/App.vue

@@ -40,6 +40,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 9999;
   .loading {
     padding: 6px;
     border-radius: 6px;

src/service/validation.js

@@ -69,6 +69,15 @@ export function isIdNo(str) {
   return false;
 }
 
+// 判断输入的字符是否为中文姓名最少两个中文字符
+export function isChineseName(str) {
+  if (!isNull(str)) {
+    const reg = /^[\u0391-\uFFE5]{2,}$/;
+    return reg.test(str);
+  }
+  return false;
+}
+
 // 判断输入的字符是否以数字开头
 export function isStartWithInteger(str) {
   if (!isNull(str)) {
@@ -258,6 +267,15 @@ export function isBankNumber(str) {
   return false;
 }
 
+// 判断中文地址不能少于5个汉字，且必须有一位数字
+export function isChnAddress(str) {
+  if (!isNull(str)) {
+    const reg = /^(\d|[\u4e00-\u9fa5]){5,10}$/;
+    return reg.test(str);
+  }
+  return false;
+}
+
 // 判断微信环境
 export const isWeixinBrower = window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger";
 // 判断信用钱包环境

src/views/Consultant/Plan/index.vue

@@ -109,60 +109,6 @@ export default {
         { title: "重疾险", price: "50万" },
         { title: "意外险", price: "60万" },
         { title: "寿险", price: "350万" }
-      ],
-      overviewList: [
-        {
-          id: 1,
-          goods: "国民保·百万医疗险",
-          type: "mi",
-          title: "医疗险",
-          amount: "600万",
-          range: "1年",
-          way: "趸交",
-          price: "350元",
-          goodsPirce: "3000",
-          goodsUnit: "元/每年",
-          reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
-        },
-        {
-          id: 2,
-          goods: "康惠保2020终身重疾险",
-          type: "cii",
-          title: "重疾险",
-          amount: "50万",
-          range: "终身",
-          way: "20年",
-          price: "6000元",
-          goodsPirce: "6000",
-          goodsUnit: "元/每年",
-          reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
-        },
-        {
-          id: 3,
-          goods: "国民保·百万意外险",
-          type: "ai",
-          title: "意外险",
-          amount: "50万",
-          range: "1年",
-          way: "趸交",
-          price: "350元",
-          goodsPirce: "3000",
-          goodsUnit: "元/每年",
-          reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
-        },
-        {
-          id: 4,
-          goods: "国民保·百万寿险",
-          type: "li",
-          title: "寿险",
-          amount: "350万",
-          range: "保至70岁",
-          way: "20年",
-          price: "3725元",
-          goodsPirce: "3000",
-          goodsUnit: "元/每年",
-          reason: "推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由推荐理由"
-        }
       ]
     };
   },

src/views/Policy/Add/index.vue

@@ -15,9 +15,15 @@
           v-model="formData.holderUserInfo.name"
           name="holderUserInfo_name"
           label="姓名"
-          placeholder="请输入投保人姓名"
+          placeholder="请填写投保人姓名"
           :readonly="selfInfoReadonly"
-          :rules="[{ required: true, message: '请输入投保人姓名' }]"
+          :rules="[
+            { required: true, message: '请填写投保人姓名' },
+            {
+              validator: isChineseName,
+              message: '请填写正确的投保人姓名，最少2个中文字符'
+            }
+          ]"
           @click.native="inputClick"
         />
         <cr-field
@@ -26,7 +32,13 @@
           label="身份证号"
           placeholder="请填写投保人身份证号"
           :readonly="selfInfoReadonly"
-          :rules="[{ required: true, message: '请填写投保人身份证号' }]"
+          :rules="[
+            { required: true, message: '请填写投保人身份证号' },
+            {
+              validator: isIdNo,
+              message: '请填写正确的投保人身份证号'
+            }
+          ]"
           @click.native="inputClick"
         />
         <cr-field
@@ -36,7 +48,13 @@
           label="手机号"
           placeholder="请填写投保人手机号"
           :readonly="selfInfoReadonly"
-          :rules="[{ required: true, message: '请填写投保人手机号' }]"
+          :rules="[
+            { required: true, message: '请填写投保人手机号' },
+            {
+              validator: isPhone,
+              message: '请填写正确的投保人手机号'
+            }
+          ]"
           @click.native="inputClick"
         />
         <cr-field
@@ -45,15 +63,21 @@
           type="email"
           label="电子邮箱"
           placeholder="用户接收电子保单"
-          :rules="[{ required: true, message: '请填写电子邮箱' }]"
+          :rules="[
+            { required: true, message: '请填写电子邮箱' },
+            {
+              validator: isEmail,
+              message: '请填写正确的电子邮箱'
+            }
+          ]"
         />
         <cr-field
           v-model="formData.holderUserInfo.annualIncome"
           name="holderUserInfo_annualIncome"
           label="年收入"
           type="digit"
-          placeholder="请输入投保人年收入"
-          :rules="[{ required: true, message: '请输入投保人年收入' }]"
+          placeholder="请填写投保人年收入"
+          :rules="[{ required: true, message: '请填写投保人年收入' }]"
         />
         <cr-field
           v-model="formData.holderUserInfo.addressCode"
@@ -72,8 +96,14 @@
           v-model="formData.holderUserInfo.addressDetail"
           name="holderUserInfo_addressDetail"
           label="详细地址"
-          placeholder="请输入居住详细地址"
-          :rules="[{ required: true, message: '请输入居住详细地址' }]"
+          placeholder="请填写居住详细地址"
+          :rules="[
+            { required: true, message: '请填写投保人居住详细地址' },
+            {
+              validator: isChnAddress,
+              message: '请填写正确的地址，至少于5个汉字，且必须有1位数字'
+            }
+          ]"
         />
         <cr-field
           v-model="formData.holderUserInfo.occupation"
@@ -92,7 +122,7 @@
           v-model="formData.holderUserInfo.longTerm"
           name="holderUserInfo_longTerm"
           label="身份证有效期"
-          :rules="[{ required: true, message: '请选择身份证有效期' }]"
+          :rules="[{ required: true, message: '请选择投保人身份证有效期' }]"
         >
           <template #input>
             <cr-radio-btn
@@ -106,7 +136,13 @@
           v-model="formData.holderUserInfo.validEnd"
           name="holderUserInfo_validEnd"
           label="有效期至"
-          :rules="[{ required: true, message: '请选择您的证件有效止期' }]"
+          :rules="[
+            { required: true, message: '请选择投保人身份证止期' },
+            {
+              validator: isFutureDate,
+              message: '投保人身份证止期必须大于当前日期'
+            }
+          ]"
         >
           <template #input>
             <popup-date-picker
@@ -151,7 +187,13 @@
           label="身高"
           type="number"
           placeholder="请填写被保人身高"
-          :rules="[{ required: true, message: '请填写被保人身高' }]"
+          :rules="[
+            { required: true, message: '请填写被保人身高' },
+            {
+              validator: isIntegerHeight,
+              message: '请填写正确的被保人身高，最多3个数字'
+            }
+          ]"
         >
           <div class="form-unit" slot="button">厘米</div>
         </cr-field>
@@ -161,7 +203,13 @@
           label="体重"
           type="number"
           placeholder="请填写被保人体重"
-          :rules="[{ required: true, message: '请填写被保人体重' }]"
+          :rules="[
+            { required: true, message: '请填写被保人体重' },
+            {
+              validator: isIntegerHeight,
+              message: '请填写正确的被保人体重，最多3个数字'
+            }
+          ]"
         >
           <div class="form-unit" slot="button">公斤</div>
         </cr-field>
@@ -170,44 +218,62 @@
             v-model="formData.insuredUserInfo.name"
             name="insuredUserInfo_name"
             label="姓名"
-            placeholder="请输入投保人姓名"
+            placeholder="请填写被保人姓名"
             :readonly="infoReadonly"
-            :rules="[{ required: true, message: '请输入投保人姓名' }]"
+            :rules="[
+              { required: true, message: '请填写投保人姓名' },
+              {
+                validator: isChineseName,
+                message: '请填写正确的被保人姓名，最少2个中文字符'
+              }
+            ]"
           />
           <cr-field
             v-model="formData.insuredUserInfo.idNo"
             name="insuredUserInfo_idNo"
             label="身份证号"
-            placeholder="请填写投保人身份证号"
+            placeholder="请填写被保人身份证号"
             :readonly="infoReadonly"
-            :rules="[{ required: true, message: '请填写投保人身份证号' }]"
+            :rules="[
+              { required: true, message: '请填写被保人身份证号' },
+              {
+                validator: isIdNo,
+                message: '请填写正确的被保人身份证号'
+              }
+            ]"
           />
           <cr-field
             v-model="formData.insuredUserInfo.phoneNo"
             name="insuredUserInfo_phoneNo"
             label="手机号"
             type="tel"
-            placeholder="请填写投保人手机号"
-            :rules="[{ required: true, message: '请填写投保人手机号' }]"
+            placeholder="请填写被保人手机号"
+            :rules="[
+              { required: true, message: '请填写被保人手机号' },
+              {
+                validator: isPhone,
+                message: '请填写正确的被保人手机号'
+              }
+            ]"
           />
           <cr-field
             v-model="formData.insuredUserInfo.annualIncome"
             name="insuredUserInfo_annualIncome"
             label="年收入"
             type="digit"
-            placeholder="请输入投保人年收入"
-            :rules="[{ required: true, message: '请输入投保人年收入' }]"
+            placeholder="请填写被保人年收入"
+            :rules="[{ required: true, message: '请填写被保人年收入' }]"
           />
           <cr-field
             v-model="formData.insuredUserInfo.addressCode"
             name="insuredUserInfo_addressCode"
             label="居住省市"
-            :rules="[{ required: true, message: '请选择投保人居住省市' }]"
+            :rules="[{ required: true, message: '请选择被保人居住省市' }]"
           >
             <template #input>
               <popup-area-picker
                 v-model="formData.insuredUserInfo.addressCode"
-                placeholder="请选择投保人居住省市"
+                placeholder="请选择被保人居住省市"
               />
             </template>
           </cr-field>
@@ -215,8 +281,14 @@
             v-model="formData.insuredUserInfo.addressDetail"
             name="insuredUserInfo_weigaddressDetailht"
             label="详细地址"
-            placeholder="请输入居住详细地址"
-            :rules="[{ required: true, message: '请输入居住详细地址' }]"
+            placeholder="请填写被保人居住详细地址"
+            :rules="[
+              { required: true, message: '请填写被保人居住详细地址' },
+              {
+                validator: isChnAddress,
+                message: '请填写正确的地址，至少于5个汉字，且必须有1位数字'
+              }
+            ]"
           />
           <cr-field
             v-model="formData.insuredUserInfo.occupation"
@@ -236,7 +308,7 @@
             v-model="formData.insuredUserInfo.longTerm"
             name="insuredUserInfo_longTerm"
             label="身份证有效期"
-            :rules="[{ required: true, message: '请选择身份证有效期' }]"
+            :rules="[{ required: true, message: '请选择被保人身份证有效期' }]"
           >
             <template #input>
               <cr-radio-btn
@@ -250,7 +322,13 @@
             v-model="formData.insuredUserInfo.validEnd"
             name="insuredUserInfo_validEnd"
             label="有效期至"
-            :rules="[{ required: true, message: '请选择您的证件有效止期' }]"
+            :rules="[
+              { required: true, message: '请选择被保人身份证止期' },
+              {
+                validator: isFutureDate,
+                message: '被保人身份证止期必须大于当前日期'
+              }
+            ]"
           >
             <template #input>
               <popup-date-picker
@@ -312,8 +390,8 @@
           v-model="formData.holderUserInfo.bankCardName"
           name="insuredUserInfo_bankCardName"
           label="持卡人"
-          placeholder="请输入持卡人姓名"
-          :rules="[{ required: true, message: '请输入持卡人姓名' }]"
+          placeholder="请填写持卡人姓名"
+          :rules="[{ required: true, message: '请填写持卡人姓名' }]"
         />
         <cr-field
           v-model="formData.holderUserInfo.bankCardCode"
@@ -334,8 +412,14 @@
           name="insuredUserInfo_bankCardNo"
           label="银行卡号"
           type="digit"
-          placeholder="请输入银行卡号"
-          :rules="[{ required: true, message: '请输入银行卡号' }]"
+          placeholder="请填写银行卡号"
+          :rules="[
+            { required: true, message: '请填写银行卡号' },
+            {
+              validator: isBankNumber,
+              message: '请填写正确的银行卡号'
+            }
+          ]"
         />
       </cr-cell-group>
       <good-action @leftClick="goInsureState = true" :content="goodActionInfo" />
@@ -393,7 +477,15 @@ import Detail from "@/api/detail.huagui.shouxian";
 import { list, trail } from "@/api/product";
 import { getFamilyList } from "@/api/user";
 import { parseTime } from "@/service/utils";
-import { isIdNo } from "@/service/validation";
+import {
+  isIdNo,
+  isChineseName,
+  isPhone,
+  isEmail,
+  isInteger,
+  isBankNumber,
+  isChnAddress
+} from "@/service/validation";
 
 const AUTO_SAVE_KEY = "PolicyFormData";
 const AUTO_SAVE_TARGET = "formData";
@@ -556,6 +648,23 @@ export default {
     this.getFamilyList();
   },
   methods: {
+    isIdNo,
+    isChineseName,
+    isPhone,
+    isEmail,
+    isBankNumber,
+    isChnAddress,
+    isIntegerHeight(str) {
+      return isInteger(str) && str.length <= 3;
+    },
+    isFutureDate(str) {
+      if (str) {
+        const currentTimestamp = new Date().valueOf();
+        const selectTimestamp = new Date(str).valueOf();
+        return selectTimestamp > currentTimestamp;
+      }
+      return false;
+    },
     ...mapActions(["setAuthXyqb"]),
     ...mapActions("user", ["setUserInfo"]),
     inputClick() {
@@ -567,6 +676,7 @@ export default {
       this.goInsureState = true;
     },
     onFormFailed(errorInfo) {
+      console.log(errorInfo);
       const { errors } = errorInfo;
       this.$notify({ type: "warning", message: errors[0].message });
     },