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

Vue3 element-plus表单嵌套表格实现动态表单验证

Vue3结合element-plus表单项可以动态添加/删除

部分效果图如下:
在这里插入图片描述

另表格有添加和删除按钮,点击提交进行表单验证。

  1. 首先data格式必须是对象包裹数组
import { ref, reactive } from 'vue';
import { FormInstance } from 'element-plus'
const froms = ref<FormInstance>()
const form = ref({tableData: <any>[]
})
  1. 给表单绑定form数据
<el-form ref="forms" :model="form">
</el-form>
  1. 表格绑定tableData数据
<el-table :data="form.tableData" border style="width: 100%">
</el-table>
  1. 给表单项增加验证规则
<el-table-column label="身份证号" align="center" show-overflow-tooltip><template #default="{ row, $index }"><el-form-item :prop="`tableData.${$index}.cardId`" :rules="rules.cardId"><el-input size="large" v-model="row.cardId" class="wih-150p" placeholder="请输入身份证号" /></el-form-item></template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="100px"><template #default="{ row, $index }"><el-button text type="danger" @click="delEdit($index, row)">删除</el-button></template>
</el-table-column><el-button size="large" type="primary" @click="subHandle(froms)">提交</el-button>

rules对应data rules对象,prop对应表单字段(注意是表格里每一行对应的字段 forms.tableData[下标].key)
prop的关键就在于下标 $index

  1. 部分验证规则
import { FormRules } from 'element-plus'
const rules = reactive<FormRules>({cardId: [{ required: true, message: "请输入身份证号", trigger: "blur" },{ pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号', trigger: 'blur' }],professional: [{ required: true, message: "请输入从事专业", trigger: "blur" },],months: [{ required: true, message: "请输入投入时间", trigger: "blur" },{ pattern: /^[1-9]\d*$/, message: '请输入正确的月份', trigger: 'blur' }],phone: [{ required: true, message: "请输入联系电话", trigger: "blur" },{ pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }],email: [{ required: true, message: "请输入邮箱", trigger: "blur" },{type: 'email',message: '请输入正确的邮箱格式',trigger: ['blur', 'change'],},]
});
前端Vue中常用rules校验规则:1、是否合法IP地址:pattern:/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,2.是否手机号码或者固话
pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,3. 是否身份证号码
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,4.是否邮箱
pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,5.整数填写
pattern:/^-?[1-9]\d*$/,6.正整数填写
pattern:/^[1-9]\d*$/,7.小写字母
pattern:/^[a-z]+$/,8.大写字母
pattern:/^[A-Z]+$/,9.大小写混合
pattern:/^[A-Za-z]+$/,10.多个8位数字格式(yyyyMMdd)并以逗号隔开
pattern:/^\d{8}(\,\d{8})*$/,11.数字加英文,不包含特殊字符
pattern:/^[a-zA-Z0-9]+$/,12.前两位是数字后一位是英文
pattern:/^\d{2}[a-zA-Z]+$/,13.密码校验(6-20位英文字母、数字或者符号(除空格),且字母、数字和标点符号至少包含两种)
pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,14.中文校验
pattern:/^[\u0391-\uFFE5A-Za-z]+$/,
  1. 动态添加的实现
// 添加人员
const addPerson = () => {form.value.tableData.push({// 身份证号cardId: '',// 从事专业professional: '',// 投入时间(月)months: '',// 联系电话phone: '',// 邮箱email: ''})
}
  1. 表格删除的实现
// 存储删除的数据
let delList: any = []
const delEdit = (index: number, row: any) => {form.value.tableData.splice(index, 1)delList.push(row)
}
  1. 提交时再次验证
// 提交
const subHandle = async (formEl: FormInstance | any) => {if (!formEl) returnawait formEl.validate(async (valid: any) => {if (valid) {// 通过校验调用接口...}}
}

效果展示:
在这里插入图片描述

http://www.lryc.cn/news/111689.html

相关文章:

  • VSCode插件Todo Tree的使用
  • 无人驾驶实战-第五课(动态环境感知与3D检测算法)
  • Tomcat 的内存配置
  • pycharm出现python test运行报错(pytest模式)
  • JavaScript篇 this指向
  • 操作系统复习总结1
  • Matlab中图的最短路径
  • 没有jodatime,rust里怎么将字符串转为日期呢?
  • 【Markdown入门及使用】
  • 大数据面试题:HBase的读写缓存
  • springboot基于vue的高校迎新系统的设计与实现8jf9e
  • JVM入门到精通
  • Hive执行引擎的区别
  • 分布式 - 服务器Nginx:常见问题总结(二)
  • 【Paper Reading】CenterNet:Keypoint Triplets for Object Detection
  • 【BASH】回顾与知识点梳理(三)
  • C#设计模式之---单例模式
  • Git工具安装
  • 深度学习——注意力机制、自注意力机制
  • STM32入门学习之定时器中断
  • 基本数据类型与包装数据类型的使用标准
  • 小研究 - 基于 SpringBoot 微服务架构下前后端分离的 MVVM 模型(二)
  • ArmSoM-W3之RK3588安装Qt+opencv+采集摄像头画面
  • 基于长短期神经网络的风速预测,基于LSTM的风速预测
  • Mybatis引出的一系列问题-spring多数据源配置
  • Vue-组件二次封装
  • [C++]02.选择结构与循环结构
  • C语言案例 按序输出多个整数-03
  • 如何获取vivado IP列表
  • 计算机网络的定义和分类