uniapp + uView动态表单校验

news/2025/1/24 3:04:39/

项目需求:动态循环表单,并实现动态表单校验

页面:

javascript">		<u--form label-position="top" :model="tmForm" ref="tmForm" label-width="0px" :rules='rules'><div v-for="(element, index) in tmForm.tmList.filter((item) => item.delFlag !== 1)" :key="index"class="form-item"><div v-if="element.txTip == 'Input'">{{ element.tmTitle }}</div><u-form-item :required="element.pz.sfBt == '0'" :prop="`tmList[${index}].value`":label="`第${getFilteredIndex(index)}题`" v-if="element.txTip != 'Input'"><div class="tm-title">{{ element.tmTitle }}</div><div class="tm-sm" v-if="element.tmSm">题目说明:{{ element.tmSm }}</div><div class="tm-sm" v-if="element.txTip == 'Textarea'">题目规则:请填写『{{ element.pz.zfMin }} ~ {{ element.pz.zfMax }}』个字</div><div class="tm-sm" v-if="element.txTip == 'InputNumber'">题目规则:请填写『{{ element.pz.szMin }} ~ {{ element.pz.szMax }}』之间,小数点不超过{{element.pz.szDeciPlace}}位的数</div><div class="tm-sm" v-if="element.txTip == 'CheckBox' || element.txTip == 'twCheckBox'">题目规则:请选择『{{ element.pz.dxMin }} ~ {{ element.pz.dxMax }}』个选项</div><div class="tm-sm" v-if="element.txTip == 'TimePicker'">题目规则:请选择『{{ element.pz.rqMin }} ~ {{ element.pz.rqMax }}』之间的时间</div><div class="tm-sm" v-if="element.txTip == 'Upload'">题目规则:请上传『{{ element.pz.dxMin }} ~ {{ element.pz.dxMax }}』张图片</div><component style="margin-top: 10upx;" :optionList="element.optionList" :options="element.pz"v-model="element.value" :is="getWidget(element.txTip)"@updateValue="(newValue) => updateValue(element, newValue)"></component></u-form-item></div></u--form>

直接给rules里面循环加上校验规则,注意页面prop的写法  :prop="`tmList[${index}].value`"

javascript">	export default {data() {return {tmForm: {tmList: []},rules: {}}},mounted() {this.setRules()},methods: {// 循环设置rulessetRules() {this.tmForm.tmList.forEach((ele, index) => {this.$set(this.rules, `tmList[${index}].value`, [{validator: this.validate(ele),trigger: 'change'}])}),},// 表单验证方法validate(element) {return (rule, value2, callback) => {let value = element.value  //value2是空的,我手动赋值了if (element.pz.sfBt === '0' && (!value || value.length < 1)) {callback(new Error("请输入"));return;}if (element.txTip == "Textarea") {if (value && value.length > element.pz.zfMin) {callback(); // 通过验证} else {callback(new Error("文本长度不能小于10位"));}}if (element.txTip == "InputNumber") {const regex = new RegExp(`^-?\\d+(\\.\\d{0,${element.pz.szDeciPlace}}})*$`);// 判断是否在指定范围内且满足小数点位数要求if (value >= element.pz.szMin && value <= element.pz.szMax && regex.test(value)) {callback(); // 通过验证} else {callback(new Error(`请输入『${element.pz.szMin} ~ ${element.pz.szMax}』之间,小数点不超过${element.pz.szDeciPlace}位的数`)); // 验证失败}}if (element.txTip == "CheckBox" || element.txTip == "twCheckBox") {if (value.length >= element.pz.dxMin && value.length <= element.pz.dxMax) {console.log(1);callback(); // 通过验证} else {callback(new Error(`请选择『${element.pz.dxMin} ~ ${element.pz.dxMax}』个选项`)); // 验证失败console.log(2);}}if (element.txTip == "Upload") {const imageUrls = value.split(","); // 将图片 URL 字符串拆分为数组if (imageUrls.length >= element.pz.dxMin) {callback(); // 验证通过} else {callback(new Error(`请至少上传 ${element.pz.dxMin} 张图片`)); // 验证失败}}if (element.txTip == "Address" && element.pz.sfXxdz == "0") {if (value.value2) {callback(); // 验证通过} else {callback(new Error(`请填写详细地址`)); // 验证失败}}if (element.txTip == "PhoneNumber") {const reg = /^1[3-9]\d{9}$/; // 定义手机号码的正则表达式if (reg.test(value)) {callback(); // 验证通过} else {callback(new Error("手机号码格式不正确")); // 验证失败}}if (element.txTip == "IdNumber") {const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; // 定义身份证号码的正则表达式if (reg.test(value)) {callback(); // 验证通过} else {callback(new Error("身份证号码格式不正确")); // 验证失败}}if (element.txTip == "Email") {const reg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/; // 定义邮箱地址的正则表达式if (reg.test(value)) {callback(); // 验证通过} else {callback(new Error("邮箱地址格式不正确")); // 验证失败}}callback();};},}
}

