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

相关推荐
杨天天.1 个月前
微信小程序原生,tdesign时间选择器,t-date-time-picker封装成组件,开始时间结束时间
微信小程序·小程序·tdesign
shadowflies1 个月前
组件库TDesign的表格<t-table>的使用,行列合并以及嵌入插槽实现图标展示,附踩坑
前端·javascript·vue.js·vue·tdesign
LoveShadowing1 个月前
TDesign引入阿里Iconfont图标库
tdesign
卡姿兰大眼猫&1 个月前
TDesign 步骤条用法
tdesign
sunly_1 个月前
TDesign:TDAlertDialog消息确认弹窗
tdesign
sunly_1 个月前
TDesign:Switch开关
数据库·mysql·tdesign
小林学习编程2 个月前
TDesign了解及使用
tdesign
天天打码3 个月前
TDesign腾讯高保真Axure RP中后台交互模板及元件组件库
交互·axure·tdesign
包淼淼4 个月前
微信小程序自定义navigationBar顶部导航栏(背景图片)适配所有机型,使用tdesign-miniprogram t-navbar设置背景图片
微信小程序·小程序·tdesign
Hsu yiqi6 个月前
TDesign组件库日常应用的一些注意事项
tdesign