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好用

相关推荐
包淼淼6 小时前
微信小程序自定义navigationBar顶部导航栏(背景图片)适配所有机型,使用tdesign-miniprogram t-navbar设置背景图片
微信小程序·小程序·tdesign
Hsu yiqi2 个月前
TDesign组件库日常应用的一些注意事项
tdesign
xiansibao3 个月前
tdesign和vue的子组件关闭是,父组件执行方法
前端·vue.js·tdesign
穿城大饼3 个月前
TDesign环境搭建-后台模板的安装和使用-构建web管理端后台系统
前端·tdesign
不秃头的UI设计师4 个月前
TDesign:腾讯企业级设计体系的UI组件库详解
ui·tdesign
大美B端工场-B端系统美颜师5 个月前
TDesign:腾讯的企业级前端框架,对标elementUI和ant-design
前端框架·tdesign
xuxiaoxie10 个月前
小程序多文件上传 Tdesign
小程序·tdesign
shadow fish1 年前
微信小程序在TS模板下引入TDesign组件
微信小程序·小程序·tdesign
素心如月桠1 年前
tdesign的文件上传(微信小程序+idea的springboot)
java·spring boot·微信小程序·intellij-idea·tdesign
素心如月桠1 年前
微信小程序与idea后端如何进行数据交互
java·开发语言·微信小程序·小程序·intellij-idea·交互·tdesign