element 表单验证 深层验证绑定

直接上代码 :prop 和prop 都可以，vue2和vue3或者是element、elementplus都可以用

<template><div class="page page-table"><section class="page-query-form"><breadcrumb :hasLine="false" /></section><div class="table-content" style="height:calc(100% - 70rem)"><el-form label-position="top" ref="ruleForm" label-width="80px" :model="formData"><div class="type-name"><span>人员信息</span></div><el-row :gutter="20"><el-col :span="5"><el-form-item label="人员姓名" :prop="'clientStaffVo.name'" :rules="rules.name"><el-input size="small"   v-model="formData.clientStaffVo.name" placeholder="请输入"></el-input></el-form-item></el-col><el-col :span="4"><el-form-item label="人员性别" :prop="'clientStaffVo.sex'" :rules="rules.sex"><el-radio-group v-model="formData.clientStaffVo.sex"><el-radio label="1">男</el-radio><el-radio label="0">女</el-radio></el-radio-group></el-form-item></el-col><el-col :span="5"><el-form-item label="联系电话" prop="clientStaffVo.phone" :rules="rules.phone"><el-input size="small"   v-model="formData.clientStaffVo.phone" placeholder="请输入"></el-input></el-form-item></el-col><el-col :span="5"><el-form-item label="身份证号" prop="clientStaffVo.cardId" :rules="rules.cardId"><el-input size="small"   v-model="formData.clientStaffVo.cardId" placeholder="请输入"></el-input></el-form-item></el-col><el-col :span="5"><el-form-item label="工作单位" prop="clientStaffVo.unit" :rules="rules.unit"><el-input  size="small"  v-model="formData.clientStaffVo.unit" placeholder="请输入"></el-input></el-form-item></el-col></el-row><el-row :gutter="20"><el-col :span="5"><el-form-item label="上传身份证" prop="clientStaffVo.cardUpload" :rules="rules.cardUpload"><div class="file-box"><IDCardUploader @uploadDone='uploadDone' :list='formData.clientStaffVo.cardUpload' fieldName='cardUpload' prefix='cardUpload' text="身份证人像面"></IDCardUploader><!-- <IDCardUploader @uploadDone='uploadDone' :list='formData.clientStaffVo.cardUploadOpposite' fieldName='cardUploadOpposite' prefix='cardUploadOpposite' text="身份证国徽面"></IDCardUploader> --></div></el-form-item></el-col><el-col :span="5"><el-form-item :label="'身份证国徽面'" prop="clientStaffVo.cardUploadOpposite" :rules="rules.cardUploadOpposite"><div class="file-box"><IDCardUploader @uploadDone='uploadDone' :list='formData.clientStaffVo.cardUploadOpposite' fieldName='cardUploadOpposite' prefix='cardUploadOpposite' text="身份证国徽面"></IDCardUploader></div></el-form-item></el-col><el-col :span="5"><el-form-item label="上传驾驶证" prop="id"><div class="file-box"><IDCardUploader @uploadDone='uploadDone' :list='formData.clientStaffVo.drivingUpload' fieldName='drivingUpload' prefix='drivingUpload' text="上传驾驶证"></IDCardUploader><!-- <IDCardUploader @uploadDone='uploadDone' :list='formData.clientStaffVo.drivingUploadOpposite' fieldName='drivingUploadOpposite' prefix='drivingUploadOpposite' text="上传驾驶证副业"></IDCardUploader> --></div></el-form-item></el-col><el-col :span="5"><el-form-item label="上传驾驶证副业" prop="id"><div class="file-box"><IDCardUploader @uploadDone='uploadDone' :list='formData.clientStaffVo.drivingUploadOpposite' fieldName='drivingUploadOpposite' prefix='drivingUploadOpposite' text="上传驾驶证副业"></IDCardUploader></div></el-form-item></el-col></el-row><div class="type-name"><span>来访车辆信息</span></div><el-row :gutter="20"><el-col :span="5"><el-form-item label="车牌号码"><el-input  size="small"   v-model="formData.clientCarVo.licensePlateNum" placeholder="请输入"></el-input></el-form-item></el-col><el-col :span="5"><el-form-item label="随行人数"><el-select size="small"   v-model="formData.clientCarVo.num" placeholder="请选择"><el-option v-for="item in dictMapList.numList" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-form-item></el-col></el-row><div class="type-name"><span>预约时间</span></div><el-row :gutter="20"><el-col :span="5"><el-form-item label="预计进企时间" prop="gmtInto" :rules="rules.gmtInto"><el-date-picker size="small"  :picker-options="startPickerOptions"   v-model="formData.gmtInto" type="datetime" value-format="yyyy-MM-dd HH:mm" placeholder="选择日期时间"></el-date-picker></el-form-item></el-col><el-col :span="5"><el-form-item label="预计离企时间" prop="gmtLeave" :rules="rules.gmtLeave"><el-date-picker  size="small" :picker-options="endPickerOptions"    v-model="formData.gmtLeave" type="datetime" value-format="yyyy-MM-dd HH:mm" placeholder="选择日期时间"></el-date-picker></el-form-item></el-col></el-row><div class="type-name"><span>访问事由</span></div><el-row :gutter="20"><el-col :span="5"><el-form-item label="被访企业 "  prop="enterprise"   :rules='rules.enterprise'><el-select  size="small"  v-model="formData.enterprise"    placeholder="请选择"><el-option v-for="item in dictMapList.enterpriseList" :key="item.id" :label="item.label" :value="item.id" @click.native="checkedenterprise(item)"></el-option></el-select></el-form-item></el-col><el-col :span="4"><el-form-item label="被访人员" prop="name" :rules="rules.name"><el-input size="small"   v-model="formData.name" placeholder="请输入"></el-input></el-form-item></el-col><el-col :span="4"><el-form-item label="被访人电话" prop="phone" :rules="rules.phone"><el-input size="small"    v-model="formData.phone" placeholder="请输入"></el-input></el-form-item></el-col><el-col :span="4"><el-form-item label="被访人部门" prop="departmentId" :rules="rules.departmentId"><el-input size="small"    v-model="formData.departmentId" placeholder="请输入"></el-input></el-form-item></el-col><el-col :span="7"><el-form-item label="来访事由" prop="reasons" :rules="rules.reasons"><el-input size="small"    v-model="formData.reasons" placeholder="请输入"></el-input></el-form-item></el-col></el-row></el-form><div class="btns"><el-button type="primary" @click="handleConfirm">提交预约</el-button><el-button plain @click="handlerest">重置</el-button></div></div></div>
</template><script>import Amap from '@/components/amap/index.vue';import breadcrumb from '@/components/breadcrumb/index.vue';import * as config from '@/common/env.json';import IDCardUploader from '@/components/id-card-uploader/id-card-uploader.vue';export default {components: { breadcrumb, Amap, IDCardUploader },data() {return {rules: {name: [{ required: true, message: '请输入', trigger: ['blur', 'change'] },{ validator: this.validation, check: ['empty', 'blank'] }],sex: [{ required: true, message: '请选择', trigger: ['blur', 'change'] },],phone: [{ required: true, message: '请输入', trigger: ['blur', 'change'] },{ validator: this.validation, check: ['mobile'] }],cardId: [{ required: true, message: '请输入', trigger: ['blur', 'change'] },{ validator: this.validation, check: ['id'] }],unit: [{ required: true, message: '请输入', trigger: ['blur', 'change'] },{ validator: this.validation, check: ['empty', 'blank'] }],gmtInto: [{ required: true, message: '请选择', trigger: ['blur', 'change'] },],gmtLeave: [{ required: true, message: '请选择', trigger: ['blur', 'change'] },],enterprise: [{ required: true, message: '请选择', trigger: ['blur', 'change'] },],name: [{ required: true, message: '请输入', trigger: ['blur', 'change'] },{ validator: this.validation, check: ['empty', 'blank'] }],phone: [{ required: true, message: '请输入', trigger: ['blur', 'change'] },{ validator: this.validation, check: ['mobile'] }],departmentId: [{ required: true, message: '请输入', trigger: ['blur', 'change'] },{ validator: this.validation, check: ['empty', 'blank'] }],reasons: [{ required: true, message: '请输入', trigger: ['blur', 'change'] },{ validator: this.validation, check: ['empty', 'blank'] }],cardUpload: [{ required: true, message: '请上传', trigger: ['blur', 'change'] },],cardUploadOpposite: [{ required: true, message: '请上传', trigger: ['blur', 'change'] },],},dictMapList: {numList: [{ label: '1人', value: 1 },{ label: '2人', value: 2 },{ label: '3人', value: 3 },{ label: '4人', value: 4 },{ label: '5人', value: 5 },{ label: '6人', value: 6 },{ label: '8人', value: 8 },{ label: '9人', value: 9 },{ label: '10人', value: 10 },{ label: '15人', value: 15 },],enterpriseList: [],areaList: [],},formData: {clientCarVo: {carType: null,rsqasUpload: null,num: null,travelUpload: '',travelUploadOpposite: '',},clientStaffVo: {cardId: null,cardUpload: '',cardUploadOpposite: '',drivingUpload: '',drivingUploadOpposite: '',name: null,phone: null,sex: null,unit: null,},},}},created() {this.getTyep().then(() => {if (this.$route.query.id) {this.getInfo()}})},methods: {startPickerOptions: {disabledDate(time) {return time.getTime() < (Date.now() - 3600 * 1000 * 24)},selectableRange: '00:00:00 - 23:59:59',},checkedenterprise(item) {this.formData.clientCarVo.socialCode = item.value;this.formData.clientStaffVo.socialCode = item.value;},getInfo() {this.$api.apiClientStaffSubscribeInfo({ id: this.$route.query.id }).then((res) => {if (res.success) {this.formData = res.data;this.formData.enterprise=Number(this.formData.enterprise)}})},uploadDone(val, fileName) {this.formData.clientStaffVo[fileName] = val;this.$refs.ruleForm.validate();},async getTyep() {await this.$api.apiDictSelectDictMap({ key: 'industrial_area,economic_trade' }).then((res) => {if (res.success) {this.dictMapList.areaList = res.data.industrial_area;this.dictMapList.economicTrade = res.data.economic_trade;};})this.dictMapList.enterpriseList = await this.$api.apiSelectEnterpriseInfoNames({ name: null }).then(res => {return res.data.map(i => {return {id: i.id,value: i.socialCreditCode,label: i.enterpriseName,}})});},handlerest() {this.$confirm('', {dangerouslyUseHTMLString: true,message: `<h2>操作确认</h2><span>该操作不可逆，是否确认重置填写的数据？</span>`,confirmButtonText: '确定',cancelButtonText: '取消',showClose: false,type: 'warning',}).then(() => {if (this.$route.query.id) {this.getInfo();} else {this.formData = {clientCarVo: {carType: null,rsqasUpload: null,num: null,travelUpload: '',travelUploadOpposite: '',},clientStaffVo: {cardId: null,cardUpload: '',cardUploadOpposite: '',drivingUpload: '',drivingUploadOpposite: '',name: null,phone: null,sex: null,unit: null,},};this.$refs.ruleForm.resetFields();}})},async handleConfirm() {this.$refs.ruleForm.validate((valid) => {if (valid) {let params = JSON.parse(JSON.stringify(this.formData));if (this.$route.query.id) {this.$api.apiClientStaffSubscribeUpdate(params).then((res) => {if (res.success) {this.$notify({title: '操作成功',message: '数据提交成功',type: 'success',duration: 1000,position: 'top-left',});}})} else {this.$api.apiClientStaffSubscribeSave(params).then((res) => {if (res.success) {this.$notify({title: '操作成功',message: '数据提交成功',type: 'success',duration: 1000,position: 'top-left',});this.formData = {clientCarVo: {carType: null,rsqasUpload: null,num: null,travelUpload: '',travelUploadOpposite: '',},clientStaffVo: {cardId: null,cardUpload: '',cardUploadOpposite: '',drivingUpload: '',drivingUploadOpposite: '',name: null,phone: null,sex: null,unit: null,},};this.$refs.ruleForm.resetFields();}})}} else {console.log('error submit!!');return false;}});},}}
</script><style lang="less" scoped>
.table-content{.scrollbar();
}
.type-name{span{display: inline-block;border-bottom: 2px solid#409EFF; padding: 5px 0;}
}
.btns{ text-align: center;}
.file-box{ display: flex; justify-content: space-around;}
</style>