Requirement description: Verification form
1. When the area is mainland China, the mobile phone number is required but the contact number is not required; otherwise, the opposite is true.
2. Each email address should conform to the correct email format; when the warehouse type is a virtual warehouse, the email address is required, and in other cases it is optional.
Realization renderings:
Related code:
<g-modal
v-if="xqMb"
@closemb="closeXqMb"
:mbStatus="xqMb"
class="formula-modal"
:maskClosable="false"
:zIndex="110"
:title="form.whWarehouseId ? 'Edit Warehouse' : 'Add Warehouse'"
:footer="null"
:destroyOnClose="true"
:width="'46.875rem'"
>
<div style="width: 44.125rem">
<a-form :model="form" ref="formRef" :rules="rules" v-bind="layout" :labelCol="{ span: 8 }">
<a-row class="row-class">
<a-col>
<a-form-item name="name" label="Warehouse name">
<a-input v-model:value="form.name" type="text" class="w160" />
</a-form-item>
</a-col>
<a-col style="margin-right: 39px">
<a-form-item name="shortName" label="Warehouse short name">
<a-input v-model:value="form.shortName" type="text" class="w160" />
</a-form-item>
</a-col>
</a-row>
<a-row class="row-class">
<a-form-item name="formAreaName" label="Area" style="width: 100%" :labelCol="{ span: 3 }">
<a-cascader
style="width: 98%"
v-model:value="form.formAreaName"
:options="treeData"
:fieldNames="{ label: 'name', value: 'areaCode', children: 'children', isLeaf: 'leaf' }"
placeholder="Please select a region"
@change="areaChange"
change-on-select
/>
</a-form-item>
</a-row>
<a-row class="row-class">
<a-form-item name="address" label="Detailed address" style="width: 100%" :labelCol="{ span: 3 }">
<a-input name="address" v-model:value="form.address" type="text" style="width: 98%" />
</a-form-item>
</a-row>
<a-row class="row-class">
<a-col>
<a-form-item name="postCode" label="PostCode">
<a-input v-model:value="form.postCode" type="number" class="w160" />
</a-form-item>
</a-col>
<a-col style="margin-right: 46px">
<a-form-item name="phone" label="mobile number">
<a-input v-model:value="form.phone" type="number" class="w160" />
</a-form-item>
</a-col>
</a-row>
<a-row class="row-class">
<a-col>
<a-form-item name="deskNumber" label="Contact number">
<a-input v-model:value="form.deskNumber" type="number" class="w160" />
</a-form-item>
</a-col>
<a-col style="margin-right: 46px">
<a-form-item name="keeperEmployeeId" label="Warehousekeeper">
<a-select
v-model:value="form.keeperEmployeeId"
class="w160"
@change="keeperChange"
placeholder="Please select a warehouse keeper"
>
<a-select-option
v-for="(item, index) in keepersOption"
:key="'keepersOption' + index"
:value="item.userId"
>{<!-- -->{ item.postName }}-{<!-- -->{ item.userName }}</a-select-option
>
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-row class="row-class" style="margin-bottom: 10px">
<a-form-item name="emailAddress" label="Mailbox" style="width: 100%" :labelCol="{ span: 3 }">
<div v-for="(item, index) in emailAddressList" :key="item.emailAddressId" style="position: relative">
<a-input v-model:value="item.emailAddress" style="width: 98%; margin-bottom: 5px" :maxlength="30" />
<a-space class="icon-place">
<plus-circle-outlined @click="addEmail(item, index)" />
<minus-circle-outlined @click="delEmail(item)" v-if="emailAddressList.length != 1" />
</a-space>
</div>
</a-form-item>
</a-row>
<a-row class="row-class">
<a-form-item name="type" label="Warehouse Type">
<a-select v-model:value="form.type" class="w160" placeholder="Please select the warehouse type">
<a-select-option :value="0">Entity warehouse</a-select-option>
<a-select-option :value="1">Virtual warehouse</a-select-option>
<a-select-option :value="2">Third-party logistics warehouse</a-select-option>
<a-select-option :value="3">Transit warehouse</a-select-option>
</a-select>
</a-form-item>
</a-row>
<div class="center">
<a-button type="primary" class="btn" @click="sub">Confirm</a-button>
<a-button type="ghost" class="btn" @click="closeXqMb">Cancel</a-button>
</div>
</a-form>
</div>
</g-modal>
Several validation rules
//Address
let nameRule = async (_rule: RuleObject, value: ns) => {<!-- -->
if (!value) {<!-- -->
return Promise.reject("Required!");
} else {<!-- -->
return Promise.resolve();
}
};
let typeRule = async (_rule: RuleObject, value: ns) => {<!-- -->
if (value === "" || value === null) {<!-- -->
return Promise.reject("Required option!");
} else {<!-- -->
return Promise.resolve();
}
};
let shortNameRule = async (_rule: RuleObject, value: string) => {<!-- -->
if (!value) {<!-- -->
return Promise.reject("Required!");
} else {<!-- -->
if (value.length > 3) {<!-- -->
return Promise.reject("1~3 characters");
} else {<!-- -->
return Promise.resolve();
}
}
};
let emailAddressList = ref([
{<!-- -->
emailAddressId: Math.random(),
emailAddress: "",
},
] as any);
var notNone = async (_rule: RuleObject, value: string) => {<!-- -->
var regu = "^[ ] + $";
var re = new RegExp(regu);
if (re.test(value)) {<!-- -->
return Promise.reject("cannot be empty");
} else {<!-- -->
return Promise.resolve();
}
};
var noChinese = async (_rule: RuleObject, value: string) => {<!-- -->
console.log(escape(value).indexOf("%u"));
var reg = /^[a-zA-Z] + $/;
if (reg.test(value)) {<!-- -->
return Promise.resolve();
} else {<!-- -->
return Promise.reject("Please enter English");
}
};
var emailRule = async (_rule: RuleObject, value: string) => {<!-- -->
var reg = /^[A-Za-z0-9\\一-\\龥] + @[a-zA-Z0-9_-] + (\.[a-zA-Z0-9_-] + ) + $/;
console.log(value, "emailRule");
console.log(emailAddressList.value, "emailRule111111111");
let i = 0;
for (const item of emailAddressList.value) {<!-- -->
if (item?.emailAddress & amp; & amp; reg.test(item?.emailAddress)) {<!-- -->
i + + ;
}
}
if (i == (emailAddressList?.value?.length 0)) {<!-- -->
return Promise.resolve();
} else {<!-- -->
return Promise.reject("Please fill in the correct email format");
}
};
const rules = computed(() => {<!-- -->
let obj = {<!-- -->
name: [
{<!-- --> required: true, validator: nameRule, trigger: ["blur", "change"] },
{<!-- --> required: true, validator: notNone, trigger: ["blur", "change"] },
{<!-- --> max: 32, message: "between 1-32 characters", trigger: ["blur", "change"] },
],
shortName: [
{<!-- --> required: true, validator: shortNameRule, trigger: ["blur", "change"] },
{<!-- --> required: true, validator: noChinese, trigger: ["blur", "change"] },
{<!-- --> required: true, validator: notNone, trigger: ["blur", "change"] },
],
formAreaName: [{<!-- --> required: true, validator: nameRule, trigger: ["blur", "change"] }],
phone: [
{<!-- --> required: true, validator: nameRule, trigger: ["blur", "change"] },
{<!-- --> required: true, validator: notNone, trigger: ["blur", "change"] },
{<!-- --> max: 11, message: "between 1-11 characters", trigger: ["blur", "change"] },
],
postCode: [
// { required: true, validator: nameRule, trigger: ["blur", "change"] },
// { required: true, validator: notNone, trigger: ["blur", "change"] },
{<!-- --> max: 6, message: "cannot exceed 6 digits", trigger: ["blur", "change"] },
],
type: [{<!-- --> required: true, validator: typeRule, trigger: "change" }],
keeperEmployeeId: [{<!-- --> required: true, validator: typeRule, trigger: ["blur", "change"] }],
address: [
{<!-- --> required: true, validator: nameRule, trigger: ["blur", "change"] },
{<!-- --> required: true, validator: notNone, trigger: ["blur", "change"] },
{<!-- --> max: 32, message: "between 1-32 characters", trigger: ["blur", "change"] },
],
deskNumber: [
// { required: true, validator: nameRule, trigger: ["blur", "change"] },
// { required: true, validator: notNone, trigger: ["blur", "change"] },
// { max: 11, message: "between 1-11 characters", trigger: ["blur", "change"] },
] as any,
emailAddress: [{<!-- --> required: false, trigger: ["blur", "change"] }] as any,
};
// When using a virtual warehouse, the email address is required
if (form.type == "1") {<!-- -->
obj.emailAddress = [
{<!-- --> required: true, message: "required", trigger: ["blur", "change"] },
{<!-- --> validator: emailRule, trigger: ["blur", "change"] },
];
} else {<!-- -->
obj.emailAddress = [
{<!-- --> required: false, trigger: ["blur", "change"] },
{<!-- --> validator: emailRule, trigger: ["blur", "change"] },
];
}
// When in the mainland area, the mobile phone number is required, but the phone number is not required; otherwise, the opposite is true
if (formArea.value[0] == "86") {<!-- -->
obj.phone = [
{<!-- --> required: true, validator: nameRule, trigger: ["blur", "change"] },
{<!-- --> required: true, validator: notNone, trigger: ["blur", "change"] },
{<!-- --> max: 11, message: "between 1-11 characters", trigger: ["blur", "change"] },
];
obj.deskNumber = [];
} else {<!-- -->
obj.phone = [
{<!-- --> required: false, message: "", trigger: ["blur", "change"] } as any,
{<!-- --> max: 11, message: "between 1-11 characters", trigger: ["blur", "change"] } as any,
] as any;
obj.deskNumber = [{<!-- --> required: true, message: "required", trigger: ["blur", "change"] }];
}
return obj;
});