文章来源:https://blog.csdn.net/qq_66390045/article/details/138307018
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ppmy.cn/news/1446840.html

相关文章

用Rust编写Python扩展

一、用Rust编写Python扩展 用Rust编写Python扩展是完全可行的&#xff0c;并且近年来变得越来越流行。Rust是一种内存安全的语言&#xff0c;它提供了与C语言类似的底层访问能力&#xff0c;但具有更强大的内存安全和并发特性。 为了使用Rust编写Python扩展&#xff0c;你可以…

VScode 无法连接云服务器

试了很多方法&#xff0c;比如更换VScode版本&#xff0c;卸载重装&#xff0c;删除配置文件 重启电脑&#xff0c;都无法成功。最后重置电脑后才连接上&#xff0c;但是重启服务器后又出现该问题。暂时无解决办法。

数据仓库Data Warehouse

数据仓库Data Warehouse 数仓是一种思想,数仓是一种规范,数仓是一种解决方案 1. 数据处理方式 数据处理大致可以分成两大类: 联机事务处理OLTP(on-line transaction processing)联机分析处理OLAP(On-Line Analytical Processing)1.1. OLTP OLTP的全称是On-line Transa…

【blender几何节点】制作几何节点生成树

实际上&#xff0c;用pcg功能的工具去搭单个可控制性较强的pcg案例&#xff08;如单个生成树&#xff09;而言&#xff0c;确实难度不大。但是要实现诸如speedtree这样通用性比较强的应用or插件&#xff08;精心设计的诸多可调节参数多带来的强通用性&#xff0c;使其能够适应不…

神经网络与深度学习中的目标检测与语义分割

神经网络与深度学习中的目标检测与语义分割是计算机视觉领域的两个重要任务。 目标检测的主要任务是在给定的图片中精确找到物体所在位置&#xff0c;并标注出物体的类别。由于物体的尺寸变化范围大&#xff0c;摆放物体的角度和姿态不定&#xff0c;且可以出现在图片的任何地…

Docker常用命令 镜像库设置

Docker常用命令 & 镜像库设置 1. 镜像操作2. 容器操作3. 网络操作4. Docker Compose操作5. Docker volume操作6. Docker run介绍7. 镜像库设置 1. 镜像操作 列出本地所有的镜像 docker images从远程仓库拉取镜像到本地 docker pull <image_name>删除本地的指定镜像…

笔记-mathtype公式在PDF或打印出来显示不全

原文中的公式&#xff1a; 纸质版打印出来的公式有缺失 问题描述&#xff1a;mathtype公式编辑器所编辑的公式转成PDF或者打印出来有缺失 以下是解决方法的具体描述。 目录 一、准备工作二、操作步骤 一、准备工作 1、工具&#xff1a;mathtype、微软word 二、操作步骤 …

【RabbitMQ】可靠性策略(幂等,消息持久化)

MQ可靠性策略 发送者的可靠性问题生产者的重连生产者确认 MQ的可靠性数据持久化Lazy Queue 消费者的可靠性问题消费者确认机制消息失败处理 业务幂等性简答问题 发送者的可靠性问题 生产者的重连 可能存在由于网络波动&#xff0c;出现的客户端连接MQ失败&#xff0c;我们可以…