TDesign表单rules通过函数 实现复杂逻辑验证输入内容

Element ui 中 我们可以通过validator 绑定函数来验证一些不在表单model中的值 又或者处理一下比较复杂的判断逻辑
在这里插入图片描述
TDesign也有validator 但比较直观的说 没有Element那么好用
在这里插入图片描述
这里 我们给validator绑定了我们自己的checkAge函数
这个函数中 只有一个参数 value 而且 如果你的v-model绑定的值不在表单data绑定的对象中 这个value拿到的会是undefined

好在 我们在函数中可以直接通过 this拿到响应式数据
就比如这里 我们判断this.imageValue 是不是等于空字符串
然后这里 你直接在函数中 返回 true 表示验证通过 返回false 表示验证失败
验证失败 他会输出你message中绑定的内容
就没有Element ui中的这个callback处理提示了
如果你想判断多个逻辑 就只能写多个了
在这里插入图片描述
老实说 很直观的没有Element ui好用

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

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

相关文章

Java-Optional类

概述 Optional是JAVA 8引入的一个类,用于处理可能为null的值。 利用Optional可以减少代码中if-else的判断逻辑,增加代码的可读性。且可以减少空指针异常的发生,增加代码的安全性。 常用的方法 示例 代码 public class OptionalTest {pub…

前端基础(Element、vxe-table组件库的使用)

前言:在前端项目中,实际上,会用到组件库里的很多组件,本博客主要介绍Element、vxe-table这两个组件如何使用。 目录 Element 引入element 使用组件的步骤 使用对话框的示例代码 效果展示 vxe-table 引入vxe-table 成果展…

【力扣】62. 不同路径 <动态规划>

【力扣】62. 不同路径 一个机器人位于一个 m m m x n n n 网格的左上角 (起始点在下图中标记为 “Start” )。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为 “Finish” )。问总共有多少条…

详解 SpringMVC 的 @RequestMapping 注解

文章目录 1、RequestMapping注解的功能2、RequestMapping注解的位置3、RequestMapping注解的value属性4、RequestMapping注解的method属性5、RequestMapping注解的params属性(了解)6、RequestMapping注解的headers属性(了解)7、Sp…

2023谷歌开发者大会直播大纲「终稿」

听人劝、吃饱饭,奉劝各位小伙伴,不要订阅该文所属专栏。 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 跨域学习者,从事过全栈研发、产品经理等工作,现任研发部门 CTO 。荣誉:2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师,“星荐官共赢计…

无涯教程-JavaScript - CUBEMEMBERPROPERTY函数

描述 CUBEMEMBERPROPERTY函数从多维数据集返回成员属性的值。使用此函数可以验证多维数据集中是否存在成员名称,并返回该成员的指定属性。 语法 CUBEMEMBERPROPERTY (connection, member_expression, property)争论 Argument描述Required/OptionalconnectionName of the co…

ORB-SLAM3复现过程中遇到的问题及解决办法

在复现过程中遇到的问题的解决过程 1. 版本检查1.1 Opencv版本的检测1.2 Eigen版本的检测1.3 查看Python版本1.4 其他 2. 编译过程中遇到的问题及解决办法2.1 ./build.sh遇到的问题2.2 ./build_ros.sh遇到的问题 因为环境比较干净,所以遇到的问题相对少一些&#xf…

【LeetCode】409. 最长回文串

409. 最长回文串(简单) 方法:哈希表 贪心 思路 不难发现,回文字符串一定是由 若干偶数个字符 至多一个奇数个字符 组成 。我们可以使用一个长度为 128 的 hash表来记录每一个字符的出现次数,当该字符出现了两次&am…

【learnopengl】Assimp构建与编译

文章目录 【learnopengl】Assimp构建与编译1 前言2 Assimp构建与编译2.1 下载源码2.2 CMake构建2.3 VS2022编译 3 在VS中配置Assimp库4 验证 【learnopengl】Assimp构建与编译 1 前言 最近在跟着LearnOpenGL这个网站学习OpenGL,这篇文章详细记录一下教程中关于Ass…

