当前位置： 首页 > news >正文

element 表单验证 深层验证绑定

news 2025/8/3 0:58:36

直接上代码 :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>
http://www.lryc.cn/news/103151.html

相关文章：

  • brew 换镜像网站
  • WIZnet W5500-EVB-Pico 静态IP配置教程（二）
  • R语言无法调用stats.dll的问题解决方案[补充]
  • 无线蓝牙耳机有什么推荐？怎么选择适合自己的耳机？七款蓝牙耳机分享
  • 【数据分析专栏之Python篇】四、pandas介绍
  • 《算法竞赛·快冲300题》每日一题：“最小生成树”
  • mysql的主键选择
  • Eureka 学习笔记1：服务端实例缓存
  • vue : 无法加载文件 C:\Users\86182\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。
  • FLinkCDC读取MySQl时间戳时区相关问题解决汇总
  • 第三篇-Tesla P40+CentOS7+CUDA 11.7 部署实践
  • AC+FIT（瘦AP）配置浅谈
  • 【Python】PySpark 数据计算 ② ( RDD#flatMap 方法 | RDD#flatMap 语法 | 代码示例 )
  • 二叉树题目：左叶子之和
  • Spark SQL报错： Task failed while writing rows.
  • Linux系统下U盘打不开: No application is registered as handling this file
  • 07 定时器处理非活动连接（上）
  • python——案例四：判断字符串中的元素组成
  • 一起学算法（插入排序篇）
  • JVM基础篇-本地方法栈与堆
  • 防雷保护区如何划分，防雷分区概念LPZ介绍
  • 随手笔记——3D−3D：ICP求解
  • Python调用各大机器翻译API大全
  • 重生之我要学C++第六天
  • SpringBoot中ErrorPage(错误页面)的使用--【ErrorPage组件】
  • 【Android】APP网络优化学习笔记
  • 简单的知识图谱可视化+绘制nx.Graph()时报错TypeError: ‘_AxesStack‘ object is not callable
  • 【Matlab】基于粒子群优化算法优化BP神经网络的时间序列预测（Excel可直接替换数据）
  • 【机器学习】Cost Function for Logistic Regression
  • 【EI/SCOPUS会议征稿】2023年第四届新能源与电气科技国际学术研讨会 (ISNEET 2023)