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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/11062.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

火山引擎VeDI最新分享：消费行业的数据飞轮从“四更”开始

火山引擎VeDI最新分享：消费行业的数据飞轮从“四更”开始

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 数据飞轮&#xff0c;正在为消费行业的数字化升级提供一套全新模式。 在刚刚结束的《全链路增长&#xff1a;数据飞轮转动消费新生力》专场活动上&#xff0c;火山引…
阅读更多...
MySQL 8.0详细安装配置教程

MySQL 8.0详细安装配置教程

一. 前言 MySQL是目前最为流行的开源数据库产品&#xff0c;是完全网络化跨平台的关系型数据库系统。它起初是由瑞典MySQLAB公司开发&#xff0c;后来被Oracle公司收购&#xff0c;目前属于Oracle公司。因为开源&#xff0c;所以任何人都能从官网免费下载MySQL软件&#xff0c…
阅读更多...
SSIS对SQL Server向Mysql数据转发表数据 （二）

SSIS对SQL Server向Mysql数据转发表数据 （二）

1、在SQL Server数据库创建一个数据库表&#xff1a;users USE [Test1] GO/****** Object: Table [dbo].[users] Script Date: 2023/7/27 16:25:11 ******/ SET ANSI_NULLS ON GOSET QUOTED_IDENTIFIER ON GOCREATE TABLE [dbo].[users]([id] [int] IDENTITY(1,1) NOT NUL…
阅读更多...
一些有意思的人工智能发展状况数据

一些有意思的人工智能发展状况数据

随着大型语言模型&#xff08;LLM&#xff09;的引入&#xff0c;机器学习&#xff08;ML&#xff09;和人工智能&#xff08;AI&#xff09;首次被日常开发人员所使用。这些令人感觉很神奇的应用程序&#xff0c;甚至是拥有数十亿研发支出的&#xff0c;在以前连大型科技公司几…
阅读更多...
HttpServletRequest类全解析

HttpServletRequest类全解析

HttpServletRequest 是 Java Servlet API 中的接口&#xff0c;它是 ServletRequest 接口的子接口&#xff0c;提供了更多用于访问 HTTP 请求信息的方法。HttpServletRequest 主要用于处理客户端发起的 HTTP 请求&#xff0c;并包含了许多用于获取请求信息的方法。 以下是 Htt…
阅读更多...
Docker和K8s区别，使用场景，具体怎么使用以及详细命令

Docker和K8s区别，使用场景，具体怎么使用以及详细命令

目录 一、Docker 和 Kubernetes 的区别二、Docker 的使用场景三、Kubernetes 的使用场景四、Docker 的具体使用方法五、Kubernetes 的具体使用方法 Docker 和 Kubernetes(简称 K8s) 都是容器技术领域中非常重要的工具&#xff0c;但它们在构建、部署和管理容器化应用程序方面发…
阅读更多...
Vue2基础七、refnextTick自定义指令

Vue2基础七、refnextTick自定义指令

零、文章目录 Vue2基础七、ref&nextTick&自定义指令 1、ref **作用&#xff1a;**利用 ref 和 $refs 可以用于 获取 dom 元素, 或 组件实例**特点&#xff1a;**查找范围 → 当前组件内 (更精确稳定)&#xff0c;用document.querySelect(‘.box’) 获取的是整个页面…
阅读更多...
nacos安装与基础配置

nacos安装与基础配置

源码 https://github.com/alibaba/nacos https://gitee.com/mirrors/Nacos 编译 git clone https://github.com/alibaba/nacos.git cd nacos/ mvn -Prelease-nacos -Dmaven.test.skiptrue clean install -U ls -al distribution/target/// change the $version to your ac…
阅读更多...
【数据结构】实验八：树

【数据结构】实验八：树

实验八 树 一、实验目的与要求 1&#xff09;理解树的定义&#xff1b; 2&#xff09;掌握树的存储方式及基于存储结构的基本操作实现&#xff1b; 二、 实验内容 题目一&#xff1a;采用树的双亲表示法根据输入实现以下树的存储&#xff0c;并实现输入给定结点的双亲结点…
阅读更多...
基于罪名法务智能知识图谱（含码源）：基于280万罪名预测、20W法务问答与法律资讯问答功能

基于罪名法务智能知识图谱（含码源）：基于280万罪名预测、20W法务问答与法律资讯问答功能

项目设计集合&#xff08;人工智能方向&#xff09;&#xff1a;助力新人快速实战掌握技能、自主完成项目设计升级&#xff0c;提升自身的硬实力&#xff08;不仅限NLP、知识图谱、计算机视觉等领域&#xff09;&#xff1a;汇总有意义的项目设计集合&#xff0c;助力新人快速实…
阅读更多...
如何构建适合自己的DevOps软件测试改进方案