Navicat介绍及下载安装教程

Navicat是一个广泛使用的数据库管理工具,可用于管理多种数据库系统,如MySQL、MariaDB、Oracle等。它提供了丰富的功能,使得管理数据库变得更加容易和高效。安装Navicat十分简单,只需下载安装包并按照向导进行操作即可。在安装完成…

RealVNC配置自定义分辨率(AlmaLinux 8)

RealVNC 配置自定义分辨率(AlmaLinux8) 参考RealVNC官网 how to set up resolution https://help.realvnc.com/hc/en-us/articles/360016058212-How-do-I-adjust-the-screen-resolution-of-a-virtual-desktop-under-Linux-#standard-dummy-driver-0-2 …

【ROS 04】ROS运行管理

ROS是多进程(节点)的分布式框架,一个完整的ROS系统实现: 可能包含多台主机; 每台主机上又有多个工作空间(workspace); 每个的工作空间中又包含多个功能包(package); 每个功能包又包含多个节点(Node),不同的…

UE4/5在蓝图细节面板中添加函数按钮(蓝图与c++的方法)

目录 在细节面板中添加按钮使用函数 蓝图的方法 事件 函数 效果 uec的方法 效果 在细节面板中添加按钮使用函数 很多时候,我们可以看到一些插件的actor类中,点击一下之后就可以实现如矩阵一样的效果。 实际上是因为其使用了函数来修改了蓝图中的数…

ROS-4.创建发布者和订阅者

ros中非长连接的通信使用topic的方式,publisher向topic发布消息,subscriber订阅topic消息,对于非应答模式的通信适合使用该模式,如下图 接下来我们实现一个发布者和订阅者 1. 创建功能包 在实现订阅者和发布者的时候我们需要先…

wap2app 隐藏系统状态栏

一、首先创建wap2App项目 1、文件》新建》项目 2、选择Wap2App项目:输入项目名称、网站首页地址(如果是本地localhost的话改为你的IP地址即可),点击创建 二、创建完wap2App项目后 隐藏系统状态栏只要修改1、2选项即可 1、找到根…

Java 大厂面试 —— 常见集合篇 List HashMap 红黑树

23Java面试专题 八股文面试全套真题(含大厂高频面试真题)多线程_软工菜鸡的博客-CSDN博客 常见集合篇-01-集合面试题-课程介绍 02-算法复杂度分析 2 List相关面试题 2.1 数组 2.1.1 数组概述 数组(Array)是一种用连续的内存空…

Vue实现Antv/X6中的示例,以及一些er图开发场景

通过Vue实现Antv X6中的示例,以及一些开发场景,代码已经丢到仓库里了。 lwstudy/antv-x6-vue-demo: Vue实现Antv X6中的示例,以及一些开发场景 (github.com)learn-antv-x6: antv/X6学习 (gitee.com) 介绍 使用脚手架(自动生成接…

腾讯云国际代充-GPU服务器安装驱动教程NVIDIA Tesla

腾讯云国际站GPU 云服务器是基于 GPU 的快速、稳定、弹性的计算服务,主要应用于深度学习训练/推理、图形图像处理以及科学计算等场景。 GPU 云服务器提供和标准腾讯云国际 CVM 云服务器一致的方便快捷的管理方式。 GPU 云服务器通过其强大的快速处理海量数据的计算性…

小兔鲜商02

npm i vueuse/core -fvue插件使用: 许多公用的全局组件,,可以通过插件注册进去,就不用一个一个导入组件,, import XtxSkeleton from /components/library/xtx-skeletonexport default {install (app) {// …

IDM2024Internet Download Manager下载器最新版本

IDM(Internet Download Manager)下载器主窗口的左侧是下载类别的分类,提供了分类功能来组织和管理文件。如果不需要它,可以删除“分类”窗口,并且在下载文件时不选择任何分类。 每个下载类别都有一个名称,…