uniapp + uView动态表单校验

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

页面:

		<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`"

	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();};},}
}

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

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

相关文章

Docker依旧没有过时

【A】Docker 是一种开源的容器化平台&#xff0c;它允许开发人员将应用程序及其所有依赖项打包到一个统一的容器中&#xff0c;并在不同环境中进行部署和运行。以下是 Docker 的一些基本概念和优势&#xff1a; 容器&#xff1a;Docker 使用容器来隔离应用程序和其依赖项&#…

【信息系统项目管理师知识点速记】范围管理:确认范围

9.7 确认范围 确认范围是正式验收已完成的项目可交付成果的过程。其主要作用是使验收过程具有客观性,通过确认每个可交付成果来提高最终产品、服务或成果获得验收的可能性。确认范围过程应根据需要在整个项目期间定期开展。 1. 确认范围的步骤 确认范围应贯穿项目始终。一般…

低功耗数字IC后端设计实现典型案例| UPF Flow如何避免工具乱用Always On Buffer?

下图所示为咱们社区低功耗四核A7 Top Hierarchical Flow后端训练营中的一个案例&#xff0c;设计中存在若干个Power Domain&#xff0c;其中Power Domain2(简称PD2)为default Top Domain&#xff0c;Power Domain1&#xff08;简称PD1&#xff09;为一个需要power off的domain&…

mac/windows下安装docker,minikube

1、安装docker Get Started | Docker 下载安装docker 就行 启动后&#xff0c;就可以正常操作docker了 使用docker -v 验证是否成功就行 2、安装minikube&#xff0c;是基于docker-desktop的 2.1、点击设置 2.2、选中安装&#xff0c;这个可能需要一点时间 这样安装后&…

JavaScript实现在线屏幕录制

本文主要介绍在线屏幕录制 Demo Its sole method is MediaDevices.getDisplayMedia() !移动端暂不支持 环境要求 新版本 Chrome,Edge,Firefox 桌面浏览器 常见问题 1. navigator.mediaDevices为undefined 在不安全的情况下&#xff0c;navigator.mediaDevices是undefine…

机器学习实战 —— 工业蒸汽量预测(二)

目录 文章描述背景描述数据说明数据来源实战内容2.数据特征工程2.1数据预处理和特征处理2.1.1 异常值分析2.1.2 归一化处理2.1.3 特征相关性 2.2 特征降维2.2.1 相关性初筛2.2.2 多重共线性分析2.2.3 PCA处理降维 文章描述 数据分析&#xff1a;查看变量间相关性以及找出关键变…

面试经典算法题之双指针专题

力扣经典面试题之双指针 ( 每天更新, 每天一题 ) 文章目录 力扣经典面试题之双指针 ( 每天更新, 每天一题 )验证回文串收获 392. 判断子序列 验证回文串 思路 一: 筛选 双指针验证 class Solution { public:bool isPalindrome(string s) {// 所有大写字母 > 小写 去除非字母…

深度学习中的模块化设计

模块化设计在机器学习和深度学习领域中是一个重要的概念&#xff0c;特别是在构建和改进像编码器-解码器这样的复杂模型时。以下是模块化设计如何帮助快速集成最新研究成果的一些关键点&#xff1a; 即插即用&#xff1a;模块化设计允许研究人员将新的研究成果如新的注意力机制…

掌握JavaScript面向对象编程核心密码:深入解析JavaScript面向对象机制对象基础、原型模式与继承策略全面指南,高效创建高质量、可维护代码

ECMAScript&#xff08;简称ES&#xff0c;是JavaScript的标准规范&#xff09;支持面向对象编程&#xff0c;通过构造函数模拟类&#xff0c;原型链实现继承&#xff0c;以及ES6引入的class语法糖简化面向对象开发。对象可通过构造函数创建&#xff0c;使用原型链共享方法和属…

max各种相机导出到ue4匹配镜头的工具集

总览 rollout export_UE4Cam_v2 "导出UE4Cam_v2:半自动" width:200 height:120(HyperLink explain "在打开的max文件中使用" pos:[25,12] width:200 height:15 color:(color 255 155 0) GroupBox grp1 "要导出的相机名" pos:[5,28] width:179 …

一个单例模式中使用std::unique_ptr引起的莫名其妙的COFF损坏的问题(未解决)

使用static std::unique_ptr和static std::shared_ptr都不行struct IElementAgendaEvents {//! Called to allow listeners to modify the agenda by adding/removing entries before applying tool operation. Return true if entries added or invalidated.virtual bool …

如何使用Scrapy和Python 3爬取网页

简介 网络爬虫&#xff0c;通常称为网络爬行或网络蜘蛛&#xff0c;是以编程方式浏览一系列网页并提取数据的行为&#xff0c;是处理网络数据的强大工具。 通过使用网络爬虫&#xff0c;您可以挖掘有关一组产品的数据&#xff0c;获取大量文本或定量数据以进行分析&#xff0…

1、FreeCAD概述与架构

FreeCAD介绍 FreeCAD的诞生&#xff1a;2002年10月29日&#xff0c;由Jrgen Riegel上传了版本0.0.1的初始上传。FreeCAD的维基百科页面显示&#xff0c;FreeCAD基本上是由不同强大的库组成的集合&#xff0c;其中最重要的是openCascade&#xff0c;用于管理和构建几何体&#x…

【Vue 2.x】学习vue之一基础部分

文章目录 Vue 一基础部分第一章1、git两个分支主分支子分支 使用方法方式1&#xff1a;采用命令的方式操作分支方式2&#xff1a;在idea中使用git的分支 向git远程仓库提交时忽略文件使用git时的一些冲突注意事项 2、Vue问题1&#xff1a;什么是Vue&#xff1f;问题2&#xff1…

泰勒创造力达到顶峰?(下)

上文说了一半&#xff0c;回顾看文&#xff1a; https://blog.csdn.net/weixin_41953346/article/details/138336524 继续看下文 “Like I lost my twin /Fuck it if I cant have him,"she sings in “Down Bad". 在《Down Bad》这首歌中&#xff0c;她唱道&#xff…

TiDB系列之:使用TiUP部署TiDB集群最新版本,同时部署TiCDC的详细步骤

TiDB系列之:使用TiUP部署TiDB集群最新版本,同时部署TiCDC的详细步骤 一、部署TiDB集群二、准备环境三、安装 TiUP四、安装TiUP cluster组件五、初始化包含TiCDC的TiDB集群拓扑文件六、检查和修复集群存在的潜在风险七、查看可以安装的tidb版本八、部署 TiDB 集群:九、查看集…

Activiti7 开发快速入门【2024版】

记录开发最核心的部分&#xff0c;理论结合业务实操减少废话&#xff0c;从未接触工作流快速带入开发。假设你是后端的同学学过JAVA和流程图&#xff0c;则可以继续向后看&#xff0c;否则先把基础课程书准备好先翻翻。 为什么要工作流 比起直接使用状态字段&#xff0c;工作…

工业互联网常用开源库

libopen62541 opc-ua开源库 libmodbus modbus开源库 libsocketcan can 开源库 canutils&#xff1a;ubuntu 中socket can 与can通道绑定命令ifconfig -a 查看当前can设备名如can0ip link set down can0ip link set can0 type can bitrate 5000ip link set up can0cansend ca…

【C++之多态的知识】

C学习笔记---018 C之多态的知识1、C多态的简单介绍1.1、多态的分类1.2、多态的构成条件 2、虚函数2.1、虚函数的重写(覆盖) 3、虚函数重写的两个例外3.1、协变&#xff1a;(基类与派生类虚函数返回值类型不同)3.2、析构函数的重写(基类与派生类析构函数的名字不同) 4、两个关键…

redis运维篇下篇

最近在学redis&#xff0c;由于笔者是学运维的&#xff0c;所以推荐学习运维的小伙伴参考&#xff0c;希望对大家有帮助&#xff01; redis运维篇上篇:http://t.csdnimg.cn/MfPud 附加redis多用户管理:http://t.csdnimg.cn/DY3yx 目录 十.redis慢日志 十一.redis的key的有效…