如何构建适合自己的DevOps软件测试改进方案

​目录 DevOps成熟度模型分析 构建适合企业自身性能的测试过程改进框架 资料获取方法 根据2022年的DevOps全球调查报告显示&#xff0c;主流软件企业采用或部分采用DevOps且已获得良好成效的占比已达70%&#xff0c;DevOps俨然成为当下软件开发研究的重要方向。 测试作为软…
阅读更多...
如何使用 PHP 删除数据？

如何使用 PHP 删除数据？

当你想要从数据库中删除数据时&#xff0c;PHP可以帮你实现这个功能。以下是一些简单的步骤和代码示例&#xff0c;帮助你从新手的角度用幽默的语气回答如何使用PHP删除数据。 首先&#xff0c;你需要连接到数据库。这可以通过使用PHP中的mysqli_connect函数来实现。以下是连接…
阅读更多...
uni-app 微信小程序：启用组件按需注入

uni-app 微信小程序：启用组件按需注入

uni-app 微信小程序&#xff1a;启用组件按需注入 文章目录 uni-app 微信小程序&#xff1a;启用组件按需注入一、官方文档按需注入注意事项 二、HBuilder X 设置三、效果 一、官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/ability/lazyload.html 按…
阅读更多...
kotlin异常处理try-catch-finally

kotlin异常处理try-catch-finally

kotlin异常处理try-catch-finally fun main(args: Array<String>) {try {println("a")} catch (e: Exception) {//异常捕获println("a-catch: $e")} finally {//善后&#xff0c;无论是否异常&#xff0c;都会执行println("a-finally")}t…
阅读更多...
内存泄漏是什么？有什么危害

内存泄漏是什么？有什么危害

内存泄漏是什么&#xff1f;有什么危害 1. 前言1.内存泄漏是什么&#xff1f;2. 为什么会发生内存泄漏3. 内存泄漏的危害4. 总结 1. 前言 在各种项目开发中&#xff0c;内存泄漏是一个很严重的问题。对资源管理、性能优越、系统稳定性&#xff0c;以及是否安全产生极大印象。本…
阅读更多...
CCD光斑图像质量分析仪的作用和工作原理

CCD光斑图像质量分析仪的作用和工作原理

激光光斑的成型在激光加工中起着至关重要的作用&#xff0c;在实际加工中激光可以被变换成各种形状以满足加工需求&#xff0c;激光光斑的形状大致可以被分为四种&#xff1a;矩形、环形、椭圆形、线形。矩形的激光光斑适用于激光切割、激光焊接&#xff0c;环形的激光光斑适用…
阅读更多...
odoo16-python框架-动作

odoo16-python框架-动作

总结 1 模型和视图的 设计之美 view_ids, view_id,view_mode 最终目的都是为了生成views, 也就是视图. 模型是死的,像男人,一成不变 视图像女人,千变万化, 姿态万千 一阴一阳之谓道,设计之美又在这里得到了体现 2 所有的动作都可以通过web界面来配置 可以通过在"设…
阅读更多...
【Python入门系列】第十八篇：Python自然语言处理和文本挖掘

【Python入门系列】第十八篇：Python自然语言处理和文本挖掘

文章目录 前言一、Python常用的NLP和文本挖掘库二、Python自然语言处理和文本挖掘1、文本预处理和词频统计2、文本分类3、命名实体识别4、情感分析5、词性标注6、文本相似度计算 总结 前言 Python自然语言处理&#xff08;Natural Language Processing&#xff0c;简称NLP&…
阅读更多...
慕课网Go-3.函数、defer、panic、recover、结构体、指针、interface

慕课网Go-3.函数、defer、panic、recover、结构体、指针、interface

函数 package mainimport "fmt"func add(a int, b int) (int, error) {return a b, nil }func add2(a int, b int) (sum int, err error) {sum a berr nilreturn sum, err }// 参数数量任意 func add3(items ...int) (sum int) {for _, value : range items {su…
阅读更多...
注解和反射02--Java反射

注解和反射02--Java反射

反射 动态和静态语言获取反射对象Java反射机制提供的功能Java反射优缺点反射相关的主要API 动态和静态语言 要学习反射&#xff0c;首先我们需要了解一下静态和动态语言。 动态语言&#xff1a;是一类在运行时可以改变其结构的语言&#xff1a;例如新的函数、对象、甚至代码可…
阅读更多...
最新文章

Copyright @ 2022~2023