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

相关推荐
QC班长2 个月前
微信小程序引入TDesign组件后报错一直提示路径不对(Component is not found in path)的解决方法
微信小程序·小程序·tdesign·引入tdesign组件后报错
杨天天.5 个月前
微信小程序原生,tdesign时间选择器,t-date-time-picker封装成组件,开始时间结束时间
微信小程序·小程序·tdesign
shadowflies5 个月前
组件库TDesign的表格<t-table>的使用,行列合并以及嵌入插槽实现图标展示,附踩坑
前端·javascript·vue.js·vue·tdesign
LoveShadowing5 个月前
TDesign引入阿里Iconfont图标库
tdesign
卡姿兰大眼猫&6 个月前
TDesign 步骤条用法
tdesign
sunly_6 个月前
TDesign:TDAlertDialog消息确认弹窗
tdesign
sunly_6 个月前
TDesign:Switch开关
数据库·mysql·tdesign
小林学习编程7 个月前
TDesign了解及使用
tdesign
天天打码8 个月前
TDesign腾讯高保真Axure RP中后台交互模板及元件组件库
交互·axure·tdesign
包淼淼9 个月前
微信小程序自定义navigationBar顶部导航栏(背景图片)适配所有机型,使用tdesign-miniprogram t-navbar设置背景图片
微信小程序·小程序·tdesign