Skip to content

M
mongo-ui
Commit f576da6c authored by 郭志伟's avatar 郭志伟
Browse files
Options

fix: 华贵表单验证完善

parent 20e7c738
Show whitespace changes
Inline Side-by-side
Showing with 161 additions and 86 deletions
src/App.vue
View file @ f576da6c
......@@ -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
View file @ f576da6c
......@@ -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
View file @ f576da6c
......@@ -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
View file @ f576da6c
......@@ -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 });
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment