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